js之基础认识与用法 | 青训营笔记

allRight
94 阅读5分钟

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 对象。

<body>
​
<p>
在 HTML 中, 所有全局变量都会成为 window 变量。
</p>
<p id="demo"></p>
    
<script>
myFunction();
document.getElementById("demo").innerHTML =
    "我可以显示 " + window.carName;
function myFunction() 
{
    carName = "Volvo";
}
</script>
​
</body>

事件

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

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

HTML 事件

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

以下是 HTML 事件的实例：

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

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

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

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

如：

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

<body>
​
<button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>
<p id="demo"></p>
​
</body>

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

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

<body>
​
<button onclick="this.innerHTML=Date()">现在的时间是?</button>
​
</body>

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

avatar
文章
阅读
粉丝