python第三十天（js）

在html中引入js代码

{#1 直接编写#}
    <script>
        alert('hello')    //alert弹出一个小的提示框
    </script>
{#2 导入文件#}
    <script src="hello.js"></script>　　

数据类型

基本数据类型：

数字类型(Number)：包括整型和浮点型
字符串(String)
Boolean
Null：空类型
Undefined：Undefined 类型只有一个值，即 undefined。当声明的变量未初始化时，该变量的默认值是 undefined。当函数无明确返回值时，返回的也是值 “undefined”;

引用数据类型：

object

数据类型转换：

JavaScript属于松散类型的程序语言
变量在声明的时候并不需要指定数据类型
变量只有在赋值的时候才会确定数据类型
表达式中包含不同类型数据则在计算过程中会强制进行类别转换

数字 + 字符串：数字转换为字符串
数字 + 布尔值：true转换为1，false转换为0
字符串 + 布尔值：布尔值转换为字符串true或false

函数parseInt： 强制转换成整数 例如parseInt(“6.12”)=6 ; parseInt(“12a")=12 ; parseInt(“a12")=NaN ;parseInt(“1a2")=1

函数parseFloat： 强制转换成浮点数 parseFloat(“6.12”)=6.12

函数eval： 将字符串强制转换为表达式并返回结果 eval(“1+1”)=2 ; eval(“1<2”)=true

函数typeof ：查询数值当前类型(string / number / boolean / object )

等性预算符

执行类型转换的规则如下：
如果一个运算数是 Boolean 值，在检查相等性之前，把它转换成数字值。false 转换成 0，true 为 1。
如果一个运算数是字符串，另一个是数字，在检查相等性之前，要尝试把字符串转换成数字。
如果一个运算数是对象，另一个是字符串，在检查相等性之前，要尝试把对象转换成字符串。
如果一个运算数是对象，另一个是数字，在检查相等性之前，要尝试把对象转换成数字。
在比较时，该运算符还遵守下列规则：

值 null 和 undefined 相等。
在检查相等性时，不能把 null 和 undefined 转换成其他值。
如果某个运算数是 NaN，等号将返回 false，非等号将返回 true。
如果两个运算数都是对象，那么比较的是它们的引用值。如果两个运算数指向同一对象，那么等号返回 true，否则两个运算数不等。

异常处理

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

注：主动抛出异常 throw Error(‘xxxx’)

数组对象

数组排序默认是按照最高位排的

<script>
    console.log([123,2,12,1].sort().toString()) //console.log是在控制台输出
    //结果为1，12，1233，2

</script>

修改为按照大小排，需要自定义一个函数

<script>
    function f(a,b) {
        if (a>b){
            return 1
        }else if(a<b){
            return  -1
        }else {
            return 0
        }
    }
    console.log([123,2,12,1].sort(f).toString())

</script>

其他方法和python列表类似。

函数对象

arguments是函数实际接收到的参数（实参）的整合数组

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)

//     ------------------arguments的用处2 ------------------

    function f(a,b,c){
        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)

Function 对象的 length 属性

如前所述，函数属于引用类型，所以它们也有属性和方法。

比如，函数对象的length属性是期望参数个数（形参个数）

BOM对象

BOM（浏览器对象模型），可以对浏览器窗口进行访问和操作。使用 BOM，开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。

使 JavaScript 有能力与浏览器“对话”。

window对象

window对象：
所有浏览器都支持 window 对象。
概念上讲.一个html文档对应一个window对象.
功能上讲: 控制浏览器窗口的.
使用上讲: window对象不需要创建对象,直接使用即可.

window的方法：

alert() 显示带有一段消息和一个确认按钮的警告框。无返回值
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。点击确认按钮返回true，点击取消按钮返回false。
prompt() 显示可提示用户输入的对话框。返回用户输入的内容，没有输入返回null

pen() 打开一个新的浏览器窗口或查找一个已命名的窗口。
close() 关闭浏览器窗口。
setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。 两个参数，一个是函数，一个是时间
clearInterval() 取消由 setInterval() 设置的 timeout。
setTimeout() 在指定的毫秒数后调用函数或计算表达式。
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
scrollTo() 把内容滚动到指定的坐标。

DOM对象

DOM 是 W3C（万维网联盟）的标准。DOM 定义了访问 HTML 和 XML 文档的标准：

“W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”

W3C DOM 标准被分为 3 个不同的部分：

核心 DOM - 针对任何结构化文档的标准模型
XML DOM - 针对 XML 文档的标准模型
HTML DOM - 针对 HTML 文档的标准模型

什么是 XML DOM？ －－－－>XML DOM 定义了所有 XML 元素的对象和属性，以及访问它们的方法。
什么是 HTML DOM？－－－－>HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。

1、dom节点

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点(NODE)：

整个文档是一个文档节点(document对象)
每个 HTML 元素是元素节点(element 对象)
HTML 元素内的文本是文本节点(text对象)
每个 HTML 属性是属性节点(attribute对象)
注释是注释节点(comment对象)

节点(自身)属性:
attributes - 节点（元素）的属性节点
nodeType – 节点类型
nodeValue – 节点值 ，重要！！！！！！
nodeName – 节点名称
innerHTML - 节点（元素）的文本值，重要！！！！！

推荐使用的导航属性:
parentElement - 父节点标签元素
children - 所有子标签 ，类似于数组的集合
firstElementChild - 第一个子标签元
lastElementChild - 最后一个子标签元素
nextElementtSibling - 下一个兄弟标签元素
previousElementSibling - 上一个兄弟标签元素

访问 HTML 元素（节点）,访问 HTML 元素等同于访问节点,我们能够以不同的方式来访问 HTML 元素：

页面查找：
通过使用 Document.getElementById() 方法
通过使用 Document.getElementsByTagName() 方法
通过使用 Document.getElementsByClassName() 方法
通过使用 Document.getElementsByName() 方法

2、事件

请查看HTML 事件属性
事件绑定的两种方法：

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

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


    ele.onclick=function(){
        alert("hi");  //推荐使用这一种
    };    

</script>









<div id="abc" onclick="func1(this)">事件绑定方式1</div> //this是当前的标签对象
<div id="id123">事件绑定方式2</div>
<script>
    function func1(self){       //形参名除了this，什么都可以
        console.log(self.id)
    }

    //这种方式this参数和形参必须填写;

//------------------------------------------
    var ele=document.getElementById("id123").onclick=function(){
         console.log(this.id);    //this是当前的标签对象
        // 这种方式不需要形参;
    }
    
</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){   //event是一个Event对象，Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
        alert('222');
        event.stopPropagation(); //阻止事件向外层div传播.  如果不加点击内层的div会触发两个事件
    }
    
</script>

元素的增删改查

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>

    <button onclick="add()">add</button>
    <button onclick="remove()">remove</button>
    <button id="button_change">change</button>
    <div>div</div>

</body>
<script>

    function add() {
        var p1=document.getElementsByTagName("div")[0];
        var    ele=document.createElement("p");
        ele.innerHTML='pppppp';
        p1.appendChild(ele)  增，先找到父元素
    }

    function remove() {
        var father=document.getElementsByTagName('div')[0];
        father.removeChild(father.firstElementChild);删，先找到父元素

    }
    document.getElementById('button_change').onclick=function () {
        var father=document.getElementsByTagName('div')[0];
        var firstSon=father.firstElementChild;
        var ele=document.createElement('h1');
        ele.innerHTML='hhhhhhhhh';
        father.replaceChild(ele,firstSon);改，先找到父元素
    }

</script>
</html>

修改css样式

<p id="p2">Hello world!</p>
document.getElementById("p2").style.color="blue"

关于class的操作

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