JavaScript基础学习

var x=5;
var y=6;
var z=x+y;

a=1;b=2;
a=1 b=2;//------错误

//不推荐
a=1
b=2

//推荐
a=1;
b=2;

{
 a=1;
 b=2;
    //推荐加tab
    a=1;
    b=2;
}

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

var carname="Volvo XC60";
var carname='Volvo XC60';

var answer="It's alright";
var answer="He is called 'Johnny'";
var answer='He is called "Johnny"';

var x1=34.00;      //使用小数点来写
var x2=34;         //不使用小数点来写

var y=123e5;      // 12300000
var z=123e-5;     // 0.00123

var x=true;
var y=false;

var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";

var cars=new Array("Saab","Volvo","BMW");

var cars=["Saab","Volvo","BMW"];

var person={firstname:"John", lastname:"Doe", id:5566};

var person={
firstname : "John",
lastname  : "Doe",
id        :  5566
};

name=person.lastname;
name=person["lastname"];

cars=null;
person=null;

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

JavaScript属于松散类型的程序语言
变量在声明的时候并不需要指定数据类型
变量只有在赋值的时候才会确定数据类型
表达式中包含不同类型数据则在计算过程中会强制进行类别转换
数字+字符串：数字转换为字符串
数字+布尔值：true转换为1，false转换为0
字符串+布尔值：布尔值转换为字符串“true”或“false”

函数parseInt：强制转换成整数
例如：
parseInt(“6.12”)    6
parseInt(“12a”)    12
parseInt(“1a2”)    1
函数parseFloat：强制转换成浮点数
parseFloat(“6.12”)    6.12
函数eval：将字符串强制转换为表达式并返回结果
eval(“1+1”)    2
eval(“1<2”)    true

函数typeof：查询数值当前类型（string / number / boolean / object）
例如typeof(“test”+3)    “string”
例如typeof(null)        “object”
例如typeof(true+1)     “number”
例如typeof(true-false)    “number”

加（+）、减（-）、乘（*）、除（/）、求余（%）
+除了可以表示加法运算外还可以用于字符串的连接。例如：”abc”+”def”    “abcdef”
-除了可以表示减号外还可以表示负号。例如：x=-y

假如x=2，那么x++表达式执行后的值为3，x--表达式执行后的值为1
i++相当于i=i+1，i--相当于i=i-1
递增和递减运算符可以放在变量前也可以放在变量后：--i
var i=1;
console.log(i++);
console.log(++i);
console.log(i--);
console.log(--i);

var a=1;
var b=1;
a=-a;  //a=-1;

var c=”10”;
alert(typeof(c));  //string
c=+c;  //类型转换
alert(typeof(c));  //number

var d=”mayi”;
d=+d;
alert(d);  //NaN：属于Number类型的一个特殊值，当遇到将字符串转成数字无效时，就会得到一个NaN数据
alert(typeof(d));  //number

var n=NaN;
alert(n>3);  //false
alert(n<3);  //false
alert(n==3);  //false
alert(n==NaN);  //false

alert(n!=NaN);  //true。NaN参与的所有的运算都是false，除了!=

等于（==）、不等于（!=）、大于（>）、小于（<）、大于等于（>=）、小于等于（<=）
与（&&）、或（||）、非（!）
1&&1    1
1&&0    0
0&&1    0
0&&0    0
1||1    1
1||0    1
0||1    1
0||0    0
!0    1
!1    0

赋值 =
JavaScript中“=”代表赋值，两个等号“==”表示判断是否相等
例如，x=1表示给x赋值为1
if(x==1){...}  程序表示当x与1相等时
配合其他运算符形成的简化表达式
例如i+=1相当于i=i+1，x&=y相当于x=x&y

var b1 = 2 == "2";
var b2 = 2 === "2";
var b3 = 4 != "4";
var b4 = 4 !== "4";

var a = 2;
var b = 4;
var c1 = a < b | --b > --a;
var c2 = a < b || --b > --a;
var c3 = a < b && --b > --a;
var c4 = a < b & --b > --a;

console.log(b1);  //true
console.log(b2);  //false
console.log(b3);  //false
console.log(b4);  //true
console.log(c1);  //1
console.log(c2);  //true
console.log(c3);  //true
console.log(c4);  //1

var bResult = "Blue" < "alpha";
alert(bResult);  //输出 true

var bResult = "25" < "3";
alert(bResult);  //输出 true

var bResult = "25" < 3;
alert(bResult);  //输出 false

var temp=new Object();// false;[];0; null; undefined;object(new Object();)

if(temp){
    console.log("true")
}else {
    console.log("false")
}

if-esle  基本格式：
if(表达式){
语句1;
......
}else{
语句2;
......
};
功能说明：
如果表达式的值为true，则执行语句1，否则执行语句2

var x= (new Date()).getDay();
//获取今天的星期值，0为星期天
var y;

if((x==6) || (x==0)) {
y="周末";
}else{
y="工作日";
}

alert(y);

if语句嵌套格式：
if(表达式1){
    语句1;
}else if(表达式2){
    语句2;
}else if(表达式3){
    语句3;
}else{
    语句4;
}

var x= (new Date()).getDay();
//获取今天的星期值，0为星期天
var y;
if(x==1){
    y="星期一";
}else if(x==2){
    y="星期二";
}else if(x==3){
    y="星期三";
}else if(x==4){
    y="星期四";
}else if(x==5){
    y="星期五";
}else if(x==6){
    y="星期六";
}else{
    y="星期日"
}

alert(y);

switch基本格式：
switch(表达式){
case 值1:语句1;break;
case 值2:语句2;break;
case 值3:语句3;break;
default:语句4;
}

var x= (new Date()).getDay();
//获取今天的星期值，0为星期天
var y;

switch (x){
    case 1:y="星期一";break;
    case 2:y="星期二";break;
    case 3:y="星期三";break;
    case 4:y="星期四";break;
    case 5:y="星期五";break;
    case 6:y="星期六";break;
    default:y="星期日";
}

alert(y);

首先要看一个问题，if语句适用范围比较广，只要是boolean表达式都可以用if判断；而switch只能对基本类型进行数值比较。两者的可比性就仅限在两个基本比较的范围内。
说到基本类型的数值比较，那当然要有两个数。然后重点来了——
if语句每一句都是独立的，看下面的语句：
if(a==1){
    ......
}else if(a==2){
    ......
}
这样a要被讲稿寄存器两次，1和2分别被读入寄存器一次。于是你是否发现其实a读两次是有点多余的，在你全部比较完之前只需要一次读入寄存器就行了，其余都是额外开销。但是if语句必须每次都把里面的两个数从内存拿出来读到寄存器，它不知道你其实比较的是同一个a。
于是switch case就出来了，把上面的改成switch case版本：
switch(a){
case 0:......;break;
case 1:......;break;
}
总结：
1.switch用来根据一个整型值进行多路分支，并且编译器可以对多路分支进行优化。
2.switch-case只将表达式计算一次，然后将表达式的值与每个case的值比较，进而选择执行哪一个case的语句块。
3.if...else的判断条件范围较广，每条语句基本上独立的，每次判断时条件都要加载一次。
所以在多路分支时用switch比if...else if...else结构要效率高。

for循环基本格式：
for(初始化;条件;增量){
语句1;
......
}
功能说明：
实现条件循环，当条件成立时，执行语句1，否则跳出循环休。

for(var i=1;i<=6;i++){
    document.write("<H"+i+">hello</H"+i+">");
}

var arr=[1, "hello", true];
for(var j in arr){
    console.log(j);
    console.log(arr[j]);
}

while循环基本格式：
while(条件){
语句1;
......
}
功能说明：
功能和for类似，当条件成立循环执行语句花括号{}内的语句，否则跳出循环。

var i=1;
while (i<=6){
    document.write("<H"+i+">hello</H"+i+">");
    i++;
}

try{
    ......  //这段代码从上往下运行，其中任何一个语句抛出异常该代码块就结束运行
}catch (e){
......  //如果try代码块中抛出了异常，catch代码块中的代码就会被执行。
......  //e是一个局部变量，用来指向Error对象或者其他抛出的对象
}finally{
    ......  //无论try中代码是否有异常抛出（甚至是try代码块中有return语句），finally代码块中始终会被执行。
}

ToString() : 返回对象的原始字符串表示。
ValueOf() : 返回最适合该对象的原始值。对于许多对象，该方法返回的值都与ToString()的返回值相同。

<script language="javascript">
var aa=Number.MAX_VALUE;
//利用数字对象获取可表示最大数
var bb=new String("hello JavaScript");
//创建字符串对象
var cc=new Date();
//创建日期对象
var dd=new Array("星期一", "星期二", "星期三", "星期四");
//数组对象
</script>

var str1="hello world";
alert(str1.length);
alert(str1.substr(1, 5));

var str1=new String("hello world");
alert(str1.length);
alert(str1.substr(1, 3));

书写格式：
String对象提供了一组针对HTML格式的方法，如x.anchor()返回锚定义字符串<a>x</a>
x.bold()返回粗体表示字符串<b>x</b>，x.sup()返回上标格式字符串<sup>x</sup>

var x="mayi";
var y="x.italics():"+x.italics();
document.write(y.fontsize(10));  //<font size="10">x.italics():<i>mayi</i></font>

var str1="AbcdEfgh";
var str2=str1.toLowerCase();
var str3=str1.toUpperCase();
alert(str2);  //结果为"abcdefh"
alert(str3);  //结果为"ABCDEFH"

书写格式：
x.charAt(index)
x.charCodeAt(index)
使用注解：
x代表字符串对象
index代表字符位置
index从0开始编号
charAt返回index位置的字符
charCodeAt返回index位置的Unicode编码

var str1="welcome to the world of Python! 蚂蚁";
var str2=str1.charAt(28);  //结果为"蚂"
var str3=str1.charCodeAt(30);  //结果为34434

书写格式：
x.indexOf(findstr, index)
x.lastIndexOf(findstr)
var str1="Welcome to the world of Python! ";
var str2=str1.indexOf("l");
var str3=str1.lastIndexOf("l");
alert(str2);  //结果为2
alert(str3);  //结果为18

书写格式：
x.match(regexp)
x.search(regexp)
使用注解：
x代表字符串对象
regexp代表正则表达式或字符串
match返回匹配字符串的数组，如果没有匹配则返回null
search返回匹配字符串的首字符位置索引

var str1="welcome to the world of Python! ";
var str2=str1.match("world");
var str3=str1.search("world");
alert(str2[0]);  //结果为"world"
alert(str3);  //结果为15

书写格式：
x.substr(start, length)
x.substring(start, end)
使用注解：
x代表字符串对象
start表示开始位置
length表示截取长度
end是结束位置加1
第一个字符位置为0

var str1="abcdefgh";
var str2=str1.substr(2, 4);
var str3=str1.substring(2, 4);
alert(str2);  //结果为"cdef"
alert(str3);  //结果为"cd"

x.slice(start, end)
var str1="abcdefgh";
var str2=str1.slice(2, 4);
var str3=str1.slice(4);
var str4=str1.slice(2, -1);
var str5=str1.slice(-3, -1);
alert(str2);  //结果为"cd"
alert(str3);  //结果为"efgh"
alert(str4);  //结果为"cdefg"
alert(str5);  //结果为"fg"

x.replace(findstr, tostr)

var str1="abcdefgh";
var str2=str1.replace("cd", "aaa");
alert(str2);  //结果为"abaaaefgh"

var str1="一,二,三,四,五,六,日";
var strArray=str1.split(",");
alert(strArray[1]);  //结果为"二"

书写格式：
y=x.concat(addstr)
使用注解：
x代表字符串对象
addstr为添加字符串
返回x+addstr字符串

var str1="abcd";
var str2=str1.concat("efgh");
alert(str2);  //结果为"abcdefgh"

Array对象用于在单个的变量中存储多个值。
语法：
创建方式1：
var a=[1, 2, 3];
创建方式2：
new Array();  //创建数组时允许指定元素个数也可以不指定元素个数。
new Array(size);  //如果1个参数且为数字，即代表size
初始化数组对象：
var cnweek=new Array(7);
cnweek[0]= "星期日";
cnweek[1]= "星期一";
......
cnweek[6]= "星期六";
new Array(element0, element1, ..., elementn)  //也可以直接在建立对象时初始化数组元素，元素类型允许不同
var test=new Array(100, "a", true)

var cnweek=new Array(7);
for(var i=0;i<=6;i++){
    cnweek[i]=new Array(2);
}
cnweek[0][0]= "星期日";
cnweek[0][1]= "Sunday";
cnweek[1][0]= "星期一";
cnweek[1][1]= "Monday";
......
cnweek[6][0]= "星期六";
cnweek[6][1]= "Saturday";

var cnweek=new Array(7);
cnweek[0]= "星期日";
cnweek[1]= "星期一";
cnweek[2]= "星期二";
cnweek[3]= "星期三";
cnweek[4]= "星期四";
cnweek[5]= "星期五";
cnweek[6]= "星期六";
for(var i=0;i<cnweek.length;i++){
    document.write(cnweek[i]+ " | ");
}

书写格式：
x.join(bystr)
使用注解：
x代表数组对象
bystr作为连接数组中元素的字符串
返回连接后的字符串
与字符串的split功能刚好相反

var arr1=[1, 2, 3, 4, 5, 6, 7];
var str1=arr1.join("-");
alert(str1);  //结果为"1-2-3-4-5-6-7"

连接数组-concat方法
x.concat(value, ...)

var a=new Array(1, 2, 3);
var b=a.concat(4, 5);

alert(a.toString());  //返回结果为1, 2, 3
alert(b.toString());  //返回结果为1, 2, 3, 4, 5

书写格式：
x.reverse()
x.sort()

var arr1=[32, 12, 111, 444];

arr1.reverse();  //颠倒数组元素
alert(arr1.toString());  //结果为444, 111, 12, 32

arr1.sort();  //排序数组元素
alert(arr1.toString());  //结果为111, 12, 32, 444


arr=[1, 5, 2, 100];

arr.sort();
alert(arr);  //1, 100, 2, 5
//如果想按着数字大小比较
arr=[1, 5, 2, 100];

function intSort(a, b){
    if(a > b){
      return 1;
    }
    else if(a < b){
        return -1;
    }
    else{
        return 0;
    }
}
arr.sort(intSort);
alert(arr);  //1, 2, 5, 100

书写格式：
x.slice(start, end)
使用注解：
x代表数组对象
start表示开始位置索引
end是结束位置下一数组元素索引编号
第一个数组元素索引为0
start、end可为负数，-1代表最后一个数组元素
end省略则相当于从start位置截取以后所有数组元素

var arr1=[ 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'];
var arr2=arr1.slice(2, 4);
var arr3=arr1.slice(4);
var arr4=arr1.slice(2, -1);

alert(arr2.toString());  //结果为"c, d"
alert(arr3.toString());  //结果为"e, f, g, h"
alert(arr4.toString());  //结果为"c, d, e, f, g"

使用格式：
x.splice(start, deleteCount, value, ...)
使用注解：
x代表数组对象
splice的主要用途是数组指定位置进行删除和插入
start表示开始位置索引
deleteCount删除数组元素的个数
value表示在删除位置插入的数组元素
value参数可以省略

var a=[1, 2, 3, 4, 5, 6, 7, 8];
a.splice(1, 2);  //a变为[1, 4, 5, 6, 7, 8]
alert(a.toString());  //1, 4, 5, 6, 7, 8
a.splice(1, 1);  //a变为[1, 5, 6, 7, 8]
alert(a.toString());  //1, 5, 6, 7, 8
a.splice(1, 0, 2, 4);
alert(a.toString());  //1, 2, 4, 5, 6, 7, 8

push pop
使用格式：
x.push(value, ...)  压栈
x.pop()  出栈
使用注解：
x代表数组对象
value可以为字符串、数字、数组等任何值
push是将value值添加到数组x的结尾

var arr1=[1, 2, 3];
arr1.push(4, 5);
alert(arr1);  //结果为"1,2,3,4,5"
arr1.push([6, 7]);
alert(arr1);  //结果为"1,2,3,4,5,6,7"
arr1.pop();
alert(arr1);  //结果为"1,2,3,4,5"


unshift shift
使用格式：
x.unshift(value, ...)
x.shift()
使用注解：
x代表数组对象
value可以为字符串、数字、数组等任何值
unshift是将value值插入到数组x的开始
shift是将数组x的第一个元素删除

var arr1=[1, 2, 3];
arr1.unshift(4, 5);
alert(arr1);  //结果为"4, 5, 1, 2, 3"
arr1.unshift([6, 7]);
alert(arr1);  //结果为"6, 7, 4, 5, 1, 2, 3"
arr1.shift();
alert(arr1);  //结果为"4, 5, 1, 2, 3"

java中数组的特性：规定是什么类型的数组，就只能装什么类型，只有一种类型。
js中的数组特性1：js中的数组可以装任意类型，没有任何限制。
js中的数组特性2：js中的数组，长度是随着下标变化的，用到多长就有多长。
var arr1 = ["abc", 123, 1.14, true, null, undefined, new String("1213"), new Function("a", "b", alert(a+b))];
alert(arr1.length);  //8
arr1[10]= "hahaha";
alert(arr1.length);
alert(arr1[9]);  //undefined

方法1：不指定参数
var nowd1=new Date();
alert(nowd1.toLocaleString());
方法2：参数为日期字符串
var nowd2=new Date("2004/3/20 11:12");
alert(nowd2.toLocaleString());
var nowd3=new Date("04/03/20 11:12");
alert(nowd3.toLocaleString());
方法3：参数为毫秒数
var nowd3=new Date(5000);
alert(nowd3.toLocaleString());
alert(nowd3.toUTCString());
方法4：参数为年月日小时分钟秒毫秒
var nowd4=new Date(2004, 2, 20, 11, 12, 0, 300);
alert(nowd4.toLocaleString());
毫秒并不直接显示

function getCurrentDate(){
    //1.创建Date对象
    var date = new Date();  //没有参数：当前时间
    //2.获得当前年份
    var year = date.getFullYear();
    //3.获得当前月份（0-11）
    var month = date.getMonth() + 1;
    //4.获得当前日
    var day = date.getDate();
    //5.获得当前小时
    var hour = date.getHours();
    //6.获得当前分钟
    var min = date.getMinutes();
    //7.获得当前秒
    var sec = date.getSeconds();
    //8.获得当前星期
    var week = date.getDay();
    
    return year + "年" + changeNum(month) + "月" + day + "日 " + hour + ":" + min +":" + sec + " " + parseWeek(week)
}

function changeNum(num){
    if(num < 10){
        return "0" + num;
    }else{
        return num;
    }
}

function parseWeek(week){
    var arr = ["日", "一", "二", "三", "四", "五", "六"];

    return "星期" + arr[week]
}

alert(getCurrentDate());  //2019年07月02日 09:18:30 星期二

设置日期和时间
setDate(day_of_month)    设置日
setMonth(month)         设置月
setFullYear(year)          设置年
setHours(hour)           设置小时
setMinutes(minute)       设置分钟
setSeconds(second)       设置秒
setMilliseconds(ms)       设置毫秒（0-999）
setTime(allms)           设置累计毫秒（从1970/1/1午夜）

var x = new Date();
x.setFullYear(2019);  //设置年2019
x.setMonth(6);  //设置月7
x.setDate(2);  //设置日2
x.setHours(9);  //设置小时9
x.setMinutes(30);  //设置分钟30
x.setSeconds(59);  //设置秒59
x.setMilliseconds(230);  //设置毫秒230
document.write(x.toLocaleString() + "<br>");  //返回2019/7/2 上午9:30:59

x.setTime(870409430000);  //设置累计毫秒数
document.write(x.toLocaleString() + "<br>");  //返回1997/8/1 下午12:23:50

日期和时间的转换：
getTimezoneOffset()  -8个时区*15充*4分/度=-480
//返回本地时间与GMT的时间差，以分钟为单位
toUTCString()  //返回国际标准时间字符串
toLocalString()  //返回本地格式时间字符串
Date.parse(x)  //返回累计毫秒数（从1970/1/1午夜到本地时间）
Date.UTC(x)  //返回累计毫秒数（从1970/1/1午夜到国际时间）

RegExp对象
在表单验证时使用该对象验证用户填入的字符串是否符合规则
创建正则对象方式1  参数1 正则表达式 参数2 验证模式 g global / i 忽略大小定
创建方式1：
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$","g");
验证字符串
var str = "bc123";
alert(reg1.test(str));  //true
创建方式2：
var reg2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/g;
alert(reg2.test(str));  //true
正则对象的方法
test方法==>测试一个字符串是否符合  正则规则  返回值是true或false
String中与正则结合的4个方法：macth search split replace

var str = "hello world";

alert(str.match(/o/g));  //查找字符串中 符合正则的 内容
alert(str.search(/h/g));  //查找字符串中符合正则表达式的内容位置
alert(str.split(/o/g));  //按照正则表达式对字符串进行切割：返回数组
alert(str.replace(/o/g, "s"));  //hells wsrld 对字符串按照正则进行替换

Math对象
该对象中的属性方法：和数学有关
Math是内置对象，与Global的不同之处是，在调用时需要打出“Math.”前缀
属性：
alert(Math.PI);
方法：
alert(Math.random());  //获得随机数0-1（不包括1）
alert(Math.round(1.5));  //四舍五入
实例：获取1-100的随机整数，包括1和100
var num = Math.random();
num = num * 100;
num = Math.round(num);
alert(num)

//max  min
alert(Math.max(1, 2));  //2
alert(Math.min(1, 2));  //1
//pow  计算参数1的参数2次方
alert(Math.pow(2, 4));  // 2的4次方


var x = 3.54;
alert(Math.abs(x));  //返回数的绝对值
alert(Math.exp(x));  //返回e的指数
alert(Math.floor(x));  //向下取整
alert(Math.log(x));  //返回数的自然对数（底为e）
alert(Math.max(x));  //返回x和y中的最高值
alert(Math.min(x));  //返回x和y中的最低值
alert(Math.pow(x));  //返回x的y次幂
alert(Math.random(x));  //返回0-1之间的随机数
alert(Math.round(x));  //四舍五入取整
alert(Math.sin(x));  //返回数的正统
alert(Math.sqrt(x));  //返回数的平方根
alert(Math.tan(x));  //返回数的正切

function 函数名(参数){
函数体;

return 返回值;
}
//another way:
var 函数名 = new Function("参数1", "参数n", "function_body");

function func1(){
    alert("hello MaYi!");

    return 11;
}

ret = func1();
alert(ret) ;


var func1 = new Function("name", "alert(\"hello \"+name);");

func1("MaYi");

<script>
//f();  ---->OK
function f(){
    console.log("hello");
}
f();  //---->OK
</script>

function func1(a, b){
    alert(a + b);
}
func1(1, 2);    //3
func1(1, 2, 3); //3
func1(1);       //NaN
func1();        //NaN
//只要函数名写对即可，参数怎么填都不报错

function add(a, b){
    console.log(a + b);  //3
    console.log(arguments.length);  //2
    console.log(arguments);  //[1, 2]
}
add(1, 2);

//arguments的用处1
function nxAdd(){
    var result = 0;
    for(var num in arguments){
        result += arguments[num];
    }
    alert(result)
}

nxAdd(1, 2, 3, 4, 5);  //15

//arguments的用处2
function f(){
    if(arguments.length != 3){
        throw new Error("function f called with " + arguments.length + " arguments, but it just need 3 arguments");
    }
    else{
        alert("success!");
    }
}

f(1, 2, 3, 4, 5);

//匿名函数
var func = function(arg){
    return "tony";
};

//匿名函数的应用
(function(){
    alert("tony");
})()

(function(arg){
    console.log(arg);
})('123')

if(1 == 1){
    var s = 12;
}
console.log(s);  //12

function f(){
    var temp = 666;
}
f();
console.log(temp);  //Uncaught ReferenceError: temp is not defined

var city = 'beijing';
function func(){
    var city = 'shanghai';
    console.log(city);  //shanghai
    function inner(){
        var city = 'shenzhen';
        console.log(city);  //shenzhen
    }
    inner();
}
func();
console.log(city);  //beijing

var city = 'beijing';
function Bar(){
    console.log(city);
}

function func(){
    var city = 'shanghai';

    return Bar;
}

var ret = func();
ret();  //beijing

var city = 'beijing';
function func(){
    var city = 'shanghai';
    function inner(){
        console.log(city);
    }

    return inner();
}

var ret = func();
ret();  //shanghai

var x = 1;
function foo(){
　　var y = 2;
　　
　　function bar(){
    　　var z = 3;
　　}
}

函数进入全局，创建VO对象，绑定X属性<入栈>
global.VO = {x = underfind; foo: reference of function}（这里只是预解析，为AO对象绑定声明的属性，函数执行时才会执行赋值语句，所以值是underfind）
遇到foo函数，创建foo.AO，绑定y属性<入栈>
foo.AO = {y = underfind, bar: reference of function}
遇到bar函数，创建bar.AO，绑定z属性<入栈>
bar.AO = {z: underfind}
作用域链和执行上下文都会保存在堆栈中，所以：
bar函数的scope chain为：[0]bar.AO-->[1]foo.AO-->[2]global.VO
foo函数的scope chain为：[0]foo.AO-->[1]global.VO
//建议：少定义全局变量
//理由：因为作用域链是栈的结构，全局变量在栈底，每次访问全局变量都会遍历一次栈，这样会影响效率

//alert confirm prompt
alert('hi');

var result1 = confirm("您确定要删除吗？");
alert(result1);  //true或false

//prompt 参数1：提示信息；参数2：输入框的默认值。返回值是用户输入的内容
var result2 = prompt("请输入一个数字！", "10");
alert(result2);

//open方法：打开和一个新的窗口并进入指定网址。参数1：网址
//调用方式1：
//open("http://www.baidu.com");

//调用方式2：
open('', '', 'width=200, resizable=no, height=100');  //新打开一个宽为200，高为100的窗口

//close方法：将当前文档窗口关闭
close();

<label><input id="ID1" type="text" onclick="begin()" /></label>
<button onclick="end()">停止</button>

<script>
    function showTime(){
        var nowd2 = new Date().toLocaleString();
        var temp = document.getElementById("ID1");
        temp.value = nowd2;
    }

    var clock;

    function begin(){
        if(clock == undefined){
            showTime();
            clock = setInterval(showTime, 1000);
        }
    }

    function end(){
        clearInterval(clock);
    }
</script>

    var id = setTimeout(func1, 2000);  //只调用一次对应函数
//    clearTimeout(id);

    function func1(){
        alert("hello");
    }

length  返回浏览器历史列表中的URL数量。

back()     加载history列表中的前一个URL。
forward()  加载history列表中的下一个URL。
go()       加载history列表中的某个具体页面。

<a href="test01.html">click</a>
<button onclick="history.forward()">>>></button>
<button onclick="history.back()">back</button>
<button onclick="history.go()">back</button>

location.assign(URL)
location.reload()
location.replace(newURL)  //注意与assign的区别

<div id="div1">
    <div id="div2">div</div>
    <p>hello MaYi</p>
</div>
<script>
    var div = document.getElementById("div2");

    console.log(div.nextSibling.nodeName);  //#text
</script>

<div id="div1">
    <div class="div2">i am div2</div>
    <div name="mayi">i am div2</div>
    <div id="div3">i am div3</div>
    <p>hello p</p>
</div>
<script>
    var div1 = document.getElementById("div1");

    var ele1 = div1.getElementsByTagName("p");  //支持
    alert(ele1.length);

    var ele2 = div1.getElementsByClassName("div2");  //支持
    alert(ele2.length);

//    var ele3 = div1.getElementById("div3");  //不支持
//    alert(ele3.length);

//    var ele4 = div1.getElementsByName("mayi");  //不支持
//    alert(ele4.length);
</script>

<div onclick="alert(123)">点我呀！</div>
<p id="abc">试一试！</p>

<script>
    var ele1 = document.getElementById("abc");

    ele1.onclick = function(){
        alert("hi");
    }
</script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test04</title>
    <script>
        function func1(){
            var ele1 = document.getElementById("ppp");
            ele1.onclick = function(){
                alert(123)
            };
        }
    </script>
</head>
<body onload="func1()">
<p id="ppp">hello p</p>
</body>
</html>

<form id="form">
    <label><input type="text" /></label>
    <label><input type="submit" value="点我！" /></label>
</form>

<script type="text/javascript">
    //阻止表单提交方式1
    //onsubmit 命名的事件函数：可以接受返回值。其中返回false表示拦截表单提交，其他为放行。
    var ele1 = document.getElementById("form");
    ele1.onsubmit = function(event){
//        alert("验证失败，表单不会提交！");
//        return false;

        //阻止表单提交方式2
        //event.preventDefault(); ==>通知浏览器不要执行与事件关联的默认动作
        alert("验证失败，表单不会提交！");
        event.preventDefault();
    }
</script>

<div id="abc_1" style="border: 1px solid red;width: 300px;height: 300px;">
    <div id="abc_2" style="border: 1px solid red;width: 200px;height: 200px;"></div>
</div>
<script type="text/javascript">
    document.getElementById("abc_1").onclick = function(){
        alert("111");
    };
    document.getElementById("abc_2").onclick = function(event){
        alert("222");
        event.stopPropagation();  //阻止事件向外层div传播
    };
</script>

createElement(name)  创建元素
appendChild()        将元素添加

获得要删除的元素
获得它的父元素
使用removeChild()方法删除

第一种方式：
　　使用上面的增和删结合完成修改
第二种方式：
　　使用setAttribute()方法修改属性
　　使用innerHTML属性修改元素的内容

<script type="text/javascript">
    //在第一个div中动态增加一个a标签，该a标签点击之后跳转到百度首页
    function addNode(){
        //1.获得第一个div
        var div1 = document.getElementById("div_1");
        //2.创建a标签
        var eleA = document.createElement("a");
        //3.为a标签添加属性
        eleA.setAttribute("href", "https://www.baidu.com");
        //4.为a标签添加内容
        eleA.innerHTML = "百度";
        //5.将a标签添加到div中
        div1.appendChild(eleA);
    }

    function deleteNode(){
        //1.获得要删除的div区域
        var div1 = document.getElementById("div_2");
        //2.获得父亲
        var parent = div1.parentNode;
        //3.由父亲操刀
        parent.removeChild(div);
    }

    function updateNode(){
        //1.获得要替换的div区域
        var div1 = document.getElementById("div_3");
        //2.创建img标签对象
        var img = document.createElement("img");
        //3.添加属性
        img.setAttribute("src", "001.jpg");
        //4.获得父节点
        var parent = div.parentNode;
        //5.替换
        parent.replaceChild(img, div);
    }

    function copyNode(){
        //1.获取要克隆的div
        var div1 = document.getElementById("div_4");
        //2.克隆：参数为true-克隆所有子元素；参数为false-只克隆自己
        var div1_copy = div1.cloneNode(true);
        //3.获得父亲
        var parent = div1.parentNode;
        //4.添加
        parent.appendChild(div1_copy);
    }
</script>

<p id="p1">Hello World!</p>
<script>
    document.getElementById("p1").style.color = "blue";
</script>

elementNode.setAttribute(name, value)
elementNode.getAttribute(name)

createElement(name)

elementNode.removeChild(node)

elementNode.className
elementNode.classList.add
elementNode.classList.remove