JavaScript学习笔记

JavaScript 是脚本语言

JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
JavaScript 很容易学习。

JavaScript：直接写入 HTML 输出流

document.write("<h1>这是一个标题</h1>");

效果如图

只能在 HTML 输出中使用 document.write。如果您在文档加载后使用该方法，会覆盖整个文档。
如：原始界面是这样

点击过后就只显示标题了，其他内容被覆盖了

JavaScript：对事件的反应

<button type="button" onclick="alert('欢迎!')">test</button>

JavaScript：改变 HTML 内容

下面点击过后将会使按钮从a变成b

<button id="a" onclick="document.getElementById('a').innerHTML='b'">a</button>

JavaScript：改变 HTML 属性

document.getElementById(id).属性.match(匹配id)

<article>
    <input type="text" name="unknown" id="in" placeholder="文本">
    <input type="button" onclick="change(this)" value="变换" />
</article>
<script>
    function change(current) {
        var temp = document.getElementById("in")
        if (temp.type.match("text")) {
            temp.type = "password"
            temp.placeholder = "密码"
            current.value = "莫测"
        } else {
            temp.type = "text"
            temp.placeholder = "文本"
            current.value = "变换"
        }
    }

</script>

效果如下

JavaScript：验证输入

isNaN(x) 是否是数字

JavaScript 字面量

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

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

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

• 表达式字面量 用于计算

• 数组（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 来定义变量， 使用等号来为变量赋值，变量可以通过变量名访问。在指令式语言中，变量通常是可变的。字面量是一个恒定的值。

语句标识符

break		用于跳出循环。
catch		语句块，在 try 语句块执行出错时执行 catch 语句块。
continue	跳过循环中的一个迭代。
do ... while	执行一个语句块，在条件语句为 true 时继续执行该语句块。
for			在条件语句为 true 时，可以将代码块执行指定的次数。
for ... in	用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）。
function	定义一个函数
if ... else	用于基于不同的条件来执行不同的动作。
return		退出函数
switch		用于基于不同的条件来执行不同的动作。
throw		抛出（生成）错误 。
try			实现错误处理，与 catch 一同使用。
var			声明一个变量。
while		当条件语句为 true 时，执行语句块。

对代码行进行折行

document.write("你好 \
世界!");

一条语句，多个变量

var lastname="Doe", age=30, job="carpenter";
或
var lastname="Doe",
age=30,
job="carpenter";

重新声明 JavaScript 变量

如果重新声明 JavaScript 变量，该变量的值不会丢失：
在以下两条语句执行后，变量 carname 的值依然是 “Volvo”：

var carname="Volvo";
var carname;
alert(carname)

使用 let 和 const (ES6)

ES2015(ES6) 新增加了两个重要的 JavaScript 关键字: let 和 const。
let 声明的变量只在 let 命令所在的代码块内有效。
const 声明一个只读的常量，一旦声明，常量的值就不能改变。
在 ES6 之前，JavaScript 只有两种作用域： 全局变量 与 函数内的局部变量。

在 ES6 之前，是没有块级作用域的概念的。

ES6 可以使用 let 关键字来实现块级作用域。

let 声明的变量只在 let 命令所在的代码块 {} 内有效，在 {} 之外不能访问。

{ 
    var x = 2; 
}
// 这里可以使用 x 变量

{ 
    let x = 2;
}
// 这里不能使用 x 变量

在 HTML 中, 全局作用域是针对 window 对象。
使用 var 关键字声明的全局作用域变量属于 window 对象:

var carName = "Volvo";
// 可以使用 window.carName 访问变量

let carName = "Volvo";
// 不能使用 window.carName 访问变量

注意：在相同的作用域或块级作用域中，let不能够重置变量，而var可以重置变量；var可以先使用再去声明变量，而let必须在声明过后再使用。
如下，代码中的变量将失效

carName = "Volvo";
document.getElementById("demo").innerHTML = carName;
let carName;

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[0] = "Toyota";
// 添加元素
cars.push("Audi");
// 同理不能重新赋值
const cars = ["Saab", "Volvo", "BMW"];
cars = ["Toyota", "Volvo", "Audi"];    // 错误

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

const x = 2;       // 合法
{
    const x = 3;   // 合法
}
{
    const x = 4;   // 合法
}

JavaScript 拥有动态类型

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

var x;               // x 为 undefined
var x = 5;           // 现在 x 为数字
var x = "John";      // 现在 x 为字符串

声明变量类型

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

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

对象

对于对象中的方法，声明后必须使用方法名()调用

var person = {
    firstName: "John",
    lastName : "Doe",
    id : 5566,
    fullName : function() 
    {
       return this.firstName + " " + this.lastName;
    }
};
document.getElementById("demo1").innerHTML = "不加括号输出函数表达式："  + person.fullName;
document.getElementById("demo2").innerHTML = "加括号输出函数执行结果："  +  person.fullNa

向未声明的 JavaScript 变量分配值

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

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); // 已经删除 报错变量未定义

持续更新中。。。。。。