JavaScript学习笔记

JavaScript

Web标准：

Web标准也称为网页标准，由一系列的标准组成，大部分由W3C负责制定。
三个组成部分：
- HTML:负责网页的基本结构(页面元素和内容)
- CSS:负责网页的表现效果(页面元素的外观、位置等页面样式)
- JavaScript：负责网页的行为(交互效果)

JavaScript:

JavaScript(简称:JS) 是一门跨平台、面向对象的脚本语言。是用来控制网页行为的，它能使网页可交互。
JavaScript和java是完全不同的语言，不论是概念还是设计。但基础语法类似。
JavaScript在1995年由Brendan Eich发明，并于1997年称为ECMA标准

JavaScript引入方式

内部脚本：将js代码定义在HTML页面中
- JavaScript代码必须位于标签之间
- 在HTML文档中，可以在任意地方，放置任意数量的

JS基础语法

书写语法

区分大小写：与Java一样，变量名、函数名以及其他一些东西都是区分大小写的
每行结尾的分号可有可无
注释
- 单行注释： //注释内容
- 多行注释： /*注释内容*/
大括号表示代码块
javascript 复制代码
```
//判断
if(count == 3){
    alert(count);
}
```

输出语句

使用window.alert()写入警告框
使用document.write()写入HTML输出

使用console.log()写入浏览器控制台

html 复制代码

<script>
    window.alert("Hello JavaScript");	//浏览器弹出警告框
    document.write("Hello JavaScript");	//写入HTML 在浏览器展示
    console.log("Hello JavaScript");	//写入浏览器控制台
</script>

变量

变量：

JavaScript中用var关键字(variable的缩写)来声明变量。
JavaScript是一门弱类型语言，变量可以存放不同类型的值
变量命名需要遵循如下规则：
- 组成字符可以是任何字母、数字、下划线、美元符号
- 数字不能开头
- 建议使用驼峰命名

ECMAScript 6 新增了let关键字来定义变量。它的用法类似于var，但是所声明的变量，只在let关键字所在的代码块内有效，且不允许重复声明

ECMAScript 6 新增了const关键字，用来声明一个只读的常量。一旦声明，常量的值就不能更改。

数据类型

JavaScript中分为原始数据类型和引用数据类型

number 数字
string 字符串，单双引用都可
boolean 布尔类型
null 对象为空
undefine 当声明的变量未初始化时，该变量的默认值是 undefind

使用typeof运算符可以获取数据类型。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js-数据类型</title>
</head>
<body>
    <script>
        //原始数据类型

        alerf(typeof 3);    //number
        alerf(typeof 3.14); //number
        alert(typeof "A");  //String
        alert(typeof false);    //boolean
        alert(typeof null);     //object

        var a ;
        alert(a);           //undefine
    </script>
</body>
</html>

运算符

运算符：

算术运算符：+,-,*,/,%,++,--
赋值运算符: =,+=,-=,*=,%=
比较运算符: >,<,<=,>=,!=,==
逻辑运算符: &&,||,!
三元运算符: 条件表达式? true_value:false_value

==会进行类型转换

===不会进行类型转换

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
   var a = 10;
		alert(a == "10");	//true
		alert(a === "10");	//false
		alert(a === 10);	//true
</script>
</body>
</html>

类型转换

字符串类型转换为数字
- 将字符串字面值转换为数字。如果字面值不是数字，则转换为NaN。
其他类型转换为boolean:
- Number: 0和NaN为false ,其他均转换为true
- String: 空字符串为false 其他均转换为true
- Null和undefined 均转换为false

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var age = 20;
        var _age = "20";
        var $age = 20;
        alert(age == _age); //true
        alert(age === _age);    //false
        alert(age === $age);    //true


        // 类型转换- 其他类型转换为数字
        alert(parseInt("12"));  //12
        alert(parseInt("12A45"));   //12
        alert(parseInt("A45")); //NaN   (Not a Number)

        // 类型转换- 其他类型转换为boolean
        if(0){//false
            alert("0转换为false");
        }

        if(NaN){
            //false
            alert("NaN转化为false");
        }

        if(1){
            //true
            alert("除了0和NaN其他数字都转换为true");
        }

        if(""){
            //false
            alert("空字符串为false 其他都是true");
        }

        if(null){
            //false
            alert("null 转换为 false");
        }

        if(undefined){
            //false
            alert("undefined 转化为 false");
        }
    </script>
</body>
</html>

流程控制语句

流程控制语句:

if...else
switch
for
while
do...while

函数

函数：

介绍：函数(方法)是被设计为执行特定任务的代码块

定义： JavaScript函数通过function关键字进行定义，语法为：

javascript 复制代码

function funtionName(参数 1, 参数 2){
    //要执行的代码
}
//定义方式一
function add(a,b){
    reutrn a+b;
}

var result = add(10,20);

//定义方式二
var functionName = function(参数1，参数2){
    //执行的代码
}

javascript 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js-函数</title>
</head>
<body>
    <script>
        //定义函数方式之一
        function add(a,b){
            return a+b;
        }

        //函数调用
        var result = add(10,20);
        alert(result);
    </script>
    <script>
        //定义函数方式之二
        var add = function(a,b){
            return a+b;
        }
        alert(add(10,20));
    </script>
</body>
</html>

注意
- 形式参数不需要类型。因为JavaScript是弱类型语言
- 返回值也不需要定义类型，可以在函数内部直接使用return返回即可
调用：函数名称(实际参数列表)

JS函数调用可以传输任意个数的参数

对象

Array数组

JavaScript中Array对象用于定义数组

定义

javascript 复制代码

var 变量名 = new Array(元素列表);	//方式一
var arr = new Array(1,2,3,4);

javascript 复制代码

var 变量名 = [元素列表];		//方式二
var arr =[1,2,3,4];

访问
javascript 复制代码
```
arr[索引] = 值;
arr[10] = "hello";
```

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-对象</title>
</head>
<body>
    <script>
        //定义数组一
        var arr = new Array(1,2,3,4);

        console.log(arr[0]);
        console.log(arr[1]);

        //特点 长度可变 类型可变
        var arr = [1,2,3,4];
        arr[10] = 50;

        alert(arr[9]);      //undefined
        alert(arr[8]);      //undefined
        alert(arr[7]);      //undefined
        alert(arr[6]);      //undefined
    </script>
</body>
</html>

JavaScript中数组相当于Java中的集合，数组的长度是可变的，而JavaScript是弱类型，所以可以存储任意类型的数据

属性

属性描述

length 设置或返回数组中元素的数量。

属性	描述
length	设置或返回数组中元素的数量。

方法

方法	描述
forEach()	遍历数组中的每个有值的元素，并调用一次传入的函数
push()	将新元素添加到数组的末尾，并返回新的长度
splice()	从数组中删除元素

String

String字符串对象创建方式有两种

javascript 复制代码

var 变量名 = new String("")	//方式一
var str = new String("Hello String");

var 变量名 = "";			//方式二
var str = "Hello String";
var str = "Hello String";

属性

length 字符串的长度
方法

charAt() 返回指定位置的字符

indexOf() 检索字符串

trim() 去除字符串两边的空格

substring() 提取字符串中两个指定的元素的索引号之间的字符

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-对象</title>
</head>
<body>
    <script>
        //创建字符串对象
        var str = "Hello String";
        console.log(str);


        console.log(str.length);

        //charAt
        console.log(str.charAt(3));
        //indexOf
        console.log(str.indexOf("lo"));
        //trim
        var s = str.trim();
        console.log(s);
        //substring(start,end)  ---开始索引，结束索引
        console.log(s.substring(0,5));
    </script>
</body>
</html>

JSON

JavaScript自定义对象：

定义格式

javascript 复制代码

var 对象名 = {
    属性名1:属性值1,
    属性名2:属性值2,
    
    
    函数名称:function(形参列表){  }
}

var user = {
    name:"TOM",
    age:20,
    gender:"male",
    eat:function(){
        alert("eat");
    }
};

调用格式

javascript 复制代码

对象名.属性名;		console.log(user.name);
对象名.函数名()		user.eat();

JSON：

概念：JavaScript Object Notation，JavaScript对象标记法
JSON是通过JavaScript对象标记法书写的文本
由于语法简单，层次鲜明，现多用于作为数据载体，在网络进行数据传输。
javascript 复制代码
```
{
    "name":"TOM",
    "age":20,
    "gender":"male",
                
};
```

定义：

javascript 复制代码

var 变量名 = '{"key1":value1,"key2":value2,"key3":value3}';
var userStr = '{"name":"jerry","age":18,"addr":["北京","上海"]}'

将JSON字符串转换为JS对象
javascript 复制代码
```
var jsObject = JSON.parse(userStr);
```
将JS对象转换为JSON字符串
javascript 复制代码
```
var jsonStr = JSON.stringify(jsObject);
```

BOM

概念：Browser Object Model 浏览器对象模型，允许JavaScript与浏览器对话，JavaScript将浏览器的各个组成部分封装为对象。
组成：
- Window：浏览器窗口对象
- Navigator:浏览器对象
- Screen：屏幕对象
- History：历史记录对象
- Location:地址栏对象
Window：
- 介绍:浏览器窗口对象
- 获取：直接使用window，其中window.可以省略。
  
  window.alert("hello window") alert("hello")
- 属性：
  - history:对History对象的只读引用
  - location:用于窗口或框架的Locationd对象。
  - navigator:对Navigator对象的只读引用。
- 方法：
  - alert() 显示带有一段消息和一个确认按钮的警告框。
  - confirm() 显示带有一段消息及确认按钮、取消按钮的对话框。
  - setlnerval() 按照指定的周期来调用函数或计算表达式。
  - setTimeout() 在指定的毫秒数后调用函数或计算表达式。
Location：
- 介绍：地址栏对象
- 获取：使用window.location()获取，其中window.可以省略。
  javascript 复制代码
```
window.location.属性;
location.属性
```
- 属性：
  - href:设置或返回完整的URL

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js-对象-BOM</title>
</head>
<body>
    <script>
        //获取
        window.alert("Hello BOM");
        //方法
        //confrim-对话框
        var flag = confirm("确认取消吗?");
        alert(flag);


        //定时器-setInterval -- 周期性的执行某个函数
        var i = 0;
        setInterval(function(){
            i++;
            console.log("定时器执行了"+i+"次")
        },2000);

        //定时器-setTimeout --  延迟指定时间执行依次

        setTimeout(function(){
            alert("JS");
        },3000);

        //location
        alert(location.href);
        location.href = "https://www.baidu.com";
    </script>
</body>
</html>

DOM

概念:Document Object Model,文档对象模型
将标记语言的各个组成部分封装为对应对象：
- Document 整个文档对象
- Element 元素对象
- Attribute 属性对象
- Text 文本对象
- Comment 注释对象
JavaScript 通过 DOM ，就能够对HTML进行操作：
- 改变HTML元素的内容
- 改变HTML元素的样式(CSS)
- 对HTML DOM 事件做出反应
- 添加和删除 HTML 元素

DOM时W3C的标准，定义了访问HTML和XML文档的标准，分为了3个不同部分：

Core DOM - 所有文档类型的标准模型
- Document 整个对象
- Element 元素对象
- Attribute 属性对象
- Text 文本对象
- Comment 注释对象
XML DOM - XML 文档的标准模型
HTML DOM - HTML 文档的标准模型
- Image ：
- Button:

HTML 中的 Element 对象可以通过Document对象获取，而Document对象是通过window对象获取的

Document 对象提供了以下获取Element元素对象的函数：

根据id属性获取，返回单个Element对象
javascript 复制代码
```
var h1 = document.getElementById('h1');
```
根据标签名称获取，返回Element对象数组
javascript 复制代码
```
var divs = document.getElementByTagName('div');
```
根据name属性值获取，返回Element对象数组
javascript 复制代码
```
var hobbys = document.getElementsByName('hobby');
```
根据class属性值获取，返回Element对象数组
javascript 复制代码
```
var clss = document.getElementByClassName('cls');
```

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="img/huawei.jpg" id = "h1"> <br><br>
    
    <div class="cls">传智教育</div> <br>
    <div class="cls">黑马程序员</div> <br>

    <input type="checkbox" name="hobby"> 电影
    <input type="checkbox" name="hobby"> 旅游
    <input type="checkbox" name="hobby"> 游戏

    <script>
        //获取Element元素
        // 获取元素 -根据id获取
        var img = document.getElementById('h1');
        alert(img);

        //获取元素 -根据标签获取 -div
        var divs = document.getElementsByTagName('div');
        for (let i = 0; i < divs.length; i++) {
            alert(divs[i]);
       }

       //获取元素-根据name属性值获取
       var ins = document.getElementsByName('hobby');
       for (let ins = 0; ins < ins.length; ins++) {
        alert(ins[i]);
       }

       //获取元素-根据class属性值获取
       var divs = document.getElementsByClassName('cls');
       for (let i = 0; i < divs.length; i++) {
        alert(divs[i]);
       }
    </script>
</body>
</html>

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM案例</title>
</head>
<body>
    <img id="h1" src="img/off.gif" > <br><br>

    <div class="cls">传智教育</div> <br>
    <div class="cls">黑马程序员</div> <br>

    <input type="checkbox" name="hobby"> 电影
    <input type="checkbox" name="hobby"> 旅游
    <input type="checkbox" name="hobby"> 游戏
  </body>
  <script>
    //点亮灯泡：改变src属性值
    var img = document.getElementById('h1');
    img.src = "img//on.gif"

    //将所有div标签的后面加上 very good红色字体
    var divs = document.getElementsByClassName("cls");
    for (let i = 0; i < divs.length; i++) {
        const div = divs[i];
        div.innerHTML += "very good";
    }

    //将所有的复选框呈现选中的状态
    var ins = document.getElementsByName("hobby");
    for (let i = 0; i < ins.length; i++) {
        const check = ins[i];
        check.checked = true;     //选中状态
    }
  </script>
</html>

事件监听

事件：HTML事件是发生在HTML元素上的事情，例如：
- 按钮被点击
- 鼠标移动到元素上
- 按下键盘案件
事件监听：JavaScript可以在事件被检测时执行代码。

事件绑定

方式一：通过HTML标签中的事情属性进行绑定
方式二：通过DOM元素实行绑定

常见事件

事件名	说明
onclick	鼠标单击事件
obblur	元素失去焦点
onfocus	元素获得焦点
onload	某个页面或图像被完成加载
onsubmit	当表单提交时触发该事件
onkeydown	某个键盘的键被按下
onmouseover	鼠标被移动到某元素之上
onmouseout	鼠标

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js-常见事件</title>
</head>
<body>
    <form action="" style="text-align: center;" onsubmit="subfn()">
        <input type="text" name="username" onblur="ffn()" onkeydown="kfn()">
        <input type="submit" value="提交" id="b1">
        <input type="button" value="单击事件" id="b1" onclick="fn1()">
    </form>

    <br>
    <br>
    <br>
    
    <table width="800px" border="1" cellspacing="0" align="center" onmouseover="over()" onmouseout="out()">
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>分数</th>
            <th>评语</th>
        </tr>
        <tr align="center">
            <td>001</td>
            <td>张三</td>
            <td>90</td>
            <td>很优秀</td>
        </tr>
        <tr align="center">
            <td>002</td>
            <td>李四</td>
            <td>92</td>
            <td>优秀</td>
        </tr>
    </table>
</body>
<script>
    //onload 页面/元素加载完成后触发
    function load(){
        console.log("页面加载完成");
    }

    //onclick 鼠标单击事件
    function fn1(){
        console.log("被点击");
    }

    //onblur 失去焦点事件
    function bfn(){
        console.log("失去焦点");
    }

    //onfocus	//获得焦点
    function ffn(){
        console.log("获得焦点");
    }

    //onkeydown 某个键盘的按键被按下
    function kfn(){
        console.log("键盘被按下了");
    }

    //onmouseover 鼠标移动到元素之上    
    function over(){
        console.log("鼠标移入");
    }

    //onmouseout 鼠标移出某元素
    function out(){
        console.log("鼠标移出");
    }

    //onsubmit 提交表单事件

    function subfn(){
        console.log("表单被提交了");
    }
</script>
</html>

案例

通过事件监听及DOM操作，完成如下操作

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>js-事件-案例</title>
</head>
<body>
   <img src="./HTML/img/off.gif" id="light"><br>

   <input type="button" value="点亮" onclick="light()">
   <input type="button" value="熄灭" onclick="extinguish()">
   <br><br>
   
   <input type="text"  id="name" value="ITCAST" onblur="upper()" onfocus="lower()">
   <br><br>

   <input type="checkbox" name="hobby" > 电影
   <input type="checkbox" name="hobby" > 旅游
   <input type="checkbox" name="hobby" > 游戏

   <input type="button" value="全选" onclick="selectAll()">
   <input type="button" value="反选" onclick="selectInvert()">
</body>

<script>
   //点亮
   function light(){
       img = document.getElementById("light");
       img.src="./HTML/img/on.gif";
   }

   //熄灭
   function extinguish(){
       img = document.getElementById("light");
       img.src = "./HTML/img/off.gif";
   }

   //全选
   function selectAll(){
       divs = document.getElementsByName("hobby");
       for (let index = 0; index < divs.length; index++) {
           const element = divs[index];
           element.checked = true;
       }
   }
   //反选
   function selectInvert(){s
       divs = document.getElementsByName("hobby");
       for (let index = 0; index < divs.length; index++) {
           const element = divs[index];
           element.checked = false;
       }
   }
   //聚焦
   function lower(){   //小写
       //获取输入框元素对象
       var input = document.getElementById("name");
       input.value = input.value.toLowerCase();
   }
   //失去焦点
   function upper(){   //大写
       var input = document.getElementById("name");
       input.value = input.value.toUpperCase();
   }
</script>
</html>