JavaScript

JavaScript

2、快速入门

2.1、引入JavaScript

内部引入

    <!--script标签内，写JS代码-->
    <script>
        alert("hello,world!");
    </script>

外部引入

<!--    外部引入-->
<!--    注意：script标签必须成对出现-->
    <script src="js/qj.js"></script>

2.2、基本语法入门

<!--JS严格区分大小写-->
    <script>
        //1.定义变量   变量类型  变量名 = 变量值;
        var num = 65;
        //var name = "zhaotong";
        //alert(num);
        //console.log(num) 在浏览器的控制台打印变量！

        //2.条件控制
        if (num>60 && num<70){
            alert("60-70");
        }else if (num>70 && num<80){
            alert("70-80")
        }else {
            alert("other");
        }
    </script>

2.3、数据类型

数值，文本，图形，音频 , 视频……

number

js不区分小数和整数，Number

123//整数123
123.1//浮点数 123.1
1.123e3 // 科学计算法
-77 //负数
NaN  //not a number
Infinity //表示无限大

字符串

“abd” ‘abc’

布尔值

true，false

逻辑运算

&&  //两个都为真，结果为真
||  //一个为真，结果为真
!   // 真及假，假及真

比较运算符

=
==  等于(类型不一样，值一样，也会判断为true)
=== 绝对等于(类型一样，值一样，结果true)

这是一个JS的缺陷，坚持不要使用==比较

须知:

• NaN===NaN，这个与所有的数值都不相等，包括自己
• 只能通过isNaN(NaN)来判断这个数是否是NaN

浮点数问题：

console.log((1/3) === (1-2/3))

尽量避免使用浮点数进行运算，存在精度问题!

Math.abs(1/3-(1-2/3))<0.000000001

null 和 undefined

• null：空
• undefined：未定义

数组

Java的数组必须是相同类型的对象~，JS中不需要这样!

//尽量使用[]
var arr = [1,2,3,"hello",null,true];

new Array(1,2,3,"hello",null,true);

对象

对象是大括号，数组是中括号

每个属性之间使用逗号隔开，最后一个不需要添加

var person = {
    name: "zhao",
    age: 3,
    tage: ["js","java"]
}

2.4、严格检查格式

//'use strict'; 严格检查模式，预防JavaScript 的随意性导致产生的一些问题,必须写在第一行
        //局部变量建议使用let 去定义
	'use strict';
     let i=1;

3、数据类型

3.1、字符串

1、正常字符串我们使用单引号，或者双引号包裹

2、注意转义字符 \

3、多行字符串编写

var msg = `hello
world
你好呀
nihao`;

4、模板字符串

let name = "zhao";
let age = 3;

let msg =`你好，${name}`;

5、字符串长度

str.length

6、字符串的可变性，不可变

7、大小写转换

//是方法
str.toUpperCase()
str.toLowerCase()

8、str.indexOf(“h”)

9、substring

str.substring(1)//从第一个字符截取到最后一个字符串
str.substring(1,3)//[1,3)

3.2、数组

Array可以包含任意的数据类型

var arr = [1,2,3,5];
arr[0]
arr[0] = 1;

1、长度

arr.length

注意:加入给arr.length赋值,数组大小就会发生变化~,如果赋值过小,元素就会丢失

2、indexOf，通过元素获取下标索引

arr.indexOf(2) 1

字符串的"1"和数字1是不同的

3、slice 截取Array的一部分,返回-一个新数组，类似于String中的substring
4、push(),pop() 尾部

push: 压入到尾部
pop：弹出尾部的一个元素

5、unshift(),shift() 头部

unshift: 压入到头部
shift：弹出头部的一个元素

6、排序 sort()

["B","C","A"]
arr.sort()
["A","B","C"]

7、元素反转 reverse（）

["A","B","C"]
arr. reverse()
["C","B","A"]

8、concat()

["C","B","A"]
arr.concat([1,2,3])
["C","B","A",1,2,3]
arr
["C","B","A"]

注意：concat() 并没有修改数组，只是会返回一个新的数组

9、连接符 join

["C","B","A"]
arr.join("-")
"C-B-A"

10、多维数组

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

3.3、对象

若干个键值对

var 对象名 = {
    属性名: 属性值，
    属性名: 属性值，
    属性名: 属性值，
    属性名: 属性值
}

var person ={
    name: "zhao",
    age: 3,
    email: "2020@qq.com",
    score: 0
}

Js中对象，… 表示一个对象，键值对描述属性 XXXx: xxxx， 多个属性之间使用逗号隔开，最后一个属性不加逗号!

JavaScript中的所有的键都是字符串，值是任意对象

1、对象赋值

person.name = "zhao"
"zhao"
person.name
"zhao"

2、使用一个不存在的对象属性，不会报错! undefined
3、动态的删减属性,通过delete删除对象的属性

delete person.name
true
person

4、动态的添加

person.sex="男"
"男"
person

5、判断属性值是否在这个对象中! xXx in xxx!

'age' in person
true
//继承
'toString' in person
true

6、判断一个属性是否是这个对象自身拥有的hasOwnProperty（）

person.hasOwnProperty('toString')
false
person.hasOwnProperty('age')
true

3.4、流程控制

forEach循环

var age = [12,2,4,5,6,7]

age.forEach(function (value){
    console.log(value)
})

for……in

//for(var index in object){}
for(var num in age){
    console.log(age[num])
}

3.5、Map 和 Set

4、函数

4.1、定义函数

定义方式一

function abs(x){
    if(x >= 0){
        return x;
    }else{
        return -x;
    }
}

一旦执行到return 代表函数结束，返回结果！

如果没有执行return ,函数执行完也会返回结果，结果就是undefined

定义方式二

var abs = function(x){
    if(x >= 0){
        return x;
    }else{
        return -x;
    }
}

function(x){ … }这是一个匿名函数。 但是可以把结果赋值给abs，通过abs就可以调用函数！

参数问题: javaScript 可以传任意个参数,也可以不传递参数~

参数进来是否存在的问题？

假设不存在参数，如果规避?

var abs = function(x){
    //手动抛出异常来判断
    if(typeof x!== 'number'){
        throw 'Not a Number';
    }
    if(x >= 0){
        return x;
    }else{
        return -x;
    }
}

arguments

是一个JS免费赠送的关键字;代表，传递进来的所有的参数,是一一个数组!

var abs = function(x){
    console.log("x=>"+x);
    
    for(var i=0;i<arguments.length;i++){
        console.log(arguments[i]);
    }
    
   
    if(x >= 0){
        return x;
    }else{
        return -x;
    }
}

问题: arguments 包含所有的参数,我们有时候想使用多余的参数来进行附加操作。需要排除已有参数·

rest

ES6引入的新特性,获取除了已经定义的参数之外的所有参数~ …

function aaa(a,b,...rest){
    console.log("a=>"+a);
    console.log("b=>"+b);
    console.log(rest);
  
}

rest参数只能写在最后面，必须用...标识。

4.2、变量的作用域

在javascript中，var 定义变量实际是有作用域的。

假设在函数体中声明，则在函数体外不可以使用~ (非要想实现的话， 后面可以研究一下闭包)

如果两个函数使用了相同的变量名,只要在函数内部，就不冲突

内部函数可以访问外部函数的成员，反之则不行

假设，内部函数变量和外部函数的变量，重名!

假设在JavaScript中函数查找变量从自身函数开始~，由 “内" 向 “外" 查找.假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量。

提升变量的作用域

这个是在JavaScript建立之初就存在的特性。养成规范:所有的变量定义 都放在函数的头部,不要乱放，便于代码维护;

全局变量

4.3、方法

定义方法

方法就是把函数放在对象的里面，对象只有两个东西:属性和方法

this.代表什么?

再Java中，this是无法指向的，是默认指向调用它的那个对象;

apply

再js中可以控制 this 指向

5、内部对象

标准对象

typeof 25      "number"
typeof 'zzz'   "string"
typeof true    "boolean"
typeof NaN     "number"
typeof undefined  "undefined"
typeof []      "object"
typeof {}      "object"
typeof Math.abs "function"

5.1、Date

基本使

var now = new Date(); //Fri May 28 2021 10:57:19 GMT+0800 (中国标准时间)
now.getFullYear(); //年
now.getMonth();    //月  0~11 代表月
now.getDate();     //日
now.getDay();      //星期几
now.getHours();    //时
now.getMinutes();  //分
now.getSeconds();  //秒

now.getTime();     //时间戳  1970 1.1 0：00：00

console.log(new Date(1622170639472));// 时间戳转换为时间

转换

now.toLocaleString //注意调用的是一个方法，不是属性
function toLocaleString()
now.toLocaleString();
"2021/5/28 上午10:57:19"
now.toGMTString()
"Fri, 28 May 2021 02:57:19 GMT"

5.2、JSON

JSON是什么？

早期，所有数据传输习惯使用XML文件!

• JSONlavaScript Object Notation, JS对象简谱)是一种轻量级的数据交换格式。
• 易于人阅读和编写,同时也易于机器解析和生成，并有效地提升网络传输效率。

在JavaScript一切皆为对象、 任何js支持的类型都可以用SON来表示，

格式：

• 对象都用{}
• 数组都用[]
• 所有的键值对 都是用 key:value

JSON字符串 和 JS 对象的转换

var user = {
    name: "zhao",
    age: 20,
    sex: "男"
};
 
//对象转化为json字符串  {"name":"zhao","age":20,"sex":"男"}
var jsonUser = JSON.stringify(user);
//json字符串转换为 对象
var obj = JSON.parse('{"name":"zhao","age":20,"sex":"男"}');

JSON 和 js对象的区别

var obj = {a: 'hello',b: 'hellob'};
var json = '{"a":"hello","b":"hellob"}';

6、面向对象编程

2.继承

7、操作BOM对象（重点）

浏览器介绍

JavaScript和浏览器关系?

JavaScript诞生就是为了能够让他在浏览器中运行!

BOM :浏览器对象模型

• IE 6~11
• Chrome
• Safari
• FireFox

三方

• QQ浏览器
• 360浏览器

window(重要)

window 代表 浏览器窗口

window.alert("kkkk")
undefined
window.outerHeight
780
window.outerWidth
620
window.innerHeight
310
window.innerWidth
609

Navigator

navigator.appName
"Netscape"
navigator.appVersion
"5.0 (Windows)"
navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:88.0) Gecko/20100101 Firefox/88.0"
navigator.platform
"Win32"

大多数时候，我们不会使用navigator对象, 因为会被人为修改!

不建议使用这些属性来判断和编写代码

screen

代表屏幕尺寸

location(重要)

location代表当前页面的URL信息

host: "www.baidu.com"
href: "https://www.baidu.com/"
protocol: "https:"
location.reload() //刷新页面
//设置新的地址
location.assign("https://uland.taobao.com/")

document

document代表当前的页面，HTML DOM文档树

document.title
"百度一下，你就知道"
document.title="zhao"
"zhao"

获取cookie

document.cookie

8、操作DOM对象（重点）

核心

浏览器网页就是一个Dom树形结构!

• 更新:更新Dom节点
• 遍历dom节点:得到Dom节点
• 删除:删除一个Dom节点
• 添加:添加一个新的节点

要操作一个Dom节点， 就必须要先获得这个Dom节点

获取dom节点

var h1 = document.getElementsByTagName("h1");
var p1 = document.getElementById("p1");
var p2 = document.getElementsByClassName("p2");

var father = document.getElementById("fat");
var childrens = father.children;//获取父节点下面的子节点
//father.firstChild
//father.lastChild

更新节点

操作文本

• id1.innerText='258'修改文本的值
• id1.innerHTML='<strong>123</strong>'可以解析HTML文本标签

操作CSS

id1.style.color = 'yellow';
id1.style.fontSize = '30px';
id1.style.padding = '2em';

删除节点

插入节点

9、操作表单（验证）

表单是什么 form DOM树

• 文本框 text
• 下拉框
• 单选框 radio
• 多选框 checkbox
• 隐藏域 hidden
• 密码框 password
• ……

<form action="post">
    <p>
        <span>用户名：</span><input type="text" id="username">
    </p>

<!--    多选框-->
    <p>
        <span>性别</span>
        <input type="radio" name="sex" value="man" id="boy">男
        <input type="radio" name="sex" value="women" id="girl">女
    </p>
</form>

<script>
    var id = document.getElementById('username');
    var id2 = document.getElementById('boy');
    var id3 = document.getElementById('girl');



    id.value;//得到输入框的值
    id.value = '年后';//修改输入框的值


    //对于单选框，多选框等等固定的值，boy_ radio. value只能取到当前的值
    id2.checked;//查看返回的结果，是否为true，如果为true，则被选中

</script>

提交数据，md5加密密码

引入MD5

<!--MD5工具类-->
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>

form action="https://www.baidu.com/" method="post">
    <p>
        <span>用户名：</span> <input type="text" id="username" name="username">
    </p>

    <p>
        <span>密码：</span> <input type="password" id="password" name="password">
    </p>

    <!--绑定事件 onclick 被点击-->
    <button type="submit" onclick="look()">提交</button>
</form>

<script>
    function look() {
        var uname = document.getElementById('username');
        var pwd = document.getElementById('password');
        console.log(uname.value);
        //MD5算法
        pwd.value = md5(pwd);
        console.log(pwd.value);
    }
</script>

提交数据，md5加密密码,优化表单

<!--表单绑定提交事件
οnsubmit= 绑定一个提交检测的函数 ，true false
将这个结果返回给表单，使用onsubmit 接受-->
<form action="https://www.baidu.com/" method="post" onsubmit="return look()">
    <p>
        <span>用户名：</span> <input type="text" id="username" name="username">
    </p>

    <p>
        <span>密码：</span> <input type="password" id="input_password">
    </p>

    <input type="hidden" id="md5_password" name="password">

    <!--绑定事件 onclick 被点击-->
    <button type="submit">提交</button>
</form>

<script>
    function look() {
        var uname = document.getElementById('username');
        var pwd = document.getElementById('input_password');
        var md5pwd = document.getElementById('md5_password');
        md5pwd.value = md5(pwd.value);
        //可以判断
        return true;
    }
</script>

10、JQuery

JavaScript

JQuery库，里面存在大量的JavaScript

获取JQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--cdn引入-->
    <script src="https://lib.baomitu.com/jquery/3.6.0/jquery.js"></script>
</head>
<body>

</body>
</html>

公式：$(selector).action()

<a href="" id="test-jquery">点我</a>

<script>
    //选择器就是css的选择器
    $('#test-jquery').click(function () {
        alert('hello,jquery');
    })
</script>

选择器

//原生js，选择器少，不好记
//标签
document.getElemensByTagName();
//id
document.getElementById();
//类
document.getElementByClassName();

//jQuery 中的选择器它全部都能用！
$('p').click();//标签选择器
$('#id1').click();//id选择器
$('.class1').click();//class选择器

文档工具站：https://jquery.cuishfeng.cn/

操作DOM

节点文本操作

$('#test-ul li[name=python]').text();//获得值
$('#test-ul li[name=python]').text('设置值');//设置值
$('#test-ul').html();//获得值
$('#test-ul').html('<strong>123</strong>');//设置值

css的操作

$('#test-ul li[name=python]').css($('#id').css('color','red'););//获得值

元素的显示与隐藏 ：本质display : none

$('#test-ul li[name=python]').show();
$('#test-ul li[name=python]').hide();