JS 基础学习笔记（2021.10.24~25）

Javascript

Javascript

一、什么是JavaScript

JavaScript是世界上最流行的脚本语言

开发时间：10天

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

二、基本使用以及HelloWorld

1. 引用JavaScript：

内部引用

<script>
        //内部引用
        alert('hello world!')
</script>

外部引用

<script src="js/myjs.js">
    //外部引用
</script>

ps：不要自闭合
script标签必须成对出现，不要使用自闭合!

2. 基本语法

基本所有语法和Java都是相近的，这里不做过多解释。

一切的变量：var

var num = 1;

条件控制：同Java。

JavaScript严格区分大小写！

三、浏览器控制台使用

调试JavaScript：在浏览器的控制台。

打开方法：f12，或者右键浏览器点击检查、审查元素

在浏览器中控制台中选项卡console中可以直接执行JavaScript语句，并且可以访问网页中的变量等

console.log(变量);//和Java中System.out.println()一个效果

Source选项卡：可以查看目录结构和文件在其中查看源代码时可以设置JavaScript的断点

Network选项卡：网络资源

Application选项卡：将简单的Web数据可以存在网页中、可以访问Cookie等

四、数据类型快速浏览

变量：

不能数字开头，变量名命名规则同Java。

JavaScript不区分整数和浮点数：Number

123 //整数
123.1 //浮点数
1.123e1 //科学计数法
-99 //负数
NaN //Not a Number
Infinity //表示无限大

字符串

'abc';
"abc";//都可以

布尔值：

true;
false;

逻辑运算

&&; // 与
||; // 或
!; // 非

比较运算符：

==; // 类型不一样，值一样也会返回true
===; // 类型一样，值也一样才会返会true（一般使用这个）绝对等于

NaN与所有数值都不想等，包括自己

只能通过isNaN()来判断是否是NaN类型

浮点数问题：

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

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

Math.abs((1/3)===(1-(2/3))<0.000000001; // 近似相等

null和undefined

null 空
undefined 未定义

数组：

var arr = [1,2,2,true,"xiaowie"]; //保证可读性使用这个
new Array(1,2,3,4,"hello");

越界会产生undefined。

对象：

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

var person = {
    name: xiaowei99,//注意结尾时逗号，对象中是键值对
    age: 18,
    tags: ['js','java','c++'] // 最后一个属性不用加逗号
}

取对象的值

> person.age
> 18

五、严格检查模式strict

前提： IDEA需要设置ES6语法

在严格检查模式下，如果不按照最好的标准来定义变量或者使用方法，浏览器会报错

<script>
    //使用严格检查模式
    'use strict';//必须写在第一行
    //var i = 6;//推荐使用let
    let i = 6;
</script>

六、字符串类型详解

正常字符串我们使用单引号或者双引号包裹
转义字符加 \ 即可转义

1. 常用转义：

\'		//特殊字符
\t		//table键
\n		//换行
\u4e2d	//Unicode
\x41	//Ascii

2. 多行字符串编写：

let msg = `
nihao
hai
woshi xiaowei99
`

3. 模板字符串：

let name = 'xiaowei99';
let msg = `你好，${name}`; // 输出 你好，xiaowei99

4. 字符串长度：

str.length

5. 字符串的可变性：不可变

6. 字符串的大小写转换：

str.toLowerCase();
str.toUpperCase();

7. 获取指定下标：

str.indexOf()

8. 截取字符串：

str.substring(1) //截取下标1之后的所有字符
str.substring(1,3)  //截取下标1，2的字符串

七、数组类型详解

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

1. 长度，赋值可变化，赋值小元素会丢失

arr.length = 10;

2. indexOf，通过元素获得下标索引

arr.indexOf(3);

3. slice()，数组的substring()，截取Array的一部分

类似字符串。

4. push（压入尾部），pop（尾部弹出）

arr.push(1,2,3);
arr.pop();

5. unshift()（压入头部），shift() 头部（头部弹出）

同上。

6. sort()，排序

arr.sort()

7. reverse()，元素反转

arr.reverse()

8. concat()，拼接，返回新的数组，没有修改数组

arr.concat(1,2,3)

9. 连接符join()，打印拼接数组使用特定的字符串

arr.join('-')

数组：存储数据（如何存取，方法都可以自己实现）

八、对象类型详解

1. 定义对象

var person = { //键值对
    属性名: 属性值,
    属性名: 属性值,
    属性名: 属性值,
    ...
    属性名: 属性值
}

//例如
var person = {
    name: 'xiaowei',
    age: 13,
    sex: 'man',
    phone: '138xxxxxxxx'
}

2. 对象赋值

person.name = 'xiaohong'

使用一个不存在的对象属性，不会报错！undefined

3. 动态的删减属性

delete person.name;
person.xinshuxing = 'xinshuxing'; //直接给新的属性添加值即可

4. 查看是否对象中有这个属性

'age' in person
//继承
'toString' in person // true

JavaScript中对象所有的键都是字符串，值是任意数据类型

5. 判断这个属性是否是这个对象自身拥有的

person.hasOwnProperty('toString') //false

九、分支和循环讲解

forEach()循环

var arr = [1,12,12,6,3,2,65,1,3,2];
arr.forEach(function (value) { // value是循环的每个值
    console.log(value)
})

for in 循环

var arr = [1,12,12,6,3,2,65,1,3,2];

for (const index in arr) { //输出下标
    console.log(arr[index])
}

for of 循环

var arr = [1,12,12,6,3,2,65,1,3,2];

for (var x of arr) { // 输出内容
    console.log(arr[index])
}

十、Map和Set集合

Map：键值对

var m = new Map([['name','xiaowei'],['age',18],['sex','男'],['flag',true]]);
// 格式：new Map([ [], [], [] ])
m.get('name');//获取值
m.set('age',23);//设置值
m.get('age');
m.delete('flag');//删除键
m.set('newflag',false);//新增键
console.log(m);

Set：无序不重复集合

var s = new Set([9,5,4,6,7,1,22,2,2]);
s.has(6);//是否存在值为6的元素
s.add(99);
s.delete(2);
console.log(s);

十一、Iterable迭代练习

使用之前循环遍历的知识点自己练习。

十二、函数定义和参数获取

函数定义

方式一：

function abs(x) {
    if (x < 0){
        return -x;
    }
    return x;
}

方式二：

var abs = function (x){
    if (x < 0){
        return -x;
    }
    return x;
}

函数调用

console.log(abs(-10)) //输出函数返回的值
//单纯的调用函数：
abs(-10);

手动抛出异常

var abs = function (x){
    //手动抛出异常：关键字throw
    if (typeof x !== 'number'){
        throw '参数类型不为整数!';
    }
    if (x < 0){
        return -x;
    }
    return x;
}

console.log(abs(-10))

argument关键字：获得传进来的所有参数

function test(x,y) {
    console.log(arguments);
    console.log(arguments.length);
}
test(1,2,3,5,4,8,9,7,10);// 即使只有两个参数也能传其他的进来

发现问题：如果只需要没有明确标注出来的参数，处理起来很麻烦！

rest关键字：只获得没有明确标注的参数（ES6的新特性！）

function test(x,y,...rest) {
    console.log(arguments);
    console.log(arguments.length);
    console.log(rest);
    console.log(rest.length);
}

test(1,2,3,5,4,8,9,7,10);

十三、变量的作用域、let、const详解

变量作用域

函数内定义的var变量在函数外部不能使用

function test() {
    var x = 10;
    console.log(x);
}
console.log(x);// Uncaught ReferenceError: x is not defined

如果两个函数内部使用了同一个变量名，函数内部不会冲突

function test() {
    var x = 10;
    console.log(x);
}

function test1() {
    var x = 11;
    console.log(x);
}
test();
test1();

嵌套函数中，里层函数可以调用外层函数，反之则不能。

function test() {
    var x = 10;

    function test1() {
        var y = 11;
        console.log(x);
    }
    test1();
    console.log(y); //Uncaught ReferenceError: y is not defined
}

test();

内外函数使用了重名对象：查找变量时由内向外查找，找到哪个用哪个

function test() {
    var x = 10;

    function test1() {
        var x = 11;
        console.log('inner=>'+x);
    }
    test1()
    console.log('outer=>'+x);
}

test();

使用一个此时还没有定义的变量，如果这个变量在之后定义了，将会直接视为这个变量已经存在，但是值是undefined，知道它被赋值

function test1() {
    var x = 11 + y;
    console.log('inner=>'+x+'   y=>'+y);// inner=>NaN   y=>undefined
    var y = 10;
}

function test1() {
    var x = 11 + y;
    var y = 10;
    console.log('inner=>'+x+'   y=>'+y);// inner=>NaN   y=>10
}

习惯：把所有的变量先放到前面，用到谁才给它赋值

var a,b,c,d,g,f;//在开头定义好

全局函数

//全局变量
var x = 1;
alert(x);
alert(window.x);

全局变量全都绑定到window变量内

alert也是一个全局变量，绑定在window变量内，可以自己改动。

规范：由于所有的全局变量都绑定到window上，不同的js文件，可能会有变量名冲突，如何减少冲突？

需要自己定义你唯一一个自己使用的全局变量

//自己使用的全局变量
var XiaoweiUse = {};

XiaoweiUse.function1 = function (x){
    console.log(x);
}

let：解决var的局部作用域不严谨问题

function test(x) {
    for (var i = 0; i < 9; i++) {
        console.log(i);
    }
    console.log(i);//9
}
test()

function test(x) {
    for (let i = 0; i < 9; i++) {
        console.log(i);
    }
    console.log(i);//VM604:5 Uncaught ReferenceError: i is not defined
}
test()

const：常量，不能被修改的量（ES6引入）

用于一些特殊的量比如：PI、E、...等。

function test(x) {
    const PI = 3.14;
    PI = 5; // Assignment to constant variable.
}
test()

十四、方法的定义和调用、apply

定义在对象内的函数就是方法。

var xiaowei = {
    name : 'xiaowei',
    age : 22,
    bir : function () { // 这就是方法
        var nowDate = new Date();
        console.log('birthday=>'+(nowDate.getFullYear()-this.age)) // this就是当前对象
    }
}
xiaowei.bir();

this是指向当前调用方法的对象。this是无法指向的。

使用apply可以改变this的指向

function getBirthDay() {
    var nowDate = new Date();
    console.log('birthday=>'+(nowDate.getFullYear()-this.age))
}

var xiaowei = {
    name : 'xiaowei',
    age : 22
}

getBirthDay.apply(xiaowei,{});//第一个是对象，第二个是函数所需的参数

十五、Date日期对象

标准对象

string
number ps:NaN也是number
boolean
object
function
undefined

var now = new Date();
console.log(now.getDate());
console.log(now.getFullYear());
console.log(now.getDay());
console.log(now.getTime());
console.log(now.getHours());
console.log(now.getMonth());// 0~11
console.log(now.getMinutes());
console.log(now.getMilliseconds());
console.log(now.getUTCMonth());
console.log(now.toJSON());
console.log(now.toLocaleString());
console.log(now.toISOString());
now.setMonth(6)
console.log(now.toLocaleString());

十六、JSON对象

什么是json?

早期，所有传输都是使用xml文件

JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。
简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

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

格式：

对象用{}
数组都用[]
所有的键值对都使用时key：value

var user = {
    name: 'xiaowei99',
    age: 22,
    sex: '男'
};

//对象->JSON
let s = JSON.stringify(user);
console.log(s);

//JSON->对象
var parse = JSON.parse('{"name":"xiaowei99","age":22,"sex":"男"}');
console.log(parse);

Ajax

原生js写法 xhr 异步请求
jQuery 封装好的写法方法：$("#name").ajax("")
axios 请求

十七、面向对象原型继承

什么是面向对象？

JavaScript、Java、C#...面向对象；JavaScript有些区别！

类：模板

对象：具体的实例

JavaScript需要换思维

原型：类似继承

var user = {
    run:function () {
        console.log(this.name+' run...')
    }
};

var xw = {
    name : ' xiaowei',
    age : 22
}

xw.__proto__ = user;
xw.run();

十八、面向对象class继承

class继承

'use strict'


class User{  // 只能定义静态属性
    constructor(name) {
        this.name = name;
    }

    run(){
        console.log(this.name+' run');
    }
}

var xiaowei = new User('xiaowei');
console.log(xiaowei.run());

class VIPUser extends User{
    constructor(name,level){
        super(name); //必须使用父类构造器
        this.level = level ;
    }

    MyVIPLevel(){
        console.log(this.level);
    }
}
var xiaowei99 = new VIPUser('xiaowei99',99)
xiaowei99.MyVIPLevel();
console.log(xiaowei99)

原型链

原型链指向自己的父类原型，直到指向object类之后，object类永远指向自身。

十九、操作BOM对象

浏览器介绍

JavaScript和游览器的关系

javascript诞生就是为了能够让他在游览器中运行

BOM：游览器对象模型

IE 6~11
Chrome
Safari
FireFox

第三方

QQ游览器
360

window

window 代表游览器窗口

window.alert(1)window.innerHeight
window.innerwidth
window.outerHeight
window.outerWidth//大家可以调整浏览器窗口

Navigator

Navigator，封装了游览器的信息

navigator.appName
navigator.appVersion
navigator.userAgent
navigator.platform

大多数时候，我们不会使用navigator对象，因为会被人为修改~

不建议使用这些属性来判断和编写代码

screen

screen.width
screen.height//代表屏幕尺寸

location（重要）

location代表当前页面的URL信息

assign: ƒ assign() // 跳转页面
host: "www.bilibili.com"
hostname: "www.bilibili.com"
href: "https://www.bilibili.com/"
protocol: "https"
location.assign("www.baidu.com")
reloadLf reload() //刷新网页

document

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

document.titledocument.title='ding'

获取具体的文档树节点

<body>
    <dl id="app">    
        <dt>java</dt>    
		<dd>python</dd>    
		<dd>ding</dd>
</dl>
</body>
<script>    
    var dl = document.getElementById('app');
</script>

获取cookie

document.cookie
"buvid3=03C9C720-75F8-4A3D-8DC3-587D974B9200155839infoc; LIVE_BUVID=AUTO7715844122912698; rpdid=|(u)YY|)lmk)0J'ul)RRukkmk; blackside_state=1; fingerprint3=332dfefa91876e157006cc725900544e; buivd_fp=03C9C720-75F8-4A3D-8DC3-587D974B9200155839infoc; fingerprint_s=e30ec087f9e0324eec584213ae76ba8c; dy_spec_agreed=1; buvid_fp=03C9C720-75F8-4A3D-8DC3-587D974B9200155839infoc; buvid_fp_plain=03C9C720-75F8-4A3D-8DC3-587D974B9200155839infoc; _uuid=4BA71DA4-79F0-B49D-DD8B-D638C8C82AD888699infoc; CURRENT_QUALITY=80; fingerprint=40a469386996b3e74fe16dbacc28f682; bili_jct=f2a8b9f17847b3cb8728541a0163baf7; DedeUserID=79886812; DedeUserID__ckMd5=177c95c98069c6c7; sid=7iz5xy4f; CURRENT_FNVAL=976; bp_video_offset_79886812=585162738303815410; bp_t_offset_79886812=585162738303815410; PVID=1; innersign=0"

*** 劫持cookie原理：***

植入一段js代码，里面有可能有获取cookie的代码，这样就可以获取cookie。

服务器端可以设置cookie：httpOnly

history

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

二十、获得DOM节点

核心

浏览器文档就是树形结构！

更新：更新DOM节点
遍历DOM节点：得到DOM节点
删除：删除一个DOM节点
添加：添加一个新的节点

要操作DOM节点，就要获得DOM节点。

var id1 = document.getElementById('hh1');  // 通过id查找
var id2 = document.getElementsByName('username'); // 通过name属性查找
var id3 = document.getElementsByClassName('username'); // 通过class查找
var id4 = document.getElementsByTagName('h1'); // 通过标签名查找
id1.firstChild;
id1.parentElement;
...

这是原生代码，以后用jQuery。

二十一、更新DOM节点

var id1 = document.getElementById('hh1');  // 通过id查找
id1.innerText = '123'; //修改文本值
id1.innerHTML = '<strong> 123 </strong>' //修改html
id1.style.color = 'red';
id1.style.fontSize = '2em'; // 驼峰命名

二十二、删除DOM节点

删除元素：获取父元素节点，使用父元素节点删除节点

var id1 = document.getElementById('father');
id1.removeChild('f1');

var id1 = document.getElementById('f1');
var parentElement = id1.parentElement;
parentElement.removeChild('f1');	

var id1 = document.getElementById('f1');
var parentElement = id1.parentElement;
parentElement.removeChild(id1.children[0]);

二十三、更新和创建DOM节点

innerHTML 可以在空节点内放入一个新的节点，但是如果哪个节点不是空的，则会覆盖了。

追加：append方法，在父元素上使用appendChild

<p id="js">biancheng</p>
<div id="list">
    <p id="se">javascript</p>
    <p id="ee">java</p>
    <p id="py">python</p>
</div>
<script>
    var js = document.getElementById('js');
    var list = document.getElementById('list');
    list.appendChild(js); //追加到后面
</script>

创建标签并且加入，使用document.createElement('p')...

 var js = document.getElementById('js');   //已经存在的节点
var list = document.getElementById('list');
// 通过js 创建一个新的节点
var newp = document.createElement('p'); //创建一个P标签
newp.id = 'newp';
newp.innerText = 'hello,ding';
list.appendChild(newp)

// 可以创建一个Style标签
var mystyle= document.createElement('style');
mystyle.setAttribute('type','text/css');
// 设置标签内容
mystyle.innerHTML = 'body{background-color: #ffeb3b}'; 
document.getElementsByTagName('head')[0].appendChild(mystyle)

var ee = document.getElementById('ee');
var py = document.getElementById('py');
 var list = document.getElementById('list');
 //要包含的节点，insertBefore（new，target）
list.insertBefore(py,ee);

二十四、获得和设置表单的值

表单是啥 form DOM 树

文本框
密码框
多选框
...

表单的目的：提交信息

<form action="post">
    <p>
        <span>用户名：</span><input type="text" id="username">
    </p>
    <!--多选框的值，就是定义好的-->
    <p>
        <span>性别：</span>
        <input type="radio" name="sex" value="boy" id="boy"> 男
        <input type="radio" name="sex" value="girl" id="girl"> 女
    </p>
</form>
<script>
    var input_text = document.getElementById('username')
    var boy_radio = document.getElementById('boy')
    var girl_radio = document.getElementById('girl')
    //得到输入框的值
    //修改输入框的值
    input_text.value = '123'
    //对于单选框，多选框等等固定的值，boy_radio.value 只能取到当前的值
    boy_radio.checked; //查看返回的结果，是否为true，如果为true 则这个被选中
    girl_radio.checked = true;
</script>

二十五、表单提交验证及前端密码MD5加密

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个JavaScript网页</title>
    <!--<script>
        //内部引用
        alert('hello world!')
    </script>-->


<!--    <script src="js/myjs.js">
        //外部引用
    </script>-->
    <!--注意：script标签必须成对出现，不要使用自闭合-->
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.js"></script>

    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>

    <script>
        function sub() {
           var pwd = document.getElementById('pwd').value;
           var newpwd = md5(pwd);
           console.log(pwd);
           console.log(newpwd);
        }
    </script>


</head>
<body>
<div id="father">
    <form action="#">
        <p>用户名：<input id="name" type="text"></p>
        <p>密码：<input id="pwd" type="password"></p>
        <p><button type="button" onclick="sub()">提交</button></p>
    </form>

</div>

</body>
</html>

二十六、初识jQuery及公式

javascript

jquery库，里面存在大量的javascript函数

获取jquery

https://www.bootcdn.cn/jquery/

<!DOCTYPE html>
<html lang="en">
    <head>    
        <meta charset="UTF-8">    
        <title>Title</title>    
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>	</head>
    <body>
    </body>
</html>

公式：$( '选择器 ').动作事件()

$('#father').click(function(){ //同css 选择器格式
    alert('first jQuery code')
})

二十七、jQuery选择器

$('这里和css选择器一样的').click()

二十八、jQuery事件

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.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>
    //当网页元素加载完毕之后，响应事件
    $(function () {
        $('#divMove').mousemove(function (e) {
                $('#mouseMove').text('x:'+e.pageX + 'y:'+e.pageY)
        })
    })
</script>
</body>
</html>

二十九、jQuery操作Dom元素

节点文本操作

$('#test-ul li[name=python]').text();    //获得值
$('#test-ul li[name=python]').text('设置值');//设置值
$('#test-ul').html();    //获得值
$('#test-ul').html('<strong>123</strong>');  //设置值

css的操作

$('#test-ul li[name=python]').css("color","red")

元素的显示和隐藏,本质display：none；

$('#test-ul li[name=python]').show()$('#test-ul li[name=python]').hide()

娱乐测试

$(window).width()$(window).height()$('#test-ul li[name=python]').toggle();

知识来源：kuangstudy.com

posted @ 2021-10-25 22:30 小阴辨阅读(113) 评论(0) 收藏举报

刷新页面返回顶部

小阴辨

JS 基础 学习笔记（2021.10.24~25）