JavaScript基本知识

// 1 变量定义
var v = 1;
a = 1;   // python根本不需要var，JavaScript可要可不要，除了var，JavaScript还有两个可用来定义变量的关键字，let和const，let即局部变量，const即局部变量加常量
// b;   // 注意：这么定义是不行的，如果不赋值定义一个变量，必须用var！
if (v == a) {alert(a);}
/*这里需要强调JS的一个独有的特点：几乎所有的编程语言都是先编译再执行或者边解释边执行，我们知道JS是一门解释型语言，但是它在做解释执行之前，它会先做一个预编译，这个预编译会先获得所有的定义的变量，因而JS的代码有的时候看上去可以做一些违背顺序结构的事情
  其原因就在这了*/
declaration();          // 输出: function declaration
function declaration() {
    document.write("function declaration<br>");
}
/*
expression();           // 报错：Uncaught TypeError: undefined is not a function
var expression = function() {
    document.write("function expression");
};
*/

// 2 数据类型:typeof操作符，它不是一个函数，而是操作符
/*
基本数据类型（值类型）：字符串（String）、数字（Number）、布尔（Boolean）、空（Null）、未定义（Undefined）、Symbol；
引用数据类型：对象（Object）、数组（Array）、函数（Function）。
*/

// 第一类：基本数据类型
// String
var str = "Let's have a cup of coffee.";  // 双引号中包含单引号
var str = 'He said "Hello" and left.';    // 单引号中包含双引号
var str = 'We\'ll never give up.';        // 使用反斜杠转义字符串中的单引号

// Number
var num = 123;     // 整数
var num = 3.14;    // 浮点数
var num = 123e5;      // 123 乘以 10 的 5 次方，即 12300000
var num = 123e-5;     // 123 乘以 10 的 -5 次方，即 0.00123
/*
Number 类型中还有一些比较特殊的值，分别为 Infinity、-Infinity 和 NaN，其中
Infinity：用来表示正无穷大的数值，一般指大于 1.7976931348623157e+308 的数；
-Infinity：用来表示负无穷大的数值，一般指小于 5e-324 的数；
NaN：即非数值（Not a Number 的缩写），用来表示无效或未定义的数学运算结构，例如 0 除以 0。
*/

// Boolean
var a = true;   // 定义一个布尔值 true
var b = false;  // 定义一个布尔值 false
var c = 2 > 1;  // 表达式 2 > 1 成立，其结果为“真（true）”，所以 c 的值为布尔类型的 true
var d = 2 < 1;  // 表达式 2 < 1 不成立，其结果为“假（false）”，所以 c 的值为布尔类型的 false

// Null : 使用 typeof 操作符来查看 Null 的类型，会发现 Null 的类型为 Object，说明 Null 其实使用属于 Object（对象）的一个特殊值。因此通过将变量赋值为 Null 我们可以创建一个空的对象。

// Undefined : 两种情况，一，未定义的变量，二，未赋值的变量

// Symbol
var str = "123";
var sym1 = Symbol(str);
var sym2 = Symbol(str);
console.log(sym1);          // 输出 Symbol(123)
console.log(sym2);          // 输出 Symbol(123)
console.log(sym1 == sym2);  // 输出 false ：虽然 sym1 与 sym2 看起来是相同的，但实际上它们并不一样，根据 Symbol 类型的特点，sym1 和 sym2 都是独一无二的

// 第二类：引用数据类型
// Object : 键值对
var person = {
    name: 'Bob',
    age: 20,
    tags: ['js', 'web', 'mobile'],
    city: 'Beijing',
    hasCar: true,
    zipcode: null
};
console.log(person.name);       // 输出 Bob
console.log(person.age);        // 输出 20

// Array
var arr = new Array(1, 2, 3, 4);
var arr = [1, 2, 3.14, 'Hello', null, true];
console.log(arr[0]);  // 输出索引为 0 的元素，即 1
console.log(arr[5]);  // 输出索引为 5 的元素，即 true
console.log(arr[6]);  // 索引超出了范围，返回 undefined

// Function ： 在JS里面，函数既是其他语言里面那个函数，也是一种数据类型，因而这里有一些有趣的问题
// 第一种：正常定义
function sayHello1(name){
    document.write("Hello1 " + name + '<br>');
}
// 第二种：把函数当成一种数据类型定义
var myFunction = function sayHello2(name) {
    document.write("Hello2 " + name + '<br>');
}
// 这种定义方式还可以改写为匿名方式
var sayHello3 = function(name) {
    document.write("Hello3 " + name + '<br>');
}
// 注意了：三个函数并没有返回值，所以是undefined
console.log(sayHello1('WY'));
// console.log(sayHello2('WY'));
console.log(myFunction('WY'));
console.log(sayHello3('WY'));

// 3 运算符 ： 和其它语言一样运算符就是那些，唯一需要注意的是，在JavaScript里面有字面值的含义，因而会有===和!===这样的运算符

// 4 输出 ： 
/*
五种：
使用 alert() 函数来弹出提示框；
使用 confirm() 函数来弹出一个对话框；
使用 document.write() 方法将内容写入到 HTML 文档中；
使用 innerHTML 将内容写入到 HTML 标签中；
使用 console.log() 在浏览器的控制台输出内容。
*/
// innerHTML
var demo = document.getElementById("demo");
console.log(demo.innerHTML);
demo.innerHTML = "<h2>innerHTML</h2>"

// confirm()
var res = window.confirm("这里是要显示的内容");
if(res == true){
    alert("你点击了“确定”按钮");
}else{
    alert("你点击了“取消”按钮");
}

// 5 控制结构 ： 和其它语言一样，顺序结构，选择结构（if-else，switch-case），循环结构（while，do-while，for），除此以外，还有两点不同：
// 第一点不同：for变体
// 第一种for变体（for in）：用来遍历key，所以一般用来遍历对象
var person = {name: "Clark", 'surname': "Kent", "age": "36"};   // 你看，key不带引号或者带单引号都是可以的
for(var key in person) {   // 这条语句等价于：for(var i = 0;i < 3;i++)
    document.write("<p>" + key + " = " + person[key] + "</p>");
}
var str = "Hello World!";
/*注意：数组字符串也是可以的，只是一般不用for-in，理解这样一个问题，字符串的本质就是数组，数组了定义下标概念，即arr[i] = 该值，这不也是key:value得形式吗？
for(var i in str) {   // 这条语句等价于：for(var i = 0;i < 3;i++)
    document.write("<p>" + i + " = " + str[i] + "</p>");   // 这里的i是下标
}
*/

// 第二种for变体（for of）：用来遍历value，一般用来遍历字符串、数组
for (var value of str) {
    document.write(value + ", " + '<br>');
}
/*注意：奇怪的是，for of是用来遍历value，但是在对象里遍历的是key，不要管这个细节，反正一般不这么做
for(var value in person) {
    document.write(value + ", " + '<br>');
}
*/

// 第二点不同：跳出循环语句break和continue我们已经非常熟悉了，但是break是跳出本循环的，而continue是跳出本层循环进入下一层循环的，怎样才能让他们随意地跳出任意循环呢？
document.write("开始循环!<br /> ");
outerloopwy:          // 定义一个标签，标签名可以随意定义    
for (var i = 0; i < 5; i++) {
   document.write("外层循环: " + i + "<br />");
   innerloop:       // 定义一个标签
   for (var j = 0; j < 5; j++) {
      if (j > 3 ) break ;           // 跳出内层循环
      if (i == 2) break innerloop;  // 跳出内层循环
      if (i == 4) break outerloopwy;  // 跳出外层循环
      document.write("内层循环: " + j + " <br />");
   }
}      
document.write("循环结束!<br /> ");

// 6 作用域 ： 实际情况下，所有具有全局作用域的变量都会被绑定到 window 对象中，成为 window 对象的一个属性，如下例所示：
var str = "JavaScript";
document.write(str + "<br>");                    // 输出：JavaScript
document.write(window.str + "<br>");             // 输出：JavaScript
document.write((str === window.str) + "<br>");     // 输出：true

// 7 对象 : key:value
// 第一个、key到底需要不需要引号：
/*
在定义对象时，属性名称虽然是字符串类型，但通常不需要使用引号来定义，但是以下三种情况则需要为属性名添加引号：
属性名为 JavaScript 中的保留字；
属性名中包含空格或特殊字符（除字母、数字、_ 和 $ 以外的任何字符）；
属性名以数字开头。
*/

// 第二个、对象中函数的定义
var person = {
    name: "Peter",
    age: 28,
    gender: "Male",
    displayName: function() {
        document.write(this.name);
    }
};
person.displayName();       // 输出：Peter
// person[displayName]();    // 输出：Peter
document.write("<br>");
person["displayName"]();   // 注意：这件事情很重要：我们已经知道了对象里头的key加不加引号都一样，但是外头可不一样，必须加引号

// 第三个、访问对象中的成员：以第二种方法为主，这种方法适用于全部情况且可以进行赋值操作
document.write("姓名：" + person.name + "<br>");   // 输出：姓名：Peter
document.write("年龄：" + person["age"]);          // 输出：年龄：28

// 第四个、修改
person.age = 20;
person["name"] = "Peter Parker";
for (var key in person) {
    document.write(key + "：" + person[key] + "<br>")
}

// 第五个、删除
delete person.gender;
delete person["phone"];
for (var key in person) {
    document.write(key + "：" + person[key] + "<br>")

// 至此，JavaScript的基础知识就学完了，接下来我们将深入学习JavaScript的事件、各类对象的属性及API、DOM......