js之基础认识与用法

您所在的位置：网站首页 › getelementbyid返回值为null › js之基础认识与用法

js之基础认识与用法

2023-05-19 17:24| 来源: 网络整理| 查看: 265

JavaScript输出

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

使用 window.alert() 弹出警告框。使用 document.write() 方法将内容写到 HTML 文档中。使用 innerHTML 写入到 HTML 元素。使用 console.log() 写入到浏览器的控制台。

document.getElementById("demo").innerHTML = "段落已修改。";

document.write(Date());

语法 JavaScript 字面量

在编程语言中，一般固定值称为字面量，如 3.14。

数字（Number）字面量可以是整数或者是小数，或者是科学计数(e)。

3.14、1001

字符串（String）字面量可以使用单引号或双引号

"John Doe"、'John Doe'

表达式字面量用于计算

5 + 6、5 * 10

数组（Array）字面量定义一个数组：

[40, 100, 1, 5, 25, 10]

对象（Object）字面量定义一个对象：

{ firstName: " John ", lastName: " Doe ", age: 50, eyeColor: " blue " }

函数（Function）字面量定义一个函数：

function myFunction(a, b) { return a * b;}

JavaScript 变量

JavaScript 使用关键字 var 来定义变量，使用等号来为变量赋值：

var x, length x = 5 length = 6 复制代码

变量可以通过变量名访问

JavaScript 操作符类型实例描述赋值，算术和位运算符= + - * /在 JS 运算符中描述条件，比较及逻辑运算符== != < >在 JS 比较运算符中描述 JavaScript 关键字

和其他任何编程语言一样，JavaScript 保留了一些关键字为自己所用。

如：var 关键字告诉浏览器创建一个新的变量

JavaScript 数据类型

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 通过对象字面量赋值复制代码 JavaScript 函数

JavaScript 语句可以写在函数内，函数可以重复引用：

引用一个函数 = 调用函数(执行函数内的语句)。

function myFunction(a, b) { return a * b; // 返回 a 乘以 b 的结果 } 复制代码 JavaScript 字母大小写

JavaScript 对大小写是敏感的。

JavaScript 字符集

JavaScript 使用 Unicode 字符集。

语句

JavaScript 语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。

JavaScript 语句 document.getElementById("demo").innerHTML = "你好 Dolly"; 复制代码分号 ;

在 JavaScript 中，用分号来结束语句是可选的（可以使用也可以不使用，尽量使用）

JavaScript 代码

JavaScript 代码是 JavaScript 语句的序列。

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

JavaScript 代码块

JavaScript 可以分批地组合起来。

代码块以左花括号开始，以右花括号结束。

代码块的作用是一并地执行语句序列。

function myFunction() { document.getElementById("demo").innerHTML="你好Dolly"; document.getElementById("myDIV").innerHTML="你最近怎么样?"; } 复制代码 JavaScript 语句标识符

和常规大多数编程语言一样（更像java一些）：break、for、continue、throw、catch等都是语句标识符

注释单行注释

//这是注释即可

多行注释 /* 下面的这些代码会输出一个标题和一个段落并将代表主页的开始 */ 复制代码变量一条语句，多个变量

您可以在一条语句中声明很多变量。该语句以 var 开头，并使用逗号分隔变量即可：

var lastname="Doe", age=30, job="carpenter"; //声明也可横跨多行: var lastname="Doe", age=30, job="carpenter"; //一条语句中声明的多个变量不可以同时赋同一个值: var x,y,z=1; //x,y 为 undefined， z 为 1。复制代码 Value = undefined

在计算机程序中，经常会声明无值的变量。未使用值来声明的变量，其值实际上是 undefined。

在执行过以下语句后，变量 carname 的值将是 undefined：

var carname;

ES6及之后版本的声明模式

ES2015(ES6) 新增加了两个重要的 JavaScript 关键字: let 和 const。

let 声明的变量只在 let 命令所在的代码块内有效。

const 声明一个只读的常量，一旦声明，常量的值就不能改变。

区别：

在 ES6 前，JS 只有两种作用域：全局变量与函数内的局部变量。

这就意味着：使用 var 关键字声明的变量不具备块级作用域的特性，它在 {} 外依然能被访问到。

var x = 10; // 这里输出 x 为 10 { var x = 2; // 这里输出 x 为 2 } // 这里输出 x 为 2 复制代码

而 ES6 可以使用 let 关键字来实现块级作用域。let 声明的变量只在 let 命令所在的代码块 {} 内有效，在 {} 之外不能访问。

var x = 10; // 这里输出 x 为 10 { let x = 2; // 这里输出 x 为 2 } // 这里输出 x 为 10 复制代码

所以主要区别在于：

使用 var 关键字: var i = 5; for (var i = 0; i < 10; i++) { // 一些代码... } // 这里输出 i 为 10 复制代码使用 let 关键字: let i = 5; for (let i = 0; i < 10; i++) { // 一些代码... } // 这里输出 i 为 5 复制代码局部变量

在函数体外或代码块外使用 var 和 let 关键字声明的变量也有点类似。

它们的作用域都是全局的

全局变量

在函数体内使用 var 和 let 关键字声明的变量有点类似。

它们的作用域都是局部的

HTML 代码中使用全局变量

在 JavaScript 中, 全局作用域是针对 JavaScript 环境。

在 HTML 中, 全局作用域是针对 window 对象。

使用 var 关键字声明的全局作用域变量属于 window 对象使用 let 关键字声明的全局作用域变量不属于 window 对象重置变量

使用 var 关键字声明的变量在任何地方都可以修改

在相同的作用域或块级作用域中，不能使用 let 关键字来重置 var 关键字声明的变量

在相同的作用域或块级作用域中，不能使用 let 关键字来重置 let 关键字声明的变量

在相同的作用域或块级作用域中，不能使用 var 关键字来重置 let 关键字声明的变量

let 关键字在不同作用域，或不同块级作用域中是可以重新声明赋值的

变量提升

JavaScript 中，var 关键字定义的变量可以在使用后声明，也就是变量可以先使用再声明

const 关键字

const定义常量与使用let 定义的变量相似：

二者都是块级作用域

且都不能和它所在作用域内的其他变量或函数拥有相同的名称

两者还有以下两点区别：

const声明的常量必须初始化，而let声明的变量不用 const 定义常量的值不能通过再赋值修改，也不能再次声明。而 let 定义的变量值可以修改。

const 的本质: const 定义的变量并非常量，并非不可变，它定义了一个常量引用一个值。使用 const 定义的对象或者数组，其实是可变的。下面的代码并不会报错：

// 创建常量对象 const car = {type:"Fiat", model:"500", color:"white"}; // 修改属性: car.color = "red"; // 添加属性 car.owner = "Johnson"; 复制代码

但是我们不能对常量对象重新赋值：

const car = {type:"Fiat", model:"500", color:"white"}; car = {type:"Volvo", model:"EX60", color:"red"}; // 错误复制代码

以下实例修改常量数组：

const cars = ["Saab", "Volvo", "BMW"]; cars = ["Toyota", "Volvo", "Audi"]; // 错误复制代码数据类型

值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol。

引用数据类型（对象类型）：对象(Object)、数组(Array)、函数(Function)，还有两个特殊的对象：正则（RegExp）和日期（Date）。

JavaScript 拥有动态类型

JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型

JavaScript 对象

对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：

var person={ firstname : "John", lastname : "Doe", id : 5566 }; 复制代码

上面例子中的对象 (person) 有三个属性：firstname、lastname 以及 id。

Undefined 和 Null

Undefined 这个值表示变量不含有值。

可以通过将变量的值设置为 null 来清空变量。

声明变量类型

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

var carname=new String; var x= new Number; var y= new Boolean; var cars= new Array; var person= new Object; 复制代码

JavaScript 变量均为对象。当您声明一个变量时，就创建了一个新的对象。

访问对象方法

你可以使用以下语法创建对象方法：

var person = { firstName: "John", lastName : "Doe", id : 5566, fullName : function() { return this.firstName + " " + this.lastName; } }; 复制代码

你可以使用以下语法访问对象方法：

person.fullName(); 复制代码函数

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

JavaScript 函数语法

函数就是包裹在花括号中的代码块，前面使用了关键词 function：

function functionname() { // 执行代码 } 复制代码

当调用该函数时，会执行函数内的代码。

可以在某事件发生时直接调用函数（比如当用户点击按钮时），并且可由 JavaScript 在任何位置进行调用。

带有返回值的函数

与java一致

function myFunction() { var x=5; return x; } var myVar=myFunction(); //用于接受函数返回值复制代码 JavaScript 变量的生存期

JavaScript 变量的生命期从它们被声明的时间开始。

局部变量会在函数运行以后被删除。

全局变量会在页面关闭后被删除。

向未声明的 JavaScript 变量分配值

如果您把值赋给尚未声明的变量，该变量将被自动作为 window 的一个属性。

这条语句：

carname="Volvo";

将声明 window 的一个属性 carname。

非严格模式下给未声明变量赋值创建的全局变量，是全局对象(即window)的可配置属性，可以删除。

var var1 = 1; // 不可配置全局属性 var2 = 2; // 没有使用 var 声明，可配置全局属性 console.log(this.var1); // 1 console.log(window.var1); // 1 console.log(window.var2); // 2 delete var1; // false 无法删除 console.log(var1); //1 delete var2; console.log(delete var2); // true console.log(var2); // 已经删除报错变量未定义复制代码 HTML 中的全局变量

在 HTML 中, 全局变量是 window 对象，所以window 对象可以调用函数内对局部变量。

在 HTML 中, 所有全局变量都会成为 window 对象的变量

注意：所有数据变量都属于 window 对象。

在 HTML 中, 所有全局变量都会成为 window 变量。 myFunction(); document.getElementById("demo").innerHTML = "我可以显示 " + window.carName; function myFunction() { carName = "Volvo"; } 复制代码事件

HTML 事件是发生在 HTML 元素上的事情。

当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。

HTML 事件

HTML 事件可以是浏览器行为，也可以是用户行为。

以下是 HTML 事件的实例：

HTML 页面完成加载 HTML input 字段改变时 HTML 按钮被点击

通常，当事件发生时，你可以做些事情。

在事件触发时 JavaScript 可以执行一些代码。

HTML 元素中可以添加事件属性，使用 JavaScript 代码来添加 HTML 元素。

如：

在以下实例中，按钮元素中添加了 onclick 属性 (并加上代码):

现在的时间是? 复制代码

以上实例中，JavaScript 代码将修改 id="demo" 元素的内容，将id = ”demo“的元素变为时间的文本信息。

在下一个实例中，代码将修改自身元素的内容 (使用 this.innerHTML):

现在的时间是? 复制代码

即点击后：按钮本身变为时间的文本信息。

【本文地址】

js之基础认识与用法

js之基础认识与用法

今日新闻

推荐新闻