B站 - 狂神说 - JavaScript 随堂笔记(图)

三连地址https://www.bilibili.com/video/BV1JJ41177di?from=search&seid=6715593633392022867

1、什么是 JavaScript

1.1、概述

JavaScript是一门世界上最流行的脚本语言
Java、 JavaScript
10天—

一个合格的后端人员,必须要精通 JavaScript

### 1.2、历史

JavaScript的起源故事
https://blog.csdn.net/kese7952/article/details/79357868

ECMAScript它可以理解为是Javascript的一个标准
最新版本已经到es6版本-
但是大部分浏览器还只停留在支持es5代码上!
开发环境一线上环境,版本不一致

2、快速入门

2.1、引入JavaSciprt

1、 内部标签

<script>
//...
</script>

2、外部引入
abs.js

 //...

test.html

  <script src="abc.js"></script>

测试代码

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

    <!--script标签内,写Javascript代码--> 
    <!--<script>--> 
    <!--alert( 'hello,world');--> 
    <!--</script>--> 

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

    <!--不用显示定义type,也默认就是 javascript--> 
    <script type="text/javascript"> 

    </script> 
</head> 
<body>
<!--这里也可以存放--> 
</body> 
</html>

2.2、基本语法入门

<head> 
    <meta charset="UTF-8"> 
    <title>Title</title> 
<!-- JavaScript严格区分大小写 -->
<script>
    //1.定义变量   变量类型  变量名 
    var score = 71; 
    // alert(num); 
    // 2.条件控制
    if (score>60 && score<70){
    	alert("60~70") 
    }else if(score>70 && score<80){ 
    	alert("70~80") 
    }else{ 
    	alert("other") 
    }
</script>

浏览器调试必备须知
在这里插入图片描述

2.3、数据类型

数值,文本,图形,音频,视频。。。
变量
数据类型
数据类型
数据类型
浮点数问题
浮点数问题
在这里插入图片描述
对象
对象是大括号,数组是中括号~~

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

//Person person = new Person(1,2,3,4,5); 
var person = { 
    name:"qinjiang", 
    age: 3, 
    tags: ['js','java','web','...'] 
}

在浏览器调试

person.name 
> "qinjiang" 
person.age 
> 3

2.4、严格检查格式

设置位置

<head> 
    <meta charset="UTF-8"> 
    <title>Title</title> 
<!--
前提:IEDA需要设置支持ES6语法
'use strict';严格险查模式,预防JavaScript的随意性导致产生的一些问题,必须写在Javascript的第一行!
局演变量建议都使用 let 去定义~
-->
<script>
	'use strict' ;
	//全局变量
	let = 1;
	//ES6   let
</script>

</head>

use strict

3、数据类型详解

3.1、字符串

字符
console.log("\x41") ==> a
字符串
console.log(msg) ==> ‘你好呀,qinjiang’
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3.2、数组

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

var arr = [1,2,3,4,5,6]; //通过下标取值和赋值
arr[0]
arr[0] = 1

1、长度

arr.length

注意:加入给arr.ength赋值,数组大小就会发生变化-,如果赋值过小,元素就会丢失
2、indexOf,通过元素获得下标索引

arr.indexof(2)
1

字符串的“1”和数字 1 是不同的

arr = [0,1,1];

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

4、push(),pop()尾部

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

5、unshiift(),shiit()头部

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

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
常用的方法slice(截取),push(压入),pop(弹出),shift(压入首部),unshift(弹出首部),concat(拼接)

3.3、对象

在这里插入图片描述
JavaScript中的所有的键都是字符串,值都是任意对象
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3.4、流程控制

if 判断

var age = 3; 
if(age>3){ //第一个判断 
   alert('haha"); 
}else if(age<5) {  //第二个判断 
   alert("kuwa~"); 
}else { //否则, 
   alert("kuwa~"); 
}

while循环,避免程序死循环

while(age<100){ 
    age = age + 1; 
    console.log(age) 
} 
do{ 
    age = age + 1; 
    console.log(age) 
}while(age<100)

for循环

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

forEach 循环

var age = [12,3,12,3,12,3,12,31,23,123]; 
    //函数 
     age. ForEach(function (value) { 
     console.Log(value) 
 })

forEach是ES5.1引入的

for…in

//for(var index in object) { }
for(var num in age){ 
    if(age.hasownProperty(num)){ 
        console.log("存在") 
        console.log(age[num]) 
    } 
}

3.5、map和set

ES6的新特性~
Map
Set

3.6、iterator

ES6的新特性~

使用iterator来迭代Map和Set

在这里插入图片描述
在这里插入图片描述

4、函数

4.1、定义函数

在这里插入图片描述
在这里插入图片描述
function(x){…}这是一个匿名函数,但是可以把结果赋值给abs,通过abs就可以调用函数!
方式一和方式二等价
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
args[]
匿名函数
问题:arguments包含所有的参数,我们有时候想使用多余的参数来进行附加操作,需要排除已有参数~
rest
rest参数只能卸载最后面,必须用…标识(rest是自定义名称
function aaa(a,b,…like){
console.log(like);
}

4.2、变量的作用域

作用域
作用域
内部函数
内部函数
假设在JavaScript中,函数查找变量从自身函数开始。由“内”向“外”查找。
假设外部存在这个同名的函数变量。则内部函数会屏蔽外部函数的变量。
提升变量作用域
提升变量作用域
这个是在JavaScript建立之初就存在的特性,养成规范,所有的变量定义都放在函数的头部,不要乱放,便于代码维护。

规范
全局函数
全局对象
windows的使用
JavaScript实际上只有一个全局作用域,任何变量(函数也可以视为变量),假设没有在函数作用范围内找到,就会向外查找,如果在全局作用域都没有找到,报错 RefernceError

规范

我们所有的全局变量都会绑定到我们的windows上。如果不同的js文件。使用了相同的全局变量。冲突 ~ >如果能够减少冲突?
唯一全局变量
把自己的代码全部放入自己定义的唯一空间名字中,上面。啊降低全局命名冲突的问题.
(jQuery库)
局部作用域
let

常量const

在ES6之前,怎么定义常量:只有用最全部大写字母命名的变量就是常量,建议不要修改这样的值。

常量

4.3、方法

定义方法
在这里插入图片描述
在这里插入图片描述

5、内部对象

基本类型

5.1、基本语法

基本语法
转换

5.2、JSON

JSON
在JavaScript一切皆为对象,任何js支持的类型都可以用JSON来表示:number,String…
JSON
JSON和JS的区别

5.3、Ajax

Ajax

6、面向对象编程

在这里插入图片描述
原型:
原型
以前的继承
以前的继承
现在的继承
现在的继承
2、继承
ES6后的继承
本质:查看对象原型
原型

原型链

原型链

7、操作BOM对象(重点)

浏览器介绍
window
navigation
screen
location
document
cookie

8、操作DOM对象(重点)

核心

获得DOM节点

实例

获取对应的选择器
这种都是原生代码,往后尽量用jQuery();
更新节点

删除节点

删除节点
注意,删除多个节点的时刻,children是在时刻变化的,删除节点的时候一定要注意。

插入节点

获得了某个DOM节点,假设这个DOM节点是空的,通过innerHTML就可以增加一个元素了,但是这个DOM节点已经存在元素了,就会产生覆盖。
插入节点
效果:
效果

创建一个新的标签,实现插入

创建新标签
insertBefore

9、操作表单(验证)

表单

获取要提交的信息

提交表单信息
提交表单信息

提交表单,md5密码加密,表单优化(高级玩法 - hidden)

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- MD5工具类 -->
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<!-- 表单绑定提交事件
οnsubmit= 绑定一个提交检测的函数,true,false
将这个结果返回给表单,使用onsubmit接受 -->
    <form action="" method="POST" onsubmit="return aaa()">
        用户:<input type="text" id="uname" name="username" placeholder="用户名"/><br/>
        密码:<input type="password" id="pname" name="userpassword" placeholder="密码"/><br/>
        <input type="hidden" id="md5pwd" name="epassword"/>
        <button type="submit">提交</button>
    </form>
</body>

<script>
    function aaa(){
        var u = document.getElementById('uname');
        var p = document.getElementById('pname');
        var md5pwd = document.getElementById('md5pwd');
        md5pwd.value = md5(p.value);
        //可以校验判断表单内容,true就是通过提交,false是阻止提交
        return true;
    }
</script>
不用按钮提交,一般都用表单级别的提交 ← ← ← 刮刮乐

10、jQuery

获取jQuery - 公式:$(selector).action()

jquery
公式:$(选择器).事件(事件函数)

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- jQuery的cdn加速地址 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>
<body>
    <a href="" id="test-jquery">点我</a>

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

    </script>
</body>

选择器

选择器
文档工具站:https://jquery.cuishifeng.cn/

事件

鼠标事件,键盘事件,其他事件
鼠标事件
比如获取鼠标坐标:

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #divMove{
            width: 500px;
            height: 500px;
            border: 1px solid red; 
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>
<body>
    <!-- 要求:获取鼠标当前的一个坐标 -->
    mouse: <span id="mouseMove"></span>
    <div id="divMove">
        在这里移动试试:
    </div>
    <script>
       // 在网页加载完毕之后,响应事件
        $(function(){
            $('#divMove').mousemove(function(e){
                $('#mouseMove').text('x:'+e.pageX+'y:'+e.pageY)
            })
        });
    </script>
</body>

操作DOM

操作DOM节点
Ajax

> 小技巧

1、巩固JS

  • 看jQuery源码
  • 看游戏源码

2、巩固HTML

  • CSS —> 扒网站,全部下载下来,修改对应位置的样式,看效果
评论 13
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

夜里的雨

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值