【21.9.12】Javascript快速入门

【21.9.12】Javascript快速入门

1.快捷键

  • ctrl+?：快速生成网页注释<!---->

  • 注意点：input标签结合单选按钮使用时，是根据name的名字相同来产生互斥的效果，下面从是和否中智能选择一个，因为name想同，所以它们属于一种情况，配合radio故只能选一个，且与别的组的不同的name不会有影响！！

<em>是&nbsp;</em><input id="three" type="radio"  name="two" style="width:20px; height:20px; margin-right:5px;"/>
​
<em>否&nbsp;</em><input id="fourth" type="radio"  name="two" style="width:20px; height:20px; margin-right:5px;"/>
</span> </p>

 

2.javascript代码的书写

2.1、在html文件中的<head></head>或<body></body>用<script></script>标签写js代码（内部标签）

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
​
​
    <!--ctrl+?:快速生成注释-->
    <!--要养成习惯，js代码和java代码一样以分号结尾-->
    <script>
        alert('hello world!'); //生成弹窗
    </script>
</head>
<body>
​
</body>
</html>

 

2.2、另用一个文件夹存放js代码，然后在html里面引入js文件（外部引入）

----js-01.js文件
​
alert('hello world!');
----html文件
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--外部引入：注意标签要成对出现，不能使用自闭合标签<script src="..." />-->
    <script src="js/js-01.js"></script>
​
</head>
<body>
​
</body>
</html>

注意：外部引入时不能使用自闭合标签，必须成对出现！！

2.3、不用在<script>标签显示定义type，也默认就是javascript类型

<script type="text/javascript"></script>
type="text/javascript"，这个不用显示定义

 

3. 基础语法和数据类型概述

前提注意：

(1).如果在idea中写js代码的话，建议去file-->setting-->搜索“es6”，这样的话js代码会更加严谨一点！！

ES6：全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准！

image-20210912202225320

(2).javascript是严格区分大小写的！！

3.1、定义变量：js的所有变量都是用“var”来定义的,不用做类型的转换（let用来定义局部变量，const用来定义常量）。

var num=1;
var name="zhangyuzhou";

3.2、条件控制和循环结构等都和java的语法基本一样

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
​
    <script>
        //1.定义变量(可以在结尾处不写分号它不会报错，但这是不规范的，它在打包的时候会把所有没写分号的都浓缩成一行，这时候就会出错了！)
        var score=65;
        //2.条件控制
        if(score>60 && score<70){
            alert(score);
        }else if(score>70){
            alert(score);
        }else{
            alert("other!");
        }
    </script>
</head>
<body>
</body>
</html>

3.3、Number类型

js不区分小数和整数，他们都是Number类型

var s=123;
var s1=123.0;
var s2=1.123e3;  //科学计数法
var s3=-99;
NaN   //not a number--在控制台输出这个意味着这个变量不是数值类型
Infinity   //在控制台输出这个意味着这个数是一个极大的数

 

3.4、字符串类型：“123”和‘123’这两种定义是等效的！

3.5、布尔值类型：true、false

3.6、逻辑运算：&&（与）、||（或）、！（非）

3.7、比较运算符（重点）

(1).使用判断等于时，用“===”来比较！！

(2).NaN这个与所有的数值都不相等，包括它自身也不相等，如：NaN===NaN；其结果为false，但它有个方法是用来判断这个数是否是NaN，如：isNaN(NaN)；其结果为true;

=    //赋值运算符
==   //等于（类型不一样，值一样，比较时也会判断为true）
var s1=123;
var s2='123';
s1==s2;   //其结果是true
​
===   //绝对等于（类型一样，值一样，比较时判断结果才会为true）

image-20210912214901511

3.8、浮点数问题

console.log((1/3)===(1-2/3);  //其结果为false
//尽量避免使用浮点数来进行运算，存在精度问题
​
//可以使用一个方法来判断
console.log(Math.abs(1/3-(1-2/3))<0.0000001);   //其结果为true，因为去绝对值后无限接近于这个数，所以就会true

3.9、null类型

3.10、undefined类型

3.11、数组类型

java中的数组必须是相同类型的对象，而js中不需要这样，因为它的变量类型全用var来声明

var arr=[1,2,3,4,"hello",null,true]
new arr(1,2,3,4,"hello",null,true);   //也可以这样定义，只不过代码可读性差，建议用上面那种
​
//数组读值的方法(在html中或浏览器控制台)：
console.log(arr[0]);   //其结果值为1
console.log(arr[7]);   //数组下标越界，这时会在浏览器控制台会报一个undefined

3.12、对象类型

对象使用大括号声明{ }，而数组用的是中括号[ ]。每个属性之间使用逗号隔开，最后一个不需要添加！

var Person={
    name:"zhangyuzhou",
    age:3,
    tags:['js','java','web','...']
}
​
//对象读值的方法(在html中或浏览器控制台)：
console.log(Person.name);  //结果为zhangyuzhou
console.log(Person.tags[0]);  //结果为js

 

4、浏览器控台使用（常用的）

4.1、Elements:扒网站、复制网站用，这里可以查看你的网页代码以及相关的css样式

image-20210912210552627

 

4.2、Console:

(1).可以在里面写js代码

image-20210912204331190

(2).可以输入“console.log(score);”，这条语句也可以写在“js代码”里面，其作用是在浏览器控制台打印输出。

image-20210912204738170

4.3、Sources：当前网页的源码，可以打断点测试

image-20210912205411849

4.4、Network:网络请求（里面装载着我们页面访问网络的一些重要信息）

image-20210912205749930

4.5、Application：查看在浏览器保存的web的数据

image-20210912210335455

 

5、严格检查模式strict

  • 前提：idea中需要设置支持ES6语法，因为这个检查是基于ES6语法的。

  • ‘use strict’; 严格检查模式，作用是预防javascript的随意性所导致产生的一些问题，它必须写在javascript代码的第一行

  • 用了检查模式之后，建议都用llet来定义一些局部变量

    <script>
       'use strict';  //写在第一行，不然这个检查模式不生效！
       let i=1;
    </script>

 

6、数据类型详解

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

console.log('a')   //输出 a
console.log("b")   //输出 b

 

6.2、如果在字符串里面要用到单引号或双引号，这时我们需要用到转义字符 \ ，必须包含在字符串内！

\'      //在字符串中输出 '
\n      //换行
\t      //tab制表符，空四格
\u4e2d  //\u####,unicode字符表现形式，输出“中”字
\x41    //\x##,Acsll字符。输出“A”

 

6.3、多行字符串编写（es6新特性）

用tab键上面、esc键下面的引号，将多行字符串包含起来

var msg=`
你好啊
中国
我来了！`
console.log(msg);
​
//浏览器控制台输出样式：
你好啊
中国
我来了！

 

6.4、模板字符串（es6新特性）

用于拼接字符串，这里再也不用像java那样用+来拼接了！！

注意：字符串写法要用上面的多行字符串的写法来书写，并且用${ }引入字符串模板！！

let name="zhangyuzhou";
let age=3;
let msg=`你好啊，${name},我今年${age}岁了！`;
console.log(msg);
​
//浏览器控制台输出样式：
你好啊，zhangyuzhou,我今年3岁了！

 

6.5、字符串长度

var s="student";
console.log(s.length);   //输出7

6.6、字符串的不可变性

注意：js中字符串可用下标来获取字符,但通过下标来改变字符串里的字符是行不通的，这就是字符串的不可变性！！

var s="student";
console.log(s[0]);   //输出 s
​

6.7、大小写转换

var s="student";
console.log(s.toUpperCase());   //输出 STUDENT
console.log(s.toLowerCase());
//注意这些转换都不会影响原字符串的样子

 

6.8、获取字符串中某个字符的下标位置

var s="student";
console.log(s.indexOf(t));   //输出 1

 

6.9、字符串截取（用的很多！！）

它截取字符串的一部分，返回一个新数组，并不会影响原数组！

var s="student";
console.log(s.substring(1));  //输出 tudent
console.log(s.substring(1,3)); //左闭右开（含头不含尾）

 

7、数组类型详解

7.1、Array元素可以包含任意的数据类型

var arr=[1,2,3,"women",true]; //通过下标来取值和赋值

 

7.2、数组长度

注意：假如给arr.length赋值，数组大小就会发生变化，多余的空间被定义为undefined；如果赋值过小的话，元素就会丢失！！

var arr=[1,2,3,"women",true];
console.log(arr.length(10)); //输出：[1, 2, 3, 'women', true, empty × 5]
​
console.log(arr.length(2)); //输出：[1, 2]

 

7.3、通过元素获得下标索引

注意：字符串的1和数字1是不一样的！！

var arr=[1,2,3,"1","2","3"];
console.log(arr.indexOf(2));  //输出 1
console.log(arr.indexOf("1"));  //输出 3

7.4、数组的截取

它截取Array的一部分，返回一个新数组，类似于String中的substring

var arr=[1,2,3,"women",true];
console.log(arr.slice(2));  //输出 [3, 'women', true]
console.log(arr.slice(1,4)); //输出  [2, 3, 'women'] 含头不含尾

7.5、push()和pop()

push() : 把元素依次压入到数组尾部

pop() : 把元素依次从数组尾部取出

var arr=[1,2,3,"women",true];
console.log(arr.push(4,5,"hello")); //输出 [1, 2, 3, 'women', true, 4, 5, 'hello']  
​
console.log(arr.pop()); //输出 hello  从尾部依次弹出元素

 

7.6、unshift()和shift()

unshift() : 把元素压入到数组头部

shift() : 把元素依次从数组头部弹出

var arr=[1,2,3];
console.log(arr.unshift(-1,-2,"world"));
//输出 [-1, -2, 'world', 1, 2, 3]
​
console.log(arr.shift()); //输出 -1  从头部依次弹出元素

 

7.7、排序

var s=["B","c","A"];
console.log(s.sort());  //输出 ['A', 'B', 'c']

7.8、元素反转

var s=["C","B","A"];
console.log(s.reverse());  //输出 ['A', 'B', 'c']

7.9、数组拼接

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

var s=["B","c","A"];
console.log(s.concat([1,2,3]); //输出 ['B', 'c', 'A', 1, 2, 3]
​

7.10、连接符join

打印拼接数组，使用特定的字符串来连接数组元素

var s=["B","c","A"];
console.log(s.join("-")); //输出 B-c-A 不会改变原来的数组

7.10、多维数组

var str=[[1,2],[3,4],["5","6"]];
console.log(str[0][1]);  //输出 2
console.log(str[2][0]);  //输出 ‘5’

 

8、对象类型

js中的对象，{……}表示一个对象，用键值对来描述属性，多个属性之间用“，”隔开，最后一个属性不加逗号！！

var person={
        name:"zhangyuzhou",
        grade:2,
        age:18,
        school:"lingnan"
    }

注意：js中的所有键都是字符串，值可以是任意类型！！

8.1、给对象赋值

person.name="test";
console.log(person.name);  //输出 test,这时原来对象的名字就会被修改了

8.2、使用一个不存在的对象属性，它不会报错，只会提示undefined

person.hahah;  //输出 undefined

8.3、能动态的删减属性，通过delete删除对象属性

delete.person.name;  //输出 true，此时person对象中已没有name这个属性

8.4、动态增加属性，直接给新的属性添加值即可！

person.haha="hahahha"; //输出 hahahha，此时person里就有了haha这个属性

8.5、判断属性值是否在这个对象中，用XXXX in XXXX

"age" in person;  //注意对象中的键都是字符串，输出 true
"toString" in person; //true ,in会检测person所继承的所有属性，toString属性就在这里面

8.6、判断这个属性是否是这个对象自身拥有的,使用hasOwnProperty()

person.hasOwnProperty("age");  //输出 true

 

9、流程控制

9.1、if判断

9.2、while循环和do while循环

9.3、for循环

for(let i=0;i<100;i++){
    console.log(i);
}

注意：以上都和java的一样所以不做过多的解释！！

9.4、forEach循环(5.1特性)

涉及到函数

var age=[12.3,44,56,33,23,45];
age.forEach(function(value){
    console.log(value); //value就是每次从数组中取出来的值
})

9.5、forin循环

​
var age=[12.3,44,56,33,23,45];
for(var num in age){
    console.log(num); //输出每个元素的下标 0 1 2 3 4 5
    console.log(age[num]); //输出数组中的每个元素 12.3 44 56 33 23 45
}

9.6、forof循环（相当于iterator迭代器来遍历迭代！！）

//相当于Java中增强for循环
var age=[12.3,44,56,33,23,45];
for(var num of age){
    console.log(num); 
   //输出数组中的每个元素 12.3 44 56 33 23 45
}

 

10、Map和Set（Es6新特性）

10.1、Map

//按键值对的形式往Map里面存储
var map=new Map([['Tom',100],['jack',90],['haha',80]]);
var name=map.get('Tom');  //通过key来获取相应的值
​
map.set('admin',1345);  //向map集合里面加值
map.set("Tom",[100,200,300,400]) //一个key能对应着一个数组
​
//利用iterator来遍历Map
for(let x of map){
    console.log(x);
}
/*输出 
['Tom', 100]
['jack', 90]
['haha', 80]
*/
​
map.delete("Tom");  //通过key进行删除
console.log(name);  //输出 100

10.2、Set（无序不重复的集合，即有重复的元素会去重！）

var set =new Set([3,1,1,1,1]);  //输出 {3, 1}
​
set.add(2); //向set加入一个2 输出 {3, 1, 2}
​
//利用iterator来遍历Set
for(let x of set){
    console.log(x);
}
//输出 3 1 2
​
set.delete(2); //删除2这个元素 输出 true
console.log(set.has(3)); //判断set中是否有3这个元素 输出 true

 

11、函数

11.1、定义函数

注意：一旦执行return，代表函数的结束，返回结果；如果没有执行return，函数执行完时也会返回结果，结果为NAN ！！

//方式一：有名字的函数(后端人员常用)
function abs(x){
    if(x>=0){
        return x;
       /*return   
               x;    不能换行写return，因为它在执行时会给return后面自动加上一个分号，相当于返回一个null*/
    }else{
        return -x;
    }
}
​
//方式二：匿名函数（前端人员常用），可以把结果赋值给abs，且通过abs来调用函数！！
var abs=function(x){
    if(x>=0){
        return x;
    }else{
        return -x;
    }
}

11.2、参数问题

注意：Javascript可以传递任意个参数，也可以不传递参数，若函数是有参时，不传递参数就会返回 NaN！！

//问题一：假设传进来的参数不是我想要的数据类型，这样要如何规避？解决方法：手动判断抛出异常！！
var abs=function(x){
    if(typeof x!=='number'){ //如果x的类型不是number数字类型
        throw "NOt a Number!" //手动抛出异常
    }
    if(x>=0){
        return x;
    }else{
        return -x;
    }
}
​
//调用函数
abs(d);  //输出  Uncaught NOt a Number!
​
​
//问题二：如何解决多个参数问题？ 解决方法：利用arguments关键字(包含着所有的传递参数)和rest数组(存储除了函数要用到的参数外的所有传递参数)
var abs=function(x){
    console.log("x->"+x); //先输出这个函数想要的参数
    
    for(var i=0;i<arguments.length;i++){
        console.log(arguments[i]);
    }
//arguments代表传递进来的所有参数，是一个数组
    
    if(x>=0){
        return x;
    }else{
        return -x;
    }
}
​
//测试调用函数
abs(1,2,3,4,5,6); //输出 x->1  1 2 3 4 5 6
​
//利用rest数组存储多余的参数，rest只能写在最后面，前面必须用...来标识！！
function aaa(x,...rest){
    console.log("x->"+x); //先输出这个函数想要的参数
    
   console.log(rest);
    
    if(x>=0){
        return x;
    }else{
        return -x;
    }
}
​
//测试调用函数
aaa(1,2,3,4,5,6);  //输出 x->1  2 3 4 5 6

11.3、变量的作用域

注意：以下的解释都是在没有严格检查模式下进行的

（1）.假设在函数体中声明变量，则在函数体外不能使用

function aa(){
    var x=1;
    x=x+1;
}
x=x+2;  //执行时报错：Uncaught ReferenceError: x is not defined

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

function aa(){
    var x=1;
    x=x+1;
}
function bb(){
    var x=2;
    x=x+1;
}
//这两个x的使用不会有冲突！

(3).内部函数可以调用外部函数的变量，反之则不行！

function aa(){
    var x=1;
    function bb(){
        var y=x+1; 
        console.log(y);  //输出 2
}
     bb();
    var z=y+1; //报错 Uncaught ReferenceError: y is not defined
}

(4).内部函数变量和外部函数变量重名时，函数查找变量会先从自身开始由内向外查找，如果在外部有存在相同的变量，则内部函数会自动屏蔽掉外部函数的变量！！

function aa(){
    var x=1;
    function bb(){
        var x=2;
        var y=x+1;  //这里的x只会等于2，不会等于1
        console.log(y);  //输出 3
}
     bb();
    console.log("此时的x为"+x);   //输出 1
}

(5).提升变量的作用域

js在执行引擎时，自动提升y的声明，但是不会提升y的赋值。要养成规范，所有变量的定义都放在函数的头部，不要乱放，便于代码的维护

function aa(){
   // var y;    2.经引擎提升之后，y的作用范围已经扩大到这了
    var x="1";
    x=x+y; //1.虽然y在这里才出现，但js引擎已经提升了它的声明，将其放到了函数的头部
    console.log("此时x的值为"+x); //输出 此时x的值为1undefined
   
}

(6).全局变量

  • 定义在函数外面！

var x="您好！"
function aa(){
    console.log(x); //输出  您好！
}
var bb=function(){
    console.log("由匿名函数进行打印："+x); //输出 由匿名函数进行打印：您好！
}

  • 默认所有的全局变量都会自动被绑定在window对象下！

    js实际上只有一个全局作用域就是window，任何变量（函数也可以视为变量），假设没有在函数的作用范围内找到，就会向外查找，如果在全局作用域内都没有找到，就会报错 Uncaught ReferenceError: a is not defined

    var s="您好！";
    alert(s);
    window.alert(s);  
    //会跳出两次提示框，这说明了alert()函数本身也是一个window变量（函数）

  • 规范：由于我们定义的所有全局变量都会被绑定到全局作用域window下，如果在不同的js文件使用了相同的全局变量就会引起冲突！！怎样才能减少冲突呢？--->我们自己定义一个全局作用域来存放全局变量就行了！

    var zhangyuzhou={}; //定义一个空对象，和window对象一样作用，存放我们定义的全局变量，从而实现降低全局命名冲突的问题！
    ​
    //定义全局变量或函数,这些就会存储到我们定义的全局对象里去
    zhangyuzhou.name="yuzhou";
    var name="shansan"; //这个存到window对象下
    ​
    zhangyuzhou.add=function(a,b){
        return a+b;
    }
    ​
    console.log(name);  //输出 shansan
    console.log(zhangyuzhou.name); //输出 yuzhou

(7).局部变量

建议都用let来定义局部作用域的变量

```js
for(let i=0;i<10;i++){
    console.log(i); //i只在这个for循环里有效！
}
console.log(i);  //报错 Uncaught ReferenceError: i is not defined
```

(8).常量（es6新特性）

在es6引入了常量关键字const

const PI=3.14;
console.log(PI); //输出 3.14
PI="123";  //报错 Uncaught TypeError: Assignment to constant variable.（常量不能再做修改了！！）

 

12、方法

方法就是把函数放在对象里面。因为对象只有两个东西：属性和方法

//定义方法的方式一：
var zhangyuzhou={
    name:"小明",
    birth:2020,
    //方法
    age:function(){
        var now =new Date().getFullYear(); //2021年
        return now-this.birth;
    }
}
​
//测试方法的调用，一定要带括号！！
zhangyuzhou.age();  //输出 1
​
​
//定义方法的方式二：
​
function getAge(){
        var now =new Date().getFullYear(); //2021年
        return now-this.birth; //这个this.birth要结合zhangyuzhou这个对象才会生效，因为此时此刻getAge函数属于window对象了。你如果直接getAge（）的话会报错的，因为没有this.birth这个值！！
    }
var zhangyuzhou={
    name:"小明",
    birth:2020,
    //方法
    age:getAge  //把函数分离出去
}
​
//测试方法的调用--结合zhangyuhzou这个对象来调，里面的this.birth才会有值
zhangyuzhou.age();  //输出 1
//getAge();   输出 NaN
​
​
//定义方法的方式三 (运用每个函数都拥有的apply（）方法)：
function getAge(){
        var now =new Date().getFullYear(); //2021年
        return now-this.birth; 
    }
var zhangyuzhou={
    name:"小明",
    birth:2020,
    //方法
    age:getAge  //把函数分离出去
}
​
//测试方法的调用
getAge.apply(zhangyuzhou,[]); //this指向了zhangyuzhou对象，参数为[]空参！！  输出 1  

 

13、内部对象

13.1、标准对象

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

13.2、Date对象的基本方法

 var now=new Date(); //Wed Sep 15 2021 20:33:22 GMT+0800 (中国标准时间)
    now.getFullYear(); //年
    now.getMonth();  //月 0-->11
    now.getDate(); //日
    now.getDay(); //星期几
    now.getHours(); //时
    now.getMinutes(); //分
    now.getSeconds(); //秒
    now.getTime(); //时间戳 全世界唯一，从1970年1.1 00:00开始计算毫秒数
    //将时间戳转成时间，这个才是大家都一样的时间
    console.log(new Date(1631709384011));

13.3、时间转换

var now2=new Date(); //获取当前时间
now2.toLocaleString(); //转成本地时间 '2021/9/15 下午8:47:06'

13.4、JSON

(1). JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。

(2). 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。

(3). 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

在js中一切皆为对象，任何js支持的数据类型都可以用JSON来表示：

格式：

  • 对象都用{ }

  • 数组都用[ ]

  • 所有键值对都是用key：value

(4).JSON字符串和js对象的转换

JSON的两个方法：对象-->json: stringify()

json---->对象：parse() 解释 

 var user={
        name:"zhangyuzhou",
        age:3,
        sex:"男"
    }
​
    //对象转化为json字符串
var json = JSON.stringify(user);
//json字符串：'{"name":"zhangyuzhou","age":3,"sex":"男"}'
var obj=JSON.parse('{"name":"zhangyuzhou","age":3,"sex":"男"}');

注意：JSON的key都要用“ ”括起来，并且返回的是一个字符串，而对象的key不用用“ ”括起来，并且在浏览器控制台能展开！！

 

14、面向对象

14.1、面向对象语言

javascript、java、c#……这些都是面向对象语言，其特点为

类：模板

对象：具体的实例

在javascript中有原型：

原型：相当于继承一个父类，就是一个模板

对象

14.2、原型

var student={
        name:"zhangyuzhou",
        age:3,
        run:function(){
            console.log(this.name+"running……");
        }
    }
​
    var xiaoming={
        name:"xiaoming"
    }
​
    xiaoming.__proto__=student; //这时xiaoming就继承了student的所有东西，并且它重写了name属性
​
//测试
console.log(xiaoming.run);  //输出 xiaomingrunning……

14.3、class继承

class关键字是在es6才引入的！！

//原生方法（这种方法在es6就不用了，用class来代替了，但原理还是这个！！）
function student(name){
    this.name=name;
}
//给student新增一个方法
student.prototype.hello=function(){
    //向student的原型增加一个hello（）方法
    alert("hello!");
}

class继承

//定义一个学生的类,这就是一个规范的模板！
    class student{
        constructor(name){
            this.name=name; //构造器
        }
        hello(){
            alert("hello!");
        }
    }
​
//继承----原型
class xiaostudent extends student{
    constructor(name,grade){
        super(name); //调用父类的构造方法
        this.grade=grade;
    }
    mygrade(){
        alert("我是一名小学生！");
    }
}
    var xiaoming=new student("xiaoming"); //调用student的构造器传“xiaoming”过去！！
    var xiaohong=new xiaostudent("xiaohong");
​
//测试
console.log("xiaoming.name"); //输出 xiaoming
xiaoming.hello();  //弹出框，弹出“hello!”

14.4、原型链

image-20210915221919515

无终止循环，在浏览器控制台一直点是点不完的，进入object之后就一直在那循环了！！

 

15、操作BOM对象（重点）

15.1、浏览器介绍

  • javascript和浏览器关系：javascript的诞生就是为了能够让它在浏览器中运行！！

  • BOM：（Browser Object Model）浏览器对象模型

  • 流行浏览器（内核）原生：

    • IE6-11

    • Chrome

    • Safari

    • FireFox

  • 第三方浏览器（这些浏览器是以上面的浏览器为内核，可以随时更改）

    • QQ浏览器

    • 360浏览器

15.2、window对象

window代表浏览器窗口（全局作用域）

window.alert("您好！");
undefined
window.innerHeight  //就是内置窗口的高度，可以调整
//输出 722
window.innerWidth  //可以调整
//输出 982
//上面这两个内置高度，我们可以获取来做一下判断！！
​
window.outerHeight //从网页地址栏到你电脑的任务栏的高度
//输出 824
window.outerWidth
//输出 1536

 

15.3、Navigator类（不建议使用）

Navigator类，它的navigator对象封装了浏览器的信息

navigator.appName  //当前浏览器的应用名
//输出 'Netscape'
​
navigator.appVersion //当前浏览器的版本号-->这个浏览器属于 电脑上的，用了谷歌浏览器的内核等等信息
//输出 '5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.82 Safari/537.36'
​
navigator.userAgent //用户当前的系统，浏览器使用的内核等等
//输出 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.82 Safari/537.36'
​
navigator.platform //获得系统的版本
//输出 'Win32'

作用：可以检测你玩网页游戏时是使用电脑还是手机，之后再跳到适应的页面

大多时候，我们不会使用navigator对象，因为会被人为地修改，不安全性极高！！

15.3、screen对象

screen对象代表屏幕尺寸！

screen.height
//输出 864
​
screen.width
//输出 1536

15.4、lacation对象（重要）

location代表当前页面的URL信息

host: "www.baidu.com" //主机
href: "https://www.baidu.com/?tn=40020637_7_oem_dg" //网页链接
protocol: "https:" //协议
location.reload();  //重新加载网页
location.assign("https://www.bilibili.com/video/BV1JJ41177di?p=19");  //设置新的定位，当你进去你的网页时，会被重定向到上面的网页地址

15.5、document对象

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

//1.网页地址栏的名字会被改变
document.title="zhanguzhou";  
​
//2.获取具体的文档树节点（可以动态的修改网页）
<dl id="app">
    <dt>java</dt>
    <dd>javase</dd>
    <dd>javaEE</dd>
</dl>
​
<script>
    var d1=document.getElementById("app"); //会在浏览器控制台输出id为app的结点里的所有信息
</script>
​
//3.获取coolie
document.cookie
//输出 'BIDUPSID=075D96B84D787E6D8E4817849DF17510; PSTM=16

在服务器端可以设置cookie：httpOnly，这样就可以保证你的cookie的安全性，不被别人随便获取，即劫持你的cookie！！

15.6、history对象（不建议使用）

history代表浏览器历史记录

history.back();  //网页后退一页
history.forward();  //网页前进一页

 

16、操作DOM对象（重点）

16.1、核心概念

  • DOM：文档对象模型

  • 浏览器网页就是一个Dom树形结构！（可以获得树的节点从而对树节点进行操作！！）

    image-20210916093301262

上面这个就是Dom树，就是我们在网页所使用到的各类标签！！

  • 相关操作

    • 更新：更新Dom节点

    • 遍历Dom节点：得到Dom节点

    • 删除：删除一个Dom节点

    • 添加：添加一个新的节点

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

 

16.2、获得Dom节点

document代表的就是Dom树，包含树的所有结点信息！！

<div id="father">
    <h1>标题1</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>
​
<script>
    //对应css选择器
    var h1=document.getElementsByTagName("h1");//根据标签名获取节点
    var p1=document.getElementById("p1"); //根据id
    var p2=document.getElementsByClassName("p2"); //根据class
    var father=document.getElementById("father");
​
    var child=father.children; //获取父节点下的所有子节点
</script>

这是原生的代码，之后我们尽量都是用jQuery()来进行操作！！

 

16.3、更新节点

//先设置一个节点供下面测试使用
<div id="id1">
    
</div>
<script>
   var id1=document.getElementById('id1');    
</script>

  • 操作文本

    id1.innerText="456"; //修改文本的值  之前的div标签中是没有值的，现在这个标签在网页显示时会出现“456”.
    ​
    id1.innerHTML="<strong>123</strong>";  //插入超文本（标签）并且赋值

  • 操作css

    id1.style.color="yellow";  //设置标签里文字的颜色为黄色
    ​
    id1.style.fontSize="200px"; //设置文字大小 
    //注意：在css时字体大小是font-size有横线的，但通过操作Dom节点时所有横向都会变成驼峰命名法：fontSize
    ​
    id1.style.padding="2em"; //设置空两格

    注意：其他的css操作也是如此，这里就不列举那么多了！！

     

16.4、删除节点

删除节点的步骤：先获取父节点，然后再通过父节点来移除自己！！

<div id="father">
    <h1>标题1</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>
​
<script>
    //方式一
    var self=document.getElementsById("p1");
    //获取父节点
    var father=p1.parentElement; //获取p1的父节点
    father.removeChild(self); //在网页上就删除了这个节点
    
    //方式二、
    var child=father.children; //获取父节点下的所有子节点，这里可以通过数组下标的形式来获取相应的子节点
    father.removeChild(child[0]); //删除了<h1>节点里的内容
    
</script>

注意：用方式二删除时，child数组的下标是在动态变化的。删除节点的时候要注意！！（比如：你有3个节点，删了一个，那么剩下两个节点下标就会从0重新开始排序）

 

16.5、增加节点

  • 我们获得了某个Dom节点，如果这个节点是空的，我们可以通过innerText或innerHTML来增加元素，但如果这个节点已经有元素了，我们就不用这个了，因为它会覆盖掉原来的所有元素！！

  • 追加节点(已存在的节点)

<p id="js">javascript</p>
<div id="list">
    <p id="se">javase</p>
    <p id="ee">javaee</p>
    <p id="me">javame</p>
</div>
​
<script>
    var js=document.getElementById("js"); //先获得要插入的节点
    var list=document.getElementById("list"); //在这个节点进行插入
    
    list.appendChild(js); //就把js这个节点插入到list这个节点的后面了！
</script>

  • 创建一个新节点

    • appendChild()

    • setAttribute()

    <p id="js">javascript</p>
    <div id="list">
        <p id="se">javase</p>
        <p id="ee">javaee</p>
        <p id="me">javame</p>
    </div>
    ​
    <script>
        
       //方式一
      var list=document.getElementById("list"); //在这个节点进行插入
      var newP=document.createElement("p"); //创建一个p标签
        newP.id="new1";  //设置标签的名字
        newP.innerText="hello zhagnyuzhou"; //向标签内插入文字
        
        list.appendChild(newP); //向list节点插入新建节点newP
        
      //方式二
       var myscript=document.createElement("script"); //创建一个script标签
       myscript.setAttribute("type","text/javascript"); //设置属性，相当于type=“text/javascript”
       myscript.setAttribute("id","script"); //等价id=“myscript”
        
       list.appendChild(myscript); //将节点加进去
    </script>

  • 插入在节点前面

    //插在节点前面
        var ee=document.getElementById("ee");
        var js=document.getElementById("js");
        var list=document.getElementById("list");
    ​
        //在ee节点的前面插入js节点
        list.insertBefore(js,ee);

 

 

17、操作表单（涉及到验证问题）

17.1、表单<form>

  • 文本框 text

  • 下拉框 <select>

  • 单选框 radion

  • 多选框 checkbox

  • 隐藏域 hidden

  • 密码框 password

  • …………

    表单的目的就是提交数据！！

17.2、获取和修改输入框的值

<form action="post">
    <span>用户名：</span><input type="text" id="username">
</form>
​
<script>
    //获取输入框的值
    var input_text=document.getElementById("username");
   //在浏览器控制台通过输入input_text.value;获取值
    
    //在浏览器控制台修改输入框的值---直接赋值
    input_text="123456";

17.3、单选框

  • 获取单选框默认的值（可以通过操作节点来获取）

   <form action="post">
        <span>性别：</span>
        <input type="radio" name="sex" value="男" id="boy">男
        <input type="radio" name="sex" value="女" id="gril">女
    </p>
</form>
​
<script>
    var boy_radio=document.getElementById("boy");
    var gril_radio=document.getElementById("gril")
//在浏览器控制条通过输入下列语句获得：
    boy_radio.value;  //输出 男
    gril_radio.value; //输出 女
</script>

  • 查看单选框是否被选中(可以拿来做判断条件！！)

    boy_radio.checked; //true代表选中，false代表没选中,
    ​
    //也可以手动赋值选中
    boy_radio.checked=true;

17.4、提交表单以及用md5加密

  • input提交

    <form action="#" method="post">
        <p>
            <span>用户名：</span><input type="text" id="username" name="username">
        </p>
        <!--加了name属性，抓包时才能抓住数据！-->
        <p>
            <span>密码：</span><input type="password" id="password" name="password">
        </p>
        
        <input type="submit">
     
    </form>

     

  • 按钮绑定事件提交（不能过滤）

    action代表提交后跳转的页面地址，method代表提交的方式

    <form action="#" method="post">
        <p>
            <span>用户名：</span><input type="text" id="username" name="username">
        </p>
        <!--加了name属性，抓包时才能抓住数据！-->
        <p>
            <span>密码：</span><input type="password" id="password" name="password">
        </p>
    ​
        <!--提交方式二：给button绑定事件onclick，校验密码格式等-->
        <button type="button" onclick="aaa()">提交</button>
    </form>
    ​
    <script>
        function aaa(){
            alert("您已成功提交！");
        }
    </script>

  • 表单绑定事件提交（有过滤功能）

    onsubmit="return aaa():如果返回的是false，那么提交就会失败。注意要加上return ！！

    onsubmit：提交检测的函数

    <form action="#" method="post" onsubmit="return aaa()>
    <!--onsubmit="return aaa():如果返回的是false，那么提交就会失败。注意要加上return-->
        <p>
            <span>用户名：</span><input type="text" id="username" name="username">
        </p>
        <!--加了name属性，抓包时才能抓住数据！-->
        <p>
            <span>密码：</span><input type="password" id="password" name="password">
        </p>
        <!--<input type="submit">提交方式一-->
    ​
        <button type="button">提交</button>
    </form>
    ​
    <script>
        function aaa(){
            alert("您已成功提交！");
            return false; //false返回到表单就不能提交了 
        }
    </script>

     

  • md5加密的两种形式：

    • //先导入加密包：（在线的）你也可以去下载离线的
      <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>

    • 方式一：点提交后，密码框里密码长度瞬间变长，抓包时密码已经被加密看不懂了

    • 方式二：优化：点提交后，密码框里的密码长度保持不变，抓包时密码已经被加密看不懂了

      因为第一种一看就知道密码用了md5来进行加密了！！

<form action="#" method="post">
    <p>
        <span>用户名：</span><input type="text" id="username" name="username">
    </p>
    <!--加了name属性，抓包时才能抓住数据！-->
    
    <!--加密方式一-->
    <!-- <p>
        <span>密码：</span><input type="password" id="password" name="password">
    </p>
     -->
    
    //<!--加密方式二：隐藏了密码再提交-->
    <p>
        <span>密码：</span><input type="password" id="password">
    </p>
    
   <input type="hidden" id="md5_pwd" name="password">
    <!----------------------------------------------------------------------------->
​
   <button type="button" onclick="aaa()">提交</button>
</form>
​
<script>
    function aaa(){
        alert("您已成功提交！");
        var uname=document.getElementById("username");
        var pwd=document.getElementById("password");
        console.log(uname.value);
        
        //md5算法加密方式一
        //pwd.value=md5(pwd.value); //直接加密之后，点提交的一瞬间，密码框里的密码被加长，而且抓包时，密码已被加密看不懂了！
        
        //加密第二种方式
        var md5pwd=document.getElementById("md5_pwd");
        
        md5pwd.value=md5(pwd.value);
        console.log(pwd.value);
    }
</script>

 

18、jQuery

18.1、jQuery库

  • jQuery库里面存着大量的javascript函数！！

  • 在线引入：直接上网搜cdn jQuery会有很多在线链接的

    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!--在线引入jQuery-->
       <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
    </head>

     

  • 离线引入：搜“jQuery”去到它的官网，点“Download jQuery”进去，按自己的需求去进行下载相应的版本就行了，没什么区别的，就是占的存储空间不同而已，但也相差不大！！

image-20210916181649080

  • 公式：${ selector }.action( )

    selector代表的是选择器，选中了某个选择器，action代表所需要用到的事件函数，即在这个选择器上进行怎样的操作！！

    id选择器就用#

    • $('p').click(); //标签选择器

    • $('#id1').click(); //id选择器

    • $('.class1').click(); //class选择器

<script>
    //js写法
    // var aa=document.getElementById("id");
    // aa.click();
​
    //jquery写法
    $('#test-jquery').click(function(){
        alert('hello!');
    })
​
</script>

18.2、事件

鼠标事件、键盘事件、其他事件

  • 鼠标事件

    image-20210916223223615

<head>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <style>
        #divMove{ 
            width:500px;
            height:500px;
            border:1px solid red;
        }
    </style>
</head>
<body>
<!--获取鼠标当前的坐标-->
mouse:<span id="mouseMove"></span>
<div id="divMove">在这里移动鼠标试试</div>
​
<script>
    //当网页元素加载完毕之后响应事件
    //原型
    // $(document).ready(function(){
    //
    // })
    //简写
    $(function(){
        $('#divMove').mousemove(function(e){
           //e接收了鼠标的坐标返回值 $('#mouseMove').text('x:'+e.pageX+'y:'+e.pageY);
        })
    })
</script>
</body>

18.3、操作Dom

<ul id="test-u1">
    <li class="js">javascript</li>
    <li name="python">python</li>
</ul>
​
<script>
    //原js写法
    //document.getElementById(' ')
​
    //jquery写法
    //因为在“test-u1”还有li，所以要利用属性精确定位
   $('#test-u1 li[name=python]').text(); //获取值
   $('#test-u1 li[name=python]').text('123456'); //修改值
    
   $('#test-u1').html();  //获取标签
   $('#test-u1').html('<strong>123</strong>') //加入标签
</script>

18.4、操作css

$('#test-u1 li[name=python]').css({"color":"red"}); //可以用花括号加多个键值对来设置多个css样式

18.5、元素的显示与隐藏

$('#test-u1 li[name=python]').show();  //显示元素
$('#test-u1 li[name=python]').hide();  //隐藏元素 等价于display:none;

19、前端训练

  • 源码之家---->看jQuery源码，看游戏源码

  • 扒网站---->巩固HTML、CSS

  • 提升自己页面审美---->ant、element、layer

  •  

posted @ 2021-12-24 10:48  周游码世界  阅读(128)  评论(0)    收藏  举报