day 14 js

js发展（JavaScript）：
1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEase.(客户端执行的语言)

Netscape(网景)接收Nombas的理念,(Brendan Eich)在其Netscape Navigator 2.0产品中开发出一套livescript的脚本语言.Sun和Netscape共同完成.后改名叫Javascript

微软随后模仿在其IE3.0的产品中搭载了一个JavaScript的克隆版叫Jscript.

为了统一三家,ECMA(欧洲计算机制造协会)定义了ECMA-262规范.国际标准化组织及国际电工委员会（ISO/IEC）也采纳 ECMAScript 作为标准（ISO/IEC-16262）。从此，Web 浏览器就开始努力（虽然有着不同的程度的成功和失败）将 ECMAScript 作为 JavaScript 实现的基础。EcmaScript是规范.


#ECMAScript  
尽管 ECMAScript 是一个重要的标准，但它并不是 JavaScript 唯一的部分，当然，也不是唯一被标准化的部分。实际上，一个完整的 JavaScript 实现是由以下 3 个不同部分组成的：

核心（ECMAScript） 
文档对象模型（DOM） Document object model (整合js，css，html)
浏览器对象模型（BOM） Broswer object model（整合js和浏览器）
Javascript 在开发中绝大多数情况是基于对象的.也是面向对象的. 
简单地说，ECMAScript 描述了以下内容：

语法 
类型 
语句 
关键字 
保留字 
运算符 
对象 (封装 继承 多态) 基于对象的语言.使用对象.

JS的引入方式
1 直接编写
    <script>
        alert('hello yuan')
    </script>
2 导入文件
    <script src="hello.js"></script>

#JS的变量、常量和标识符
 JS的变量
x=5
y=6
z=x+y

#1、声明变量时不用声明变量类型. 全都使用var关键字;
var a;<br>a=3;
2、一行可以声明多个变量.并且可以是不同类型
var name="yuan", age=20, job="lecturer";
3、声明变量时 可以不用var. 如果不用var 那么它是全局变量

4、变量命名,首字符只能是字母,下划线,$美元符 三选一，余下的字符可以是下划线、美元符号或任何字母或数字字符且区分大小写，x与X是两个变量　

#命名规范
Camel 标记法
首字母是小写的，接下来的字母都以大写字符开头。例如：
var myTestValue = 0, mySecondValue = "hi";
Pascal 标记法
首字母是大写的，接下来的字母都以大写字符开头。例如：
Var MyTestValue = 0, MySecondValue = "hi";
匈牙利类型标记法
在以 Pascal 标记法命名的变量前附加一个小写字母（或小写字母序列），说明该变量的类型。例如，i 表示整数，s 表示字符串，如下所示“
Var iMyTestValue = 0, sMySecondValue = "hi";

# 常量和标识符
2.2.2 常量和标识符

常量 ：直接在程序中出现的数据值

标识符：

由不以数字开头的字母、数字、下划线(_)、美元符号($)组成
常用于表示函数、变量等的名称
例如：_abc,$abc,abc,abc123是标识符，而1abc不是
JavaScript语言中代表特定含义的词称为保留字，不允许程序再定义为标识符

JS的数据类型
 number     -----  数值
        boolean    -----  布尔值
        string     -----  字符串
        undefined  -----  undefined
        null       -----   null  

数字类型(number)
不区分整型数值和浮点型数值;
所有数字都采用64位浮点格式存储，相当于Java和C语言中的double格式
能表示的最大值是±1.7976931348623157 x 10308
能表示的最小值是±5 x 10 -324 　
整数：
           在JavaScript中10进制的整数由数字的序列组成
           精确表达的范围是
-9007199254740992 (-253) 到 9007199254740992 (253)
           超出范围的整数，精确度将受影响
浮点数：
           使用小数点记录数据
           例如：3.4，5.6
           使用指数记录数据
           例如：4.3e23 = 4.3 x 1023

16进制和8进制数的表达:
           16进制数据前面加上0x，八进制前面加0;16进制数是由0-9,A-F等16个字符组成;8进制数由0-7等8个数字组成

           16进制和8进制与2进制的换算:

1
2
2进制: 1111 0011 1101 0100   <-----> 16进制:0xF3D4 <-----> 10进制:62420
2进制: 1 111 001 111 010 100 <-----> 8进制:0171724
2.3.2 字符串类型(string)

是由Unicode字符、数字、标点符号组成的序列；字符串常量首尾由单引号或双引号括起；JavaScript中没有字符类型；常用特殊字符在字符串中的表达；
字符串中部分特殊字符必须加上右划线\；常用的转义字符 \n:换行 \':单引号 \":双引号 \\:右划线

2.3.3 布尔类型(boolean)

Boolean类型仅有两个值：true和false，也代表1和0，实际运算中true=1,false=0
布尔值也可以看作on/off、yes/no、1/0对应true/false
Boolean值主要用于JavaScript的控制语句，例如：

if (x==1){
      y=y+1;
}else{
      y=y-1;
      }
2.3.4 Null & Undefined类型

Undefined类型

Undefined 类型只有一个值，即 undefined。当声明的变量未初始化时，该变量的默认值是 undefined。

当函数无明确返回值时，返回的也是值 "undefined";

Null类型

另一种只有一个值的类型是 Null，它只有一个专用值 null，即它的字面量。值 undefined 实际上是从值 null 派生来的，因此 ECMAScript 把它们定义为相等的。

尽管这两个值相等，但它们的含义不同。undefined 是声明了变量但未对其初始化时赋予该变量的值，null 则用于表示尚未存在的对象（在讨论 typeof 运算符时，简单地介绍过这一点）。如果函数或方法要返回的是对象，那么找不到该对象时，返回的通常是 null。

1 数组创建
创建方式1:
var arrname = [元素0,元素1,….];          // var arr=[1,2,3];

创建方式2:
var arrname = new Array(元素0,元素1,….); // var test=new Array(100,"a",true);

创建方式3:
var arrname = new Array(长度); 
            //  初始化数组对象:
                var cnweek=new Array(7);
                    cnweek[0]="星期日";
                    cnweek[1]="星期一";
                    ...
                    cnweek[6]="星期六";


#创建二维数组：
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";

#3.2.2 数组对象的属性和方法
x.join(bystr)       －－－－将数组元素拼接成字符串

                            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 = [1,2,3];
                  var b=a.concat(4,5) ;
                  alert(a.toString());  //返回结果为1,2,3            
                  alert(b.toString());  //返回结果为1,2,3,4,5
#数组排序-reverse sort：
//x.reverse()
//x.sort()

var arr1=[32, 12, 111, 444];
//var arr1=["a","d","f","c"];

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);
//如果就想按着数字比较呢?

function intSort(a,b){
    if (a>b){
        return 1;//-1
    }
    else if(a<b){
        return -1;//1
    }
    else {
        return 0
    }
}

arr.sort(intSort);

alert(arr);

function IntSort(a,b){
    return a-b;
}

#数组切片操作：
//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);

alert(a.toString());//a变为 [1,4,5,6,7,8]

a.splice(1,1);

alert(a.toString());//a变为[1,5,6,7,8]

a.splice(1,0,2,3);

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

#数组的push和pop：
//push pop这两个方法模拟的是一个栈操作

//x.push(value, ...)  压栈
//x.pop()             弹栈      
//使用注解
//
//x代表数组对象
//value可以为字符串、数字、数组等任何值
//push是将value值添加到数组x的结尾
//pop是将数组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"

#数组的shift和unshift：
//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"

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

Date对象
#创建Date对象
//方法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( ));//毫秒并不直接显示


#Date对象的方法—获取日期和时间
获取日期和时间
getDate()                 获取日
getDay ()                 获取星期
getMonth ()               获取月（0-11）
getFullYear ()            获取完整年份
getYear ()                获取年
getHours ()               获取小时
getMinutes ()             获取分钟
getSeconds ()             获取秒
getMilliseconds ()        获取毫秒
getTime ()                返回累计毫秒数(从1970/1/1午夜)

DOM对象
什么是HTML  DOM

    HTML  Document Object Model（文档对象模型）
    HTML DOM 定义了访问和操作HTML文档的标准方法
    HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构（节点树)
DOM树

节点类型
HTML 文档中的每个成分都是一个节点。

DOM 是这样规定的：
    整个文档是一个文档节点 
    每个 HTML 标签是一个元素节点 
    包含在 HTML 元素中的文本是文本节点 
    每一个 HTML 属性是一个属性节点

节点关系
节点树中的节点彼此拥有层级关系。
父(parent),子(child)和同胞(sibling)等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。

    在节点树中，顶端节点被称为根（root）
    每个节点都有父节点、除了根（它没有父节点）
    一个节点可拥有任意数量的子
    同胞是拥有相同父节点的节点

#节点查找
document.getElementById(“idname”)
document.getElementsByTagName(“tagname”)
document.getElementsByName(“name”)
document.getElementsByClassName(“name”)

#导航节点属性
parentElement           // 父节点标签元素

children                // 所有子标签

firstElementChild       // 第一个子标签元素

lastElementChild        // 最后一个子标签元素

nextElementtSibling     // 下一个兄弟标签元素

previousElementSibling  // 上一个兄弟标签元素

#节点操作
创建节点：

1
createElement(标签名) ：创建一个指定名称的元素。
例：var  tag=document.createElement(“input")
            tag.setAttribute('type','text');

添加节点：

1
2
3
4
5
追加一个子节点（作为最后的子节点）
somenode.appendChild(newnode)
 
把增加的节点放到某个节点的前边
somenode.insertBefore(newnode,某个节点);
删除节点：

1
removeChild()：获得要删除的元素，通过父元素调用删除
替换节点：

1
somenode.replaceChild(newnode, 某个节点);
节点属性操作：

1、获取文本节点的值：innerText    innerHTML

2、attribute操作

 elementNode.setAttribute(name,value)    

     elementNode.getAttribute(属性名)        <-------------->elementNode.属性名(DHTML)

     elementNode.removeAttribute(“属性名”);
3、value获取当前选中的value值
        1.input   
        2.select （selectedIndex）
        3.textarea  
4、innerHTML 给节点添加html代码：
        该方法不是w3c的标准，但是主流浏览器支持    
        tag.innerHTML = “<p>要显示内容</p>”;

5、关于class的操作：

1
2
3
elementNode.className
elementNode.classList.add
elementNode.classList.remove
 6、改变css样式：

1
2
3
<p id="p2">Hello world!</p>
document.getElementById("p2").style.color="blue";
                             .style.fontSize=48px

DOM Event(事件)
onclick        当用户点击某个对象时调用的事件句柄。
ondblclick     当用户双击某个对象时调用的事件句柄。

onfocus        元素获得焦点。               练习：输入框
onblur         元素失去焦点。               应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange       域的内容被改变。             应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动）

onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress     某个键盘按键被按下并松开。
onkeyup        某个键盘按键被松开。

onload         一张页面或一幅图像完成加载。

onmousedown    鼠标按钮被按下。
onmousemove    鼠标被移动。
onmouseout     鼠标从某元素移开。
onmouseover    鼠标移到某元素之上。
onmouseleave   鼠标从元素离开

onselect       文本被选中。
onsubmit       确认按钮被点击

绑定事件方式
<div id="div" onclick="foo(this)">点我呀</div>

<script>
    function foo(self){           // 形参不能是this;
        console.log("点你大爷!");
        console.log(self);   
    }
</script>

#方式2:
<p id="abc">试一试!</p>

<script>

    var ele=document.getElementById("abc");

    ele.onclick=function(){
        console.log("ok");
        console.log(this);    // this直接用
    };

</script>

#列表，添加全选，反选，取消三个功能
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        .left_menu{
            width: 20%;
            height: 500px;
            background-color: wheat;
            float: left;
        }
        .content_menu {
            width: 80%;
            height: 500px;
            background-color: black;
            float: left;
        }
        .title{
            text-align: center;
            background-color: blueviolet;
            line-height: 30px;
            color: aliceblue;
        }


        .item {
            margin: 20px;
        }
        .hide {
            display: none;
        }

    </style>
</head>
<body>

<div class="outer">
    <div class="left_menu">
        <div class="item">
            <div class="title">菜单一</div>
            <div class="con hide">
                <p>111</p>
                <p>111</p>
            </div>
        </div>

        <div class="item">
            <div class="title">菜单二</div>
            <div class="con hide">
                <p>222</p>
                <p>222</p>
            </div>
        </div>

         <div class="item">
            <div class="title">菜单三</div>
            <div class="con hide">
                <p>333</p>
                <p>333</p>
            </div>
         </div>
    </div>

    <div class="content_menu"></div>
</div>

<script>

    var eles=document.getElementsByClassName("title")
    for (var i=0;i<eles.length;i++){
        eles[i].onclick=function () {
            console.log(this);
            this.nextElementSibling.classList.remove("hide");

            var arr_item=this.parentElement.parentElement.children;

//            console.log(arr_item)
            var ele_curr_p=this.parentElement;
//            console.log(ele_curr_p)
            for (j=0;j<arr_item.length;j++){
//                console.log(arr_item[j].children[1])
//                console.log(arr_item)
//                console.log(ele_curr_p) #看显示的子进程（全部）
//                console.log(ele_curr_p[j])  #看显示的子进程（点中的指定进程）
                if (arr_item[j] != ele_curr_p) {
                    arr_item[j].children[1].classList.add("hide");
                }
            }

        }

    }
</script>
</body>
</html>

点开标题栏，其他的标题栏的数据合上
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        .left_menu{
            width: 20%;
            height: 500px;
            background-color: wheat;
            float: left;
        }
        .content_menu {
            width: 80%;
            height: 500px;
            background-color: black;
            float: left;
        }
        .title{
            text-align: center;
            background-color: blueviolet;
            line-height: 30px;
            color: aliceblue;
        }


        .item {
            margin: 20px;
        }
        .hide {
            display: none;
        }

    </style>
</head>
<body>

<div class="outer">
    <div class="left_menu">
        <div class="item">
            <div class="title">菜单一</div>
            <div class="con hide">
                <p>111</p>
                <p>111</p>
            </div>
        </div>

        <div class="item">
            <div class="title">菜单二</div>
            <div class="con hide">
                <p>222</p>
                <p>222</p>
            </div>
        </div>

         <div class="item">
            <div class="title">菜单三</div>
            <div class="con hide">
                <p>333</p>
                <p>333</p>
            </div>
         </div>
    </div>

    <div class="content_menu"></div>
</div>

<script>

    var eles=document.getElementsByClassName("title")
    for (var i=0;i<eles.length;i++){
        eles[i].onclick=function () {
            console.log(this);
            this.nextElementSibling.classList.remove("hide");

            var arr_item=this.parentElement.parentElement.children;

//            console.log(arr_item)
            var ele_curr_p=this.parentElement;
//            console.log(ele_curr_p)
            for (j=0;j<arr_item.length;j++){
//                console.log(arr_item[j].children[1])   #之所以children是1，是因为在没有1的情况下children会出现几个选择，0-2，这些选择是选择item还是title还是html，咱们要操作的是title，所以选择的是1
//                console.log(arr_item)
//                console.log(ele_curr_p) #看显示的子进程（全部）
//                console.log(ele_curr_p[j])  #看显示的子进程（点中的指定进程）
                if (arr_item[j] != ele_curr_p) {
                    arr_item[j].children[1].classList.add("hide");
                }
            }

        }

    }
</script>
</body>
</html>