JavaScript学习笔记

1、快速入门

1.1 引入JavaScript

  1. 内部标签引入

    <script>
    	//内容
    </script>
    
  2. 外部标签引入

    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 字符串

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

  2. 注意转义字符的使用 \

  3. 多行字符串书写

    'use strict'
    
    //注意下面的单引号是tab键上面的符号
    var = `hello
    	多行书写
    	字符串`
    
  4. 模板字符串

    let name = '秦宁';
    let age = 18;
    
    //还是同用tab键上面的键
    let msg = `姓名:${name},年龄:${age}`
    console.log(msg)
    
  5. 字符串长度

str.length
//可以用下标取值,但是使用下标修改值是不行的,因为字符串的不可变性。
  1. 大小写转换
str.toUpperCase()
str.toLocaleLowerCase()
  1. 获取字符串中单个字符出现的位置
str.indexOf('t')
  1. 截取字符串
//substring 包含左不包含右
str.substring(1,3)

2.2 数组

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

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

  2. slice() 截取Array的一部分,放回一个新数组,类似于string中的substring()

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

    arr.push('a')//压入尾部
    arr.pop() //弹出尾部的一个元素
    
  4. unshift(),shift() 从数组的头部添加或删除元素

arr.unshift('a')//压入头部
arr.shift() //弹出头部的一个元素
  1. 排序 sort()
arr.sort()
  1. 元素反转
arr.reverse()
  1. concat() 将新数组加入原数组,但是不改变原数组,而是返回一个新数组

  2. 连接数组 join,对数组的元素与元素之间添加连接符

arr.join('-')

2.3 对象

  1. 定义对象
var = 对象名 {
    属性名: 属性值,
    属性名: 属性值,
    属性名: 属性值
}

var = person{
    name: '朝阳',
    age: 18,
    score: 100
}
  1. 对象赋值
person.name = '力宏';
  1. 使用一个不存在的对象属性,不会报错!underfned

  2. 动态删除对象属性

delete person.name
  1. 动态的添加
person.sex = '男'
  1. 判断属性值是否在属性中
//因为js中所有对象的键都是字符串,所有age需要加单引号
'age' in person
  1. 判断一个属性是否属于自身拥有的 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使用

  1. 导入js

    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.js"></script>
    
  2. 使用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

  1. 官网下载jQuery库导入或网络搜索 CDN jQuery获取在线链接导入
  2. 使用方法 $(选择器).触发事件(函数或方法)
<!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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值