JavaScript学习笔记

1、快速入门

1.1 引入JavaScript

内部标签引入
```
<script>
	//内容
</script>
```

外部标签引入

1.js文件

//内容

test.html

<script src = "1.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/1.js"></script>

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

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

</body>
</html>

1.2 基本语法入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        // 1. 定义变量 var 变量名 = 变量值;

        var score = 1;
        alert(score);
        // 2. 条件控制和Java一样
        // 3. JavaScript严格区分大小写

        console.log(score) //在浏览器的控制台打印变量
        
    </script>

</head>
<body>

</body>
</html>

1.3 数据类型

数值、文本、图形、音频、视频...

number

js 不区分小数和整数，都是用 number 类型

123 // 整数123
123.1 // 浮点数123.1
1.123e3 // 科学计数法
-99 // 负数
NaN // not a number
Infinity //无限大的数

字符串

'abc'
"abc"

布尔值

true
false

逻辑运算

&&	与 
||	或
!	非

比较运算符

= //赋值
== //等于（类型不一样，值一样，也会判断true）
=== //绝对等于 （类型一样，值一样，才能时true）

特殊点：

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

浮点数问题：

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

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

console.log(Math.abs(1/3-(1-2/3)<0.000000001)); //false

null 和 undefined

null 空，定义了没有值
undefined 未定义

数组

一些相同类型数据的集合，JavaScript不需要相同。

//保证代码可读性，尽量使用[]
var arr = [1,2,3,'hello',null,true];

new Array(1,2,3,'hello',null,true);
//如果数组下标越界不会报错，但是会显示未定义（undefined）

对象

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

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

var person = {
    name: "七曜",
    age: 3,
    tags: ['js','java','web']
}

取对象的值：

person.name
"七曜"

严格检查模式

'use strict'  //严格检查模式，必须是ES6语法
// var 全局变量 let 局部变量 , 局部变量建议尽量用 let 定义

let i = 1;
var person = {
    name: "七曜",
    age: 3,
    tags: ['js','java','web']
}

2、数据类型

2.1 字符串

正常字符串我们使用单引号或者双引号包裹
注意转义字符的使用 \

多行字符串书写

'use strict'

//注意下面的单引号是tab键上面的符号
var = `hello
	多行书写
	字符串`

模板字符串

let name = '秦宁';
let age = 18;

//还是同用tab键上面的键
let msg = `姓名：${name}，年龄：${age}`
console.log(msg)

字符串长度

str.length
//可以用下标取值，但是使用下标修改值是不行的，因为字符串的不可变性。

大小写转换

str.toUpperCase()
str.toLocaleLowerCase()

获取字符串中单个字符出现的位置

str.indexOf('t')

截取字符串

//substring 包含左不包含右
str.substring(1,3)

2.2 数组

Array可以包含任意的数据类型，可以通过下标取值和赋值

长度

arr.length
//可以给arr.length赋值，如果赋值大于本身长度，多余的部分会显示为定义，但占有长度，如果低于初始长度，会去除多余长度的数组元素，所以使用时需要注意值。

indexOf,通过元素获取下标索引
slice() 截取Array的一部分，放回一个新数组，类似于string中的substring()

push(),pop() 从数组的后面加入删除元素

arr.push('a')//压入尾部
arr.pop() //弹出尾部的一个元素

unshift()，shift() 从数组的头部添加或删除元素

arr.unshift('a')//压入头部
arr.shift() //弹出头部的一个元素

排序 sort()

arr.sort()

元素反转

arr.reverse()

concat() 将新数组加入原数组，但是不改变原数组，而是返回一个新数组
连接数组 join，对数组的元素与元素之间添加连接符

arr.join('-')

2.3 对象

定义对象

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

var = person{
    name: '朝阳',
    age: 18,
    score: 100
}

对象赋值

person.name = '力宏';

使用一个不存在的对象属性，不会报错！underfned
动态删除对象属性

delete person.name

动态的添加

person.sex = '男'

判断属性值是否在属性中

//因为js中所有对象的键都是字符串,所有age需要加单引号
'age' in person

判断一个属性是否属于自身拥有的 hasOwnProperty()

person.hasOwnProperty('age')

2.4 Map 和 Set

Map:

// Map类似于python中的字典
var map = new Map([['tom',100],['jack',90]); //定义map
var name = map.get('tom');	//通过map的键，获取map对应键的值.
map.set('朝阳',60);	//向map对象加入一个元素
map.delete('tom'); 	 //删除map对象的一个元素

Set:

var set = new Set([4,3,1,6,6,6]) //定义Set Set集合可以去重
set.add(2);  // 向set添加一个元素
set.delete(2);	// 向set删除一个元素
set.has(2); 	//判断元素是否在set中，放回值是布尔值

迭代Map 和 Set 使用 for...of 迭代

3、流程控制

if while do...while for 循环和 Java 一样，不做过多讲解

3.1 foeEach 循环

var age = [1,32,434,65,656,656,545,33];

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

3.2 for...in 循环

//因为获得的num是下标，所有拿到的时候需要用age[num]
for(var num in age){
    console,log(age[num]);
}

3.3 for...of 循环

for(var num of age){
    console.log(num);
}

4、函数及其面向对象

4.1 定义函数

// 由于js中不需要明确变量类型，使用定义函数时，可以不加放回值类型
function 函数名(){
    函数体;
    return *;
}
//如果没有return语句，执行完也会自动return，返回值是undefined
// 函数类似于Java中的方法，只不过方法是放在对象中，函数可以存在外面。

//这里是第二种定义方法，和上面一样
var 函数名 = function(){
    函数体;
    return *;
}

4.2 调用函数

函数名();  //具体有参数就传入参数，
//参数问题，可以传递任意参数，也可以不传，参数多余时，取前面。
//因为不传也不会出错，使用一般需要传入参数时，在函数体中添加参数判断语句

4.3 arguments

arguments 是js免费赠送的关键字；

代表传递进来的所有参数，是一个数组。

4.4 rest

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

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

function a(a,b...rest){
    console.log(a);
    console.log(b);
    console.log(rest);
}

4.5 变量的作用域

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

假设在函数体中声明，则在函数体外不能使用。

function a(){
    var x = 1;
    x = x + 1;
}

x = x + 1;   //报错

在不同函数中使用同样的变量不会报错。
内部函数可以访问外部函数的变量，反之则不行。
假设内部函数变量和外部函数重名，则利用 双亲委派机制，函数查找变量从自身开始。在向上查找。

JavaScript 会自动提升作用域，即使不定义，也会自声明，不过不会赋值，所以，我们需要养成习惯，先定义后使用。

全局函数

全局对象 window，默认所有的全局变量都会绑定到 window 对象下。

var x= 'xxx';
alert(x);
alert(window.x);

JavaScript 实际上只有一个全局作用域，任何变量，假设没有函数的作用范围内找到。就会向外查找如果全局作用域都没有找到，报错 RefrenceError

规范

由于我们所有的全局变量都会绑定到我们的 window 上。如果使用不同的 js 文件，使用相同的全局变量，就会产生冲突。

定义唯一全局变量

var XXX = {};  //唯一全局变量

//定义全局变量,并绑定到全局变量上
XXX.name = 'aaa';
XXX.a = function(a){
    return a
}

局部作用域 Let

function a(){
    for(var i = 0; i < 100; i++){
        console.log(i);
    }
    console.log(i+1);   //会打印101，所有这里有问题。
    // ES6新特性 ，最好使用 Let 代替 var 
}

常量 const

在 Es6 之前，只能使用大写字母表示，ES6 之后使用 const 代表常量。

const PI = '3.14';
console.log(PI);
PI = '123'  //报错

4.6 方法

和函数相同，只不过是放在对象当中。对象当中只有：属性和方法

'use strict'  //严格检查模式，必须是ES6语法
var test = {
    name: '沉浮',
    bith: 2000,
    //以下是方法
    age: function (){
        var now = new Date().getFullYear();
        return now - this.bith;
    }
}
//属性
test.name;
//方法，一定要带()
test.age();

以上代码的另一种写法

'use strict'  //严格检查模式，必须是ES6语法
function getAge(){
    var now = new Date().getFullYear();
    return now - this.bith;
}

var test = {
    name: '沉浮',
    bith: 2000,
    //以下是方法
    age: getAge
}
//属性
test.name;
//方法，一定要带()
test.age();

apply

在 js 中可以控制 this 指向，利用apply 所有的函数都有的属性

'use strict'  //严格检查模式，必须是ES6语法
function getAge(){
    var now = new Date().getFullYear();
    return now - this.bith;
}

var test = {
    name: '沉浮',
    bith: 2000,
    //以下是方法
    age: getAge
}
//apply 属性，前一个参数代表指向的对象，后一个是方法需要传入的参数。
getAge.apply(test,[]);

5、常用对象

5.1 Date

基本使用

var now = new Date(); //Sat Jan 01 2021 10:45:06 GMT+0800 (中国标准时间)
now.getFullYear();
now.getMonth();
now.getDate();
now.getDay();
now.getHours();
now.getMinutes();
now.getSeconds();
now.getTime(); //时间戳 全世界统一 1970 1.1 0:00:00 毫秒数
console.log(new Date(1578106175991))    //时间戳转为时间

转换

now.toLocaleString(); 
now.toLocaleString();

5.2 JSON

在 JavaScript 一切皆对象，任何支持的类型都可以用 JSON 表示；

格式：

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

var test = {
    name: '沉浮',
    bith: 2000,
}


var json = JSON.stringify(test);    //将对象转换为json字符串

var obj = JSON.parse(json);   //将json转换为对象
var obj1 = JSON.parse('{"name":"沉浮","bith":2000}');   //将json转换为对象

6、面向对象编程

6.1 什么是面向对象

JavaScript、Java、C#....等都是面向对象；JavaScript有些区别

类：模板
对象：具体的实例

在 JavaScript 这个需要大家换一下思维方式。

原型：和 Java 的继承一样，使用 proto

var Student{
    name: '红花',
    age: 20,
    run: function(){
        console.log(this.name+ "run...");
    }
}
var xiaoming = {
    name: "小明"
}

xiaoming.__proto__ = Student;
//小明对象获取了Student类的对象的所有属性

class 继承

class 关键字，是在 ES6 引入的

'use strict'  //严格检查模式，必须是ES6语法
class Student{
    constructor(name,age) {  //注意这里是构造器，不需要提前定义 new 的时候只需要传入相应的参数即可
        this.name = name;
        this.age = age;
    }
    hello(){

        console.log(this.name + '你好呀！')
    }
}
var student = new Student("小孩",2);
student.hello();

class xiaoxuesheng extends Student{
    // 继承学生的所有属性
}

JavaScript 的继承属于原型继承，即在Object类一直重复继承。

7、操作Bom元素

操作浏览器对象

window 代表浏览器的窗口

window.alert(1)
undefined
window.innerHeight //获取内边框高度
394
window.innerWidth  // 获取内边框宽度
1536
window.outerHeight // 获取外边框高度
824
window.outerWidth	// 获取外边框宽度
1536

Navigator 封装浏览器的信息

// 大多数不会使用 navifator 对象，因为可以修改
navigator.appName	// 
"Netscape"
navigator.appVersion
"5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.150 Safari/537.36 Edg/88.0.705.63"
navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.150 Safari/537.36 Edg/88.0.705.63"
navigator.platform
"Win32"

scree 屏幕对象

screen.width
1536
screen.height
864

location 重点

host: "www.bilibili.com"
href: "https://www.bilibili.com/"
protocol: "https:"
reload:f reload()  //刷新网页
localtion.assign(’https://www.baidu.com/‘)//设置新的地址,注意单引号不能少。

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

document.title = "您好呀，JavaScript";
//改变网页head中的标题

获取具体的文档数节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="div">
        <ul class="box1">
            <li >Java</li>
            <li>JavaScript</li>
            <li>javaSE</li>
        </ul>
    </div>

    <script>
        console.log(document.getElementById('div'));    // id选择器获取文档节点
        console.log(document.getElementsByClassName('box1'));   // 类选择器获取文档节点
        console.log(document.getElementsByTagName('div'));  //标签选择器获取，文档节点
        var div = document.getElementById('div');
		var divchildren = div.children;  //获取父节点下的所有子节点
		// div.fristChild  获取div下的第一个
		// div.lastChild 获取div下的最后一个
    </script>
</body>
</html>

获取 cookie

document.cookie
"Hm_lvt_aec699bb6442ba076c8981c6dc490771=1607593328"
// cookie 可以设置httpOnly，防止恶意获取cookie

history 网页前进，后退

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

8、操作Dom元素

DOM：文档对象模型

更新节点

<body>
    // 更新文本，操作CSS
    <div id="id1"></div>
    <div id="id2"></div>
    <script>
        var id1 = document.getElementById('id1');
        // 给选中的标签设置文本值
        id1.innerText = '456';
        id1.style.color = 'red';
        id1.style.fontSize = '20ps';
        id1.style.padding = '1em';
        var id2 = document.getElementById('id2')
        // 给选中的标签设置HTML的文本内容，可以解析HTML
        id2.innerHTML = '<strong>加粗</strong>';
    </script>
</body>

删除节点

// 先获取父节点，通过父节点删除自己
var self = document.getElementById('id1');
var father = self.parentElement;
father.removeChild(self);
//标准删除格式
father.removeChild(father.children[0]);
// 删除节点是一个动态的过程，一般下标会因为删除刷新，所有不建议使用多个下标同时删除；

插入节点

/*	我们获得的Dom节点，假设这个dom节点是空的，可以使用innerHTML 或 innerText 增加元素，但是如果有元素，就会覆盖，使用不能使用。只能使用追加的方法插入节点。
*/
father.appendChild('id2');  // id2 是已存在的节点
// 通过js创建节点
var newp = document.createElement('p'); 创建标签
newp.id = 'newp';   // 给标签设置id
newp.innerText = 'hello JavaScript' //给标签设置文本
father.appendChild(newp);

// 创建一个标签节点
var myScript = document.createElement('style');  //创建style标签
myScript.setAttribute('type','text/javascript'); //给创建的标签设置属性
// 创建一个style标签
var myStyle = document.createElement('style'); // 创建一个空的stle标签
myStyle = setAttribute('type','text/css');
myStyle.innerHTML = 'body{background-color: 'red'}';
document.getElemrntsByTagName('head')[0].appendChild(myStyle)

// insert 插入节点
var new = document.getElementById('new');
var id2 = document.getElementById('id2');
var list = document.getElementById('list');

list.insertBefore(new,id2)  //将新节点插入list中的id2的前面

9、操作表单

表单的目的：提交信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="#" method="post">
    <span>用户名：</span> <input type="text" id="username">

    <p>
        <span>性别：</span>
        <input type="radio" name="sex" value="男" id="man" checked>男
        <input type="radio" name="sex" value="女" id="woman">女
    </p>
</form>
<script>
    var username = document.getElementById('username');
    var man = document.getElementById('man');
    var woman = document.getElementById('woman');

    // 对于单选框，或者多选框，用 man.checked;查看是否选中，选中返回 true 未选中返回 false
    console.log(man.checked);
    console.log(man.checked);

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

提交表单，md5加密密码

md5js使用
导入js
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.js"></script>
使用md5 只好使用隐藏域提交，可以增加安全性
md5(加密值);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--MD5 工具类的JavaScript-->
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.js"></script>

<body>
<!--利用表单提交，验证函数后使用 return aa() 通过函数的返回值,判断是否提交成功-->
<form action="#" method="post" onsubmit="return aa()">
    <p>
        <span>用户名：</span>
        <input type="text" id="username" name="username">
    </p>
    <p>
        <span>密码：</span>
        <input type="password" id="pwd">
    </p>

<!--    使用隐藏域，防止被网络抓包 同时也能防止在提交瞬间，密码长度的改变-->
    <input type="hidden" id="md5-passwd" name="passwd">
    <!--    点击提交绑定事件-->
    <input type="submit">
</form>

<script>
        function aa(){
            var username = document.getElementById('username');
            var pwd = document.getElementById('pwd');
            var md_pwd = document.getElementById('md5-passwd');
            md_pwd.value = md5(pwd.value);

            // 是否提交通过 ,
            return false;
        }
</script>
</body>
</html>

10、jQuery

文档在线工具：https://jquery.cuishifeng.cn/

使用 jQuery

官网下载jQuery库导入或网络搜索 CDN jQuery获取在线链接导入
使用方法 $(选择器).触发事件(函数或方法)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script crossorigin="anonymous" integrity="sha512-WNLxfP/8cVYL9sj8Jnp6et0BkubLP31jhTG9vhL/F5uEZmg5wEzKoXp1kJslzPQWwPT1eyMiSxlKCgzHLOTOTQ==" src="//lib.baomitu.com/jquery/3.5.1/jquery.js"></script>

<body>
<a href="#" id="test">点我</a>
<script>
    $('#test').click(function (){
        alert('jQuery');
    })
</script>
</body>
</html>

事件

事件有鼠标事件，键盘事件，屏幕事件很多具体查看开发文档

操作 Dom

节点文本操作

$('#test').text(); //获取值
$('#test').text('a'); //设置值
$('#test').html(); //获取值
$('#test').html('<strong>a</strong>'); //设置值

css操作

$('#test').css({"color": "red"})

元素的显示与隐藏

$('#test').show();	//显示
$('#test').hide();	//隐藏
//本质还是将元素的CSS中的 display设置为 none

看 jQuery 源码，看游戏源码，学会趴网站

Layer 弹窗组件：https://layer.layui.com/

Element-ui：https://element.eleme.cn/#/zh-CN/component/installation

Ant Design：https://ant.design/index-cn

posted @ 2021-02-16 22:07 橘子有点甜阅读(66) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

阅读排行：
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· 上周热点回顾（2.24-3.2）

公告

昵称：橘子有点甜
园龄： 4年1个月
粉丝： 4
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

橘子有点甜