Document

JavaScript-狂神视频版本

2024-09-01
dfer
67
javascript 开发语言 ecmascript CSDN

JavaScript学习

1.闲聊JavaScript

1.1历史

前端三大框架：Angular【java开发，模块化】，React【facebook,虚拟dom】,Vue【结合了前面两种，javascript的进阶】

axios：前端通信，使用ajax

UI框架：Ant-Desing【基于React，阿里巴巴】，ElementUI【基于VUE，饿了么】，BootStrap【Twitter】

1.2什么是javaScript?

javascript是最世界上最流行的编程语言，脚本语言，不需要编译，逐行解释

主要功能：网络通信，网络交互，操作DOM

1.3 js与html,css关系

html相当于一个骨架，css相当于给他装饰，js给他一些行为动作

css有预处理器，常见的有SASS,LESS

1.4组成

ECMAScript，描述了该语言的语法和基本对象。

DOM文档对象模型，描述处理网页内容的方法和接口。

BOM浏览器对象模型，描述与浏览器进行交互的方法和接口。

2.快速入门

2.1引入Javascript

内部标签

<script>
  alert("hello Javascript")
</script>

效果

外部引入
hello.js

alert("hello javascript")

hello.html

<head>
	<script src=js/hello.js></script>
</head>

2.2基本语法入门

<script>
    //1. 定义变量
    let v=22;
//2. if else
if(v>10 && v<20){
    alert("v>10 && v<20");
    console.log("v>10 && v<20");
}else if(v>20 && v<30){
    alert("v>20 && v<30");
    console.log("v>20 && v<30");
}else{
    alert("else");
    console.log("else");
}

console.log("acbc");
</script>

2.3 数据类型

数值

不区分小数和整数【特殊的：NAN，Infinity】,typeOf()查看数据类型

字符串

	console.log("a"=='a') //true,两者是一样的

布尔值

True,False

比较运算符

= 赋值

== 等于【类型不一样，值一样，结果为true】

===绝对等于【类型和值都一样，结果才为true】

PS: NaN===Nan —> false ; isNaN(Nan)—> true

逻辑运算符

&&；||；！

Null;undifined

null:空

undifined:未定义

数组

<script>
    let arr=[1,2,"lijun",null,true];
	console.log(arr[0]); //1
	console.log(arr[8]); //undefined
</script>

对象

// 对象是大括号，数组是中括号
let obj={
    name:"lumos",
    age:12,
    gender:"male"
};
console.log(obj.name);

2.4 严格检查模式【ES6】

<script>
    'use strict'  //代表是严格检查模式，必须写在第一行
    var i=10;
    let b=10; //定义的局部变量
</script>

3.数据类型详解

3.1字符串

<script>
    //转义字符
    console.log('abc\ndef\'');
    //多行内容书写
    let name=`I am a boy   
    hhhh,
    ,name is boyandgril`;

    console.log('\u4e2d'); //unicode码
    console.log('\x41');  //ascii码
</script>

3.1.2模版字符串

<script>
    //模版字符串
    let name1="lumos";
    let age = "15";
    let sms=`his name is ${age}`;  //注意这里需要使用单反引号
    console.log(sms);
</script>

3.1.3常见用法

字符串的不可变性

3.2数组

3.2.1常见方法

let arr=[1,2,3,4,5,6];
console.log(arr.length); //6 
console.log(arr.indexOf(3)); //2
console.log(arr.slice(2,5));//3,4,5
console.log(arr.slice(2,7)); //3,4,5,6
//尾部插入删除
arr.push(0); //1,2,3,4,5,6,0
arr.pop(); //1,2,3,4,5,6
//头部插入删除
arr.shift(); //删除
arr.unshift(0); //添加元素

排序sort, 反转reverse

join连字符，以及concat，均不改变原字符串

3.3对象

<script>
    //定义对象
    let obj={
        name:"lumos",
        age:8,
        gender:'male'
    }
    console.log(obj)
    delete obj.age;  //删除属性
    console.log(obj)
    obj.play = "bike"; //增加属性
    console.log(obj)
'age' in obj //true,判断属性值是否在对象中，键都是字符串
obj.hasOwnProperty('age') //true,判断属性是否是对象所拥有的
</script>

3.4流程控制

与Java类似

//for循环，if-else语句，while循环
<script>
    let arr=[1,2,36,3,3,4,32,5];
//1.for
    for(let i=0;i<arr.length;i++){
        //2.if-else
        if(arr[i]>20)
            console.log(arr[i]);
        else console.log("value is lt")
    }
    console.log("----------------------")
//3.forEach
    arr.forEach(function (value){  //foreach 循环
        console.log(value)
    })

    let length=arr.length;
//4.while
    while(length-->0)
        alert(length);
//5.for-in
  console.log("----------for-in------------")
    for(let i in arr){
        console.log(arr[i]);
    }
</script>

3.5 Map && Set

<script>
     let map=new Map([['gender','female'],['age',18],['name','lumos']])  //可以通过数组赋初值
     console.log(map)
     map.set('play', 'basketball');//增加键值对
     console.log(map)
     map.delete('gender') //删除键
     console.log(map)
     console.log(map.get('name')) //通过Key获得值
     console.log(map.size) //获取大小
     console.log(map.has('name')) //判断是否有某个属性
</script>

Set: 无序不重复

<script>
    let set=new Set([1,2,6,4,4]);
    console.log(set)
    //增加
    set.add(8)
    console.log(set)
    //删除
    set.delete(6)
    console.log(set)
    //判断是否拥有
    console.log(set.has(1))
</script>

3.6迭代器

for of 和 for in 的区别，for in 主要用于对象属性的遍历，需要使用 hasOwnProperty 方法来检查属性是否是对象自身的属性，以避免遍历到继承的属性。一般用for of

遍历map

let map=new Map([['gender','female'],['age',18],['name','lumos']])
for(let i of map) 
    console.log(i)

遍历集合set

let set=new Set([1,2,6,4,4]);
for(let i of set){
    console.log(i)
}

遍历数组

let arr=[1,2,3,'3','fd',4]
for(let i of arr){
    console.log(i)
}

4.函数

4.1函数定义

定义方式一

<script>
    function abs(value){  //参数可以传任意个，0个或多个，都不会报错
    	if(typeof value !=='number') //加入判断
            throw "Not a Number";
        if(value>=0) return value;
        else return -value;
    }
</script>

定义方式二

  var abs=function (value){ //匿名函数
        if(value>=0) return value;
        else return -value;
    }

4.2 arguments参数

可以获取传递的所有参数

function abs(value){
    if(typeof value !=='number')
        throw "Not a Number";
    for(let i=0;i<arguments.length;i++){
        console.log(arguments[i])
    }
}

如何获取除了指定的参数外的参数？

function abs(value,ab,...rest){  //这里使用...rest来指定剩下的参数，这里指定的参数是两个，见运行结果截图
    if(typeof value !=='number')
        throw "Not a Number";
    for (let restElement of rest) {
        console.log(restElement)
    }

4.3 变量作用域

变量在函数中定义就只能在函数中生效，定义变量时最好是把所有变量定义在最前面。

var解决全局唯一变量，let解决局部变量

const定义常量，无法改变值

//错误示例
function avg(){
    let a='yy';
    a=a+y;
    console.log(a);
    let y='tt';
}

4.3.1 全局变量

var作用域大于let

<script>
    'use strict'
    //变量作用域
    let va=123;
    function avg(){
        va+=10;  //133
        console.log(va);
    }

    function avb(){
        va+=20; //153
        console.log(va);
    }
    avg();
    avb();
    console.log(va); //153
</script>

4.3.2 全局对象

默认全局变量都是自动绑定在window对象下的

<script>
    alert("abc")
    window.alert("def")
</script>

如何避免全局变量的命名冲突？

通过自定义的唯一命名空间中【对象】

var lumos={}; //唯一全局变量
lumos.name="lumoslin"
lumos.sub=function (a,b){
    return a-b;
}

4.4 方法

方法的调用要加括号，例如lumos.age(),而属性直接调用，例如lumos.name

//写法1
<script>
    let lumos={
        name:'xiaolin',
        birth:2002,
        age:function (){
            return new Date().getFullYear()-this.birth;  //通过this调用自己属性的birth
        }
    }
</script>

//拆分写法2-----将函数拆开写
    <script>
        function getAge(){
            return new Date().getFullYear()-this.birth;
        }

        let lumos={
            name:'xiaolin',
            birth:2002,
            age:getAge  //注意这里调用的是函数名，没有括号哦~
        }
    </script>

apply :用于指定当前this的指向

getAge.apply(Tomas,[]); //通过apply改变this的指向

因此，这里可以采用两种方式

lumos.age();
getAge.apply(Tomas,[]]);

5.内部对象

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

5.1 Date

<script>
    let date = new Date();
    let year = date.getFullYear();
    let month = date.getMonth(); //需要加一
    let date1 = date.getDate();
    let day = date.getDay(); //星期几
    let time = date.getTime(); //时间戳
    let hours = date.getHours();
    let minu = date.getMinutes();
    let seconds = date.getSeconds();

    let now=`现在的时间是：${year}-${month+1}-${date1} ${hours}:${minu}:${seconds}` //现在的时间是：2024-8-26 17:38:29
    console.log(now)
    console.log(day)
    console.log(time)
    console.log(date.getTimezoneOffset())
    console.log(date.getUTCDate())
    console.log(date.getMilliseconds())

    var past=new Date(time);
    console.log(past.toDateString())
    console.log(past.toLocaleString())
    console.log(past.toUTCString())
</script>

5.2 JSON

<script>
    var obj={
        name:'lumos',
        age:18,
        gender:'female'
    }
    console.log(obj)
    //将对象转化为json
    let s = JSON.stringify(obj);
    console.log(s)
    //将json 转化为对象
    let parse = JSON.parse(s);
    console.log(parse)
</script>

运行结果

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

区别

json: var json=‘{“name”:"lumos,“age”:12}’ //大括号这一坨是一个字符串，里面都是用引号引起来的
js对象 var obj={name:“lumos”,age:18}

6.面向对象

基于ES6的标准

6.1 基于原型链prototype的继承【是一个环形】 – 对应jjava的继承

6.2基于class的继承

<script>
   class student{
       constructor(name) {
           this.name=name;
       }
       sayHello(){
           console.log("hi")
       }
   }

   class pupil extends student{
       doHomework(){
           console.log("it's easy for me")
       }
   }

//调用
var stu=new pupil("Bob");
stu.doHomework();
stu.sayHello();
</script>

7. BOM对象 **

7.1 location

location 代表当前页面的URL信息

location.reload() //刷新网页
location.host //'www.baidu.com'
location.url  //'https://www.baidu.com'
location.assign('https://www.bilibili.com') //指定跳转的网址

7.2 document **

document.title='lumos' //1.修改网页标题
//2.获取页面元素
<body>
<dt id="ab">
    <dl>
        sports
    </dl>
    <dd>basketball</dd>
    <dd>baseball</dd>
</dt>
<script>
let ele = document.getElementById('ab');
</script>

//3.获取cookie

</body>

7.3 window

window代表浏览器当前的窗口
window.alert();
window.innerHeight
window.outerWidth

7.4 navtigator

封装了当前浏览器的信息，版本、内核等;允许被用户修改
navigator.userAgent
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36'

navigator.appName
'Netscape'

7.5 history

代表当前的浏览记录
history.back() //后退
history.forward() //前进

8.DOM对象 **

DOM 文档对象模型，网页都是一颗颗DOM树形结构

原生态操作【后续会使用JQuery,知道即可】

获取DOM节点

<body>
<div id="father">
    <h1 class="ch1">I'm first child</h1>
    <dt>
        <dl>sports</dl>
    <dd>basketball</dd>
    <dd>baseball</dd>
    <dd>soccer</dd>
    </dt>
</div>
<script>
    let father = document.getElementById(`father`);
    let dl = document.getElementsByTagName('dl');
    let classNode = document.getElementsByClassName('ch1');
    let lastChild = father.lastChild; //得到最后一个
    let firstChild = father.firstChild; //得到第一个
	 father.children;//得到所有孩子
   console.log( father.getElementsByTagName('dd'))
</script>
</body>

修改DOM节点

<script>
    var get=document.getElementById("lumos")
    get.innerText='你好呀'
    get.innerHTML='<h2>我很好</h2>'  //可解析html
    get.style.fontSize='20px'
</script>

增加DOM节点

<script>
    let p = document.getElementById('p');
    let hid1 = document.getElementById('hid1');
    let createP = document.createElement('p');
    createP.id = 'createP';
    createP.innerHTML = 'hehiehieeih'
    createP.style.color='red'
    createP.style.fontWeight='bolder'
    hid1.append(createP)

    let createScript = document.createElement('script'); //创建新标签
    createScript.setAttribute('type','text/css')
    createScript.innerText='this is createScript'
    p.append(createScript)

    let getBody = document.getElementsByTagName('body'); //更改背景颜色
    getBody[0].style.backgroundColor='skyblue'

</script>

删除DOM节点

步骤:先获取父节点，然后在删除子节点

<div id="father">
    <h1 id="ch1">I'm first child</h1>
    <h1 id="ch2">I'm first child</h1>
    <dt>
        <dl>sports</dl>
    <dd>basketball</dd>
    <dd>baseball</dd>
    <dd>soccer</dd>
    </dt>
</div>

<script>
    var self = document.getElementById('ch1');
    var father=self.parentElement;  //获取父节点
    // father.removeChild('ch1');
    father.removeChild(father.children[0]) //删除多个节点时，需要注意下标是动态变化的

</script>

9.表单

9.1 表单的get&&modify

<body>

<form action="__" method="post">
    <span>用户名:</span>
    <input type="text" id="username" name="user" maxlength="3">

    <span>性别:</span>
    <input type="radio" name="gender" value="man" checked>男
    <input type="radio" name="gender" value="woman">女
</form>

<script>
    let username = document.getElementById('username');
    let inputArrays = document.getElementsByTagName("input");
</script>
</body>

5.2 表单密码的安全传递

通过md5传递【并不是完全安全的】

密码框并不实际传递密码，而是将密码接收后进行加密然后存储到隐藏域hidden中的提交值中。

需要引入md5的js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/blueimp-md5/2.12.0/js/md5.min.js"></script>
</head>
<body>

<form action="5.表单获取值修改值.html" method="post" onsubmit="return abc()"> <!--这里可以根据abc()返回的true与false决定是否提交-->
    <p>
        <span>用户名:</span>
        <input type="text" id="username" name="user" maxlength="3" required>
    </p>

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

    </p>
    <input type="hidden" name="pwd" id="repwd"></inputhidden>
    <input type="submit" value="提交">
</form>

<script>

    function abc() {
        alert(1)
        let username = document.getElementById('username');

        let pwd = document.getElementById("password");
        let repwd = document.getElementById("repwd");
        repwd.value = md5(pwd.value);//密码的实际提交值
        return false;
    }
</script>
</body>
</html>

10. JQuery

什么是 jQuery ？

jQuery 是一个 JavaScript 函数库。

jQuery 是一个轻量级的"写的少，做的多"的 JavaScript 库。

jQuery 库包含以下功能：

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities

提示： 除此之外，jQuery 还提供了大量的插件。

10.1 入门体验

导入jquery的在线cdn，或者下载后放在本地都可以

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<a href="https://www.baidu.com" id="hr">click me..</a>
<script>
    //方式二：使用jQuery
    $('#hr').click(function (event){
       e.preventDefault();
        alert('congratulation!')
    })

    //方式一
    // 确保DOM完全加载后再执行下面的代码
    // document.addEventListener('DOMContentLoaded', function() {
    //     let id = document.getElementById('hr');
    //     // 使用addEventListener来绑定点击事件
    //     id.addEventListener('click', function(event){
    //         alert('congratulation!');
    //         // 阻止链接默认的导航行为
    //         event.preventDefault();
    //     });
    // });
</script>
</body>

</html>

10.2 选择器

https://www.runoob.com/jquery/jquery-ref-selectors.html

选择器尝试连接：https://www.runoob.com/try/trysel.php

与css中的选择器一致

$(‘p’)
$(‘#pp’)
$(‘.ppp’)

10.3 事件

实现获取鼠标点击的坐标

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style>
        div {
            width: 600px;
            height: 500px;
            border: 2px solid red;
        }
    </style>
</head>

<body>
mouseLocation:
<span id="mouseLocation"></span>
<div id="divMove"></div>
<script>
    $(function () {
        // $('#divMove').onmouseleave(function (e) { //这种可能出问题
        $('#divMove').on('mouseleave', function (e) {//Jquery推荐这种写法
            $('#mouseLocation').text('x:' + e.pageX + ',y:' + e.pageY);
        });
    });
</script>
</body>

</html>

10.4 操作DOM

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<p id="pa">这是一段列表</p>
<ul id="city">
    <li class="cq">重庆</li>
    <li ab="wh">武汉</li>
    <li id="bj">北京</li>
</ul>

<script>
    $(function (){
        console.log($('.cq').text())  //这个有点像xpath
        // console.log($('#city li[ab=wh]').text())  //这个有点像xpath
        console.log($('#city li[ab=wh]').html('123'))
        console.log($('#pa').text())
        //直接css装饰
        $('#bj').css({"color":"red","font-size":"40px"})
        //x
        $('#city li[ab=wh]').hide()
        $('#city li[ab=wh]').show()
    })

</script>
</body>
</html>
      // $('#divMove').onmouseleave(function (e) { //这种可能出问题
        $('#divMove').on('mouseleave', function (e) {//Jquery推荐这种写法
            $('#mouseLocation').text('x:' + e.pageX + ',y:' + e.pageY);
        });
    });
</script>
</body>

</html>

10.4 操作DOM

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<p id="pa">这是一段列表</p>
<ul id="city">
    <li class="cq">重庆</li>
    <li ab="wh">武汉</li>
    <li id="bj">北京</li>
</ul>

<script>
    $(function (){
        console.log($('.cq').text())  //这个有点像xpath
        // console.log($('#city li[ab=wh]').text())  //这个有点像xpath
        console.log($('#city li[ab=wh]').html('123'))
        console.log($('#pa').text())
        //直接css装饰
        $('#bj').css({"color":"red","font-size":"40px"})
        //x
        $('#city li[ab=wh]').hide()
        $('#city li[ab=wh]').show()
    })

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

上一篇：【源码分享】浏览器相

下一篇：重邮实训第四天作业

Document

JavaScript-狂神视频版本

JavaScript学习

1.闲聊JavaScript

1.1历史

1.2什么是javaScript?

1.3 js与html,css关系

1.4组成

2.快速入门

2.1引入Javascript

2.2基本语法入门

2.3 数据类型

2.4 严格检查模式 【ES6】

3.数据类型详解

3.1字符串

3.1.2模版字符串

3.1.3常见用法

3.2数组

3.2.1常见方法

3.3对象

3.4流程控制

3.5 Map && Set

3.6迭代器

4.函数

4.1函数定义

4.2 arguments参数

4.3 变量作用域

4.3.1 全局变量

4.3.2 全局对象

4.4 方法

5.内部对象

5.1 Date

5.2 JSON

6.面向对象

6.1 基于原型链prototype的继承【是一个环形】 – 对应jjava的继承

6.2基于class的继承

7. BOM对象 **

7.1 location

7.2 document **

7.3 window

7.4 navtigator

7.5 history

8.DOM对象 **

9.表单

9.1 表单的get&&modify

5.2 表单密码的安全传递

10. JQuery

什么是 jQuery ？

10.1 入门体验

10.2 选择器

10.3 事件

10.4 操作DOM

10.4 操作DOM

2.4 严格检查模式【ES6】