js学习笔记 _01(基础)

JavaScript 用法

HTML 中的脚本必须位于 <script> 与 </script> 标签之间。

脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中

外部的js代码

也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。

外部 JavaScript 文件的文件扩展名是 .js。

如需使用外部文件,请在 <script> 标签的 "src" 属性中设置该 .js 文件:

注意外部脚本不能包含<script>标签

<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>

JS向页面输出类容

JavaScript 可以通过不同的方式来输出数据:

使用 window.alert() 弹出警告框。

使用 document.write() 方法将内容写到 HTML 文档中
一般用于测试,如果文档已经加载完成会覆盖整个文档,比如通过点击来触发这个事件那么真个文档就会被覆盖,因为点击事件是在页面加载完成后执行的

使用 innerHTML 写入到 HTML 元素。(会覆盖原有的类容)

<script>
    document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
</script>

使用 console.log() 写入到浏览器的控制台

console.log()的用处

主要是方便你调式javascript用的, 你可以看到你在页面中输出的内容。

相比alert他的优点是:

他能看到结构化的东西,如果是alert,弹出一个对象就是[object object],但是console能看到对象的内容。

console不会打断你页面的操作,如果用alert弹出来内容,那么页面就死了,但是console输出内容后你页面还可以正常操作。

Js常用数据类型

JavaScript 有多种数据类型:数字,字符串,数组,对象等等

var length = 16;                                  // Number 通过数字字面量赋值 
var points = x * 10;                              // Number 通过表达式字面量赋值
var lastName = "Johnson";                         // String 通过字符串字面量赋值
var cars = ["Saab", "Volvo", "BMW"];              // Array  通过数组字面量赋值
var person = {firstName:"John", lastName:"Doe"};  // Object 通过对象字面量赋值
函数(Function)字面量 定义一个函数:
function myFunction(a, b) { return a * b;}

当您声明新变量时,可以使用关键词 "new" 来声明其类型:

var carname=new String;
var x=      new Number;
var y=      new Boolean;
var cars=   new Array;
var person= new Object;

创建数组

var arr1 = new Array('a', 'b', 'c');    //这是一个预定义的数组,在创建时初始化
var arr2 = ['a', 'b', 'c' ];       //同样是在创建时初始化,但是这种创建更为简洁直观
var arr3 = new Array( );   var arr4 = [ ];     //这两种是创建空的数组
<script>
var i;
var cars = new Array();
cars[0] = "Saab";
cars[1] = "Volvo";
cars[2] = "BMW";
​
for (i=0;i<cars.length;i++)
{
document.write(cars[i] + "<br>");
}
</script>

对象的创建和寻址方式

<script>
var person=
{
    firstname : "John",
    lastname  : "Doe",
    id        :  5566
};
document.write(person.lastname + "<br>");
document.write(person["lastname"] + "<br>");
</script>

对象中的方法

<script>
var person = {
    firstName: "John",
    lastName : "Doe",
    id : 5566,
    fullName : function() 
    {
       return this.firstName + " " + this.lastName;
    }
};
document.getElementById("demo").innerHTML = person.fullName();
</script>

Js中的字符串

Js代码的执行顺序和在在代码块中的语句的执行顺序

浏览器按照编写顺序依次执行每条语句。

代码块以左花括号开始,以右花括号结束,代码块的作用是一并地执行语句序列。

Js中的分号

在 HTML 中,JavaScript 语句向浏览器发出的命令,语句是用分号分隔:

分号用于分隔 JavaScript 语句。

通常我们在每条可执行的语句结尾添加分号。

使用分号的另一用处是在一行中编写多条语句。

<script>
a = 1;
b = 2;
c = a + b;
document.getElementById("demo1").innerHTML = c;
x = 1; y = 2; z = x + y;
document.getElementById("demo2").innerHTML = z;
</script>

Js函数

js函数声明语法

function functionname()
{
执行代码
}
或者
function functionname(parama...)
{
执行代码
}
或者
function functionname(parama...)
{
执行代码
return
}

小Demo
复选框的全选和全不选

var checkAll = false;
function allcheck(){
    checkAll = !checkAll;
    let inputs = document.getElementsByName('checkbox')
    for(var i =0;i<inputs.length;i++){inputs[i].checked = checkAll}
}

js的作用域

局部变量:在函数中通过var声明的变量。

全局变量:在函数外通过var声明的变量。

没有声明就使用的变量,默认为全局变量,不论这个变量在哪被使用

局部变量在函数执行完毕后销毁,全局变量在页面关闭后销毁。

function func(){
  undefined_var=110
}

函数内未声明即使用的变量情况:在 func() 被第一次调用之前, undefined_var 变量是不存在的即 undefined。func() 被调用过之后,undefined_var 成为全局变量。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容