JavaScript学习过程

最新推荐文章于 2023-05-06 03:11:23 发布

xxy1312

最新推荐文章于 2023-05-06 03:11:23 发布

阅读量668

点赞数 1

本文链接：https://blog.csdn.net/xxy1312/article/details/117628669

版权

语法

严格检查模式，预防JavaScript的随意性导致的一些问题

使用 use strict 必须写在第一行

'use' strict

 局部变量建议使用let定义
 
 //javasript中两个=表示值相同，不同类型也可以为true
 //三个= 表示值类型都相同  尽量使用   ===  来表示相等
 //undefined 未定义

数据类型

1.字符串

使用`` 包裹字符串可以写多行

  var msg=`sdsd
aas
jiana `;

转大写小写

console.log(str.toUpperCase());
console.log(str.toLowerCase());

查询字符第一次出现的位置

console.log(str.indexOf('a'));

截取字符串

//str.substring截取下标1~3  从第一个开始截取
console.log(name.substring(1,3))
console.log(name.substring(1))

2.数组

JavaScript中数组可以包裹不同的元素

var arr=[1,2,3,4,null,'string',true];

获取，改变数组的长度，下标索引截取数组类似于substring

console.log(arr.length);
// arr.length 改变数组长度 如果长度过小，元素会丢失
arr.length=10

//indexOf() 通过元素获得下标索引
arr.indexOf(3);

// slice 截取数组的一部分 类似于字符串的 substring
arr.slice(2,3);

push() ,pop 在数组尾部添加或删除一个元素

//push() 添加一个元素到数组尾部
arr.push('a');

//从数组末尾删除一个元素
arr.pop();

unshift() ,shift() 在数组头部添加或删除一个元素

//unshift() shift() 头部添加或删除一个元素  
arr.unshift('b');

arr.shift()

数组排序 sort() reverse() 拼接数组 arr.concat([123,5458,8]);

// 排序 sort()
arr.sort();
//倒序 reverse()
arr.reverse()
// 拼接 concat 并不会修改数组，只是会返回一个新的数组
arr.concat([123,5458,8]);

3.对象

var person={
    属性名:属性值，
    属性名:属性值，
    属性名:属性值，
    属性名:属性值
}


//定义了一个对象，有三个属性
var person={
    name:"zxq1",
    age:18,
    arr:['a1',2,35,"sdasd",'asd',null,true]
};

console.log(person.name);

JS中对象，{…}表示一个对象，键值对描述属性

JavaScript 中属性名是字符串，属性值是任意对象

1.对象赋值

person.name="jskdja";

2.动态的删除，添加属性

delete person.ha
true

person.ha='hah'
"hah"
person
Object { name: "zxq1", age: 18, arr: (7) […], ha: "hah" }

3.判断属性值在这个对象中

age in person
false

'age' in person
true

//继承
'toString' in person
true

4.判断一个属性是否是这个对象自身拥有的 hasOwnProperty()

person.hasOwnProperty('age');
true

person.hasOwnProperty('toString');

false

4.流程控制

if 语句，while 语句， for 循环与java 相同

forEach()循环

arr.concat([123,5458,8]); 
//函数
var age=[12,3,5,215,15,5];
age.forEach(function (value){
    console.log(value);
})

for…in


//for ( var index in object[]){}
//num为数组的索引
for (var num in age) {
    console.log(age[num]);
}

for …of

//for(var value of object[]){}
//value为数组中的值
for(var value of set){
    console.log(value)
}

5.Map和Set

ES6 的新特性

Map:

//学生成绩
// var name=['zhangsa','lisi','wangw'];
// var score=[100,80,90];
var map=new Map([['zhangsa',100],['lisi',80],['wangw',90]]);
console.log(map.get('zhangsa'));	//通过key获得value
map.set('admin',86);	//新增或修改
map.set('admin',85);
map.delete('admin');	//删除

Set:无序不重复的集合

var set=new Set([3,1,1,1]);//set自动去重
set.add(2);		//添加
set.delete(1);	//删除
set.has(3);		//是否包含某个元素

6.iterator

遍历数组

for(var value of set){
    console.log(value)
}

遍历Map

var map=new Map([['zhangsa',100],['lisi',80],['wangw',90]]);
for(let x of map){
    console.log(x);
}

遍历Set

var set=new Set([5,6,8]);
for(let x of set){
    console.log(x);
}

函数

1.函数定义

定义方式一

绝对值函数

//绝对值函数
function abs(x){
    if(x>=0){
        return x;
    }else{
        return -x;
    }
}

一旦执行return 代表函数结束返回结果

如果没有执行return 函数执行完也会返回结果 undefined

定义方式二

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

参数问题

如果不传入参数

function abs(x){
    //手动判断 抛出异常
    if(typeof x!=="number"){
        throw 'Not a Number';
    }
    if(x>=0){
        return x;
    }else{
        return -x;
    }
}

arguments关键字

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

 function abs(x){
        for(var i=0;i<arguments.length;i++){
            console.log(i);
        }
	    if(arguments.length>1){
            console.log(arguments[1]);
        }
        if(x>=0){
            return x;
        }else{
            return -x;
        }
    }

问题arguments包含所有参数，有时候想使用多余的参数进行附加操作，需要排除已有参数

rest 获取除了已经定义的参数外的所有参数

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

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

2.变量的作用域

在JavaScript中 var定义变量是有作用域的

在函数体中定义的变量，在函数外是不能用的

function a1(){
    var x=1;
    x=2;
}
// x=3;Uncaught ReferenceError: assignment to undeclared variable x

如果两个函数使用了相同的变量名，只要在函数体内就不冲突

function a1(){
    var x=1;
    x=2;
}
function a2(){
    var x=3;
}

内部可以访问外部成员，反之不行

内部函数变量与外部函数变量重名

function a1(){
    var x=1;
    x=2;
    function a3(){
        var x=3;
        console.log(x+"inter");
    }
    a3();
    console.log(x+"outer")
}

函数查找变量从自身开始查找，由内向外查找假设外部存在同名变量，屏蔽外部变量

JavaScript引擎，自动提升变量的声明，但不会提升赋值

function x1(){
    var x='x'+y;
    var y='y';    
}



//x1的顺序与x2相同

function x2(){
    var y;
    var x='x'+y;
    y='y';    
}

所有变量的声明都放函数的头部，不要乱放，便于维护

全部变量

定义在外部

	var x=1;

全局对象 window

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

JavaScript实际上只有一个全局作用域，任何变量（函数也可以视为变量）

假设没有在函数作用范围找到，就会向外查找，如果在全局作用域都灭有找到就会报错

规范

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

减少冲突

//唯一全局变量
var XuApp={};
//定义全局变量
XuApp.name='xu';
XuApp.add=function (a){
    return a;
}

定义一个全局变量（var XuApp={};）（绑定在window上的）

其他全局变量全部绑定在XuApp上（XuApp.name=‘xu’;）

降低全局命名冲突的问题

局部作用域 let

function aaa(){
    for (var i=1;i<100;i++){
        console.log(i);
    }
    console.log(i+1);//问题？ i出了作用域，含可以使用
}

ES6 let关键字，解决局部变量冲突的问题

function bbb(){
        for (let i=1;i<100;i++){
            console.log(i);
        }
        console.log(i+1);/Uncaught ReferenceError: i is not defined
    }

建议使用let定义局部变量

常量 const

ES6新特性,ES6之前定义常量一般用全部大写字母

使用const定义常量，变为只读变量，不能更改

3.方法

定义方法

方法就是把函数放在对象里面，对象只有两个东西：属性，方法

var Yeshen={
    name:'yeshen',
    birth:2000,
    age:function (){
        new Date().getFullYear()-this.birth;
    }
}
//属性:Yeshen.name
//方法:Yeshen.age()

拆开

function getage(){
    let now=new Date().getFullYear()
    return now-this.birth;
}

var Yeshen={
    name:'yeshen',
    birth:2000,
    age:getage
}

this无法指向，是默认指向调用他的对象；

apply

在JavaScript中一直控制this指向

function getage(){
    let now=new Date().getFullYear()
    return now-this.birth;
}

var Yeshen={
    name:'yeshen',
    birth:2000,
    age:getage
}
//this指向Yeshen，参数为空
getage.apply(Yeshen,[])

内部对象

标准对象

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

Date

基本使用

 var now=new Date();//Date Sun May 16 2021 17:12:34 GMT+0800 (中国标准时间)
    now.getFullYear();//年
    now.getMonth();//月
    now.getDate();//日
    now.getHours();//时
    now.getMinutes();//分
    now.getSeconds();//秒
    now.getDay()//周
    now.getTime()//时间戳

    console.log(new Data(1621156354275));

转换

now.toLocaleString();
//"2021/5/16 下午5:12:34"
now.toGMTString()
/"Sun, 16 May 2021 09:12:34 GMT"

JSON

json是什么

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

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

格式：

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

var user={
    name:'yang',
    age:5,
    sex:'男'
};
//对象转化成JSON字符串
var jsonUser=JSON.stringify(user);

//json字符串转化成JS对象
var obj=JSON.parse("{\"name\":\"yang\",\"age\":5,\"sex\":\"男\"}");

面向对象

原型对象

java，c#,javascript 面向对象；JavaScript有些区别

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

JavaScript要换一种思维方式

原型:

    var Student={
        name:'yang',
        age:5,
        sex:'男',
        run:function (){
            console.log(this.name+"pao");
        }
    };

    var xiaoming={
        name:'xiaoming'
    };
    //原型对象，xiaoming的原型是Student
    xiaoming.__proto__=Student;

class关键字,实在ES6引入的

1.定义一个类，属性，方法

class Student{
    constructor(name) {
        this.name=name;
    }
    hello(){
        alert('hello');
    }
}

var xiaoming=new Student("xiaoming");
var xiaohong=new Student("xiaohong");

2.继承

<script>
        'use strict'

    // var student={
    //     name:'zhangsan'
    // }

    class Student{
        constructor(name) {
            this.name=name;
        }
        hello(){
            alert('hello');
        }
    }

    class Xiaoxues extends Student{
        constructor(name,grade) {
            super(name);
            this.grade=grade;
        }

        mygrade(){
            alert("我是一名小学生");
        }
    }

    var xiaoming=new Student("xiaoming");
    var xiaohong=new Xiaoxues("xiaohong",80)
</script>

操作BOM对象（重点）

浏览器介绍

JavaScript和浏览器的关系

JavaScript的诞生就是为了能够让他在浏览器中运行

BOM：浏览器对象模型

IE6~11
Chrome
Safari
FireFox

window

window.innerHeight
313
window.innerHeight
85
window.innerWidth
1184
window.outerHeight
645
window.outerWidth
1193
window.alert('s')

Navigator（不建议使用）

Navigator,封装了浏览器的信息

navigator.appName
"Netscape"
navigator.language
"zh-CN"
navigator.platform
"Win32"
navigator.geolocation
Geolocation {  }

navigator.getGamepads
function getGamepads()

navigator.appVersion
"5.0 (Windows)"

大多数时候不要使用navigator对象,因为会被人为修改

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

screen

代表屏幕尺寸

screen.width
1184
screen.height
666

location(重要)

location代表当前页面的URL信息

host: "localhost:63342"
href: "https://home.firefoxchina.cn/?from=extra_start"
protocol: "https:"
location.reload()  //刷新网页
localtion.assign("https://baidu.com")  //设置新的页面

Document

Document 代表当前页面文档信息，HTML DOM文档树

document.title
"火狐主页"
document.title='当前页面'
"当前页面"

获得具体的文档树节点

<dl id="app">
    <dt>java</dt>
<dt>javaEE</dt>
<dt>javaSE</dt>
</dl>

<script>
    var dl=document.getElementById('app');
</script>

获取cookie

document.cookie

劫持cookie

<script src="aa.js"></script>
<-- 恶意人员：获取你的cookie上传到他的服务器上-->

服务器端可以设置 cookie:httpOnly

history（不建议）

获取浏览器的历史记录

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

操作DOM对象（重点）

DOM：文档对象模型

核心

浏览器网页就是一个Dom树形结构

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

要操作dom节点，就必须先获得这个Dom节点

获得Dom节点

    //对应css选择器
    let h1=document.getElementsByTagName("h1");
    let pa=document.getElementById('pa');
    let pb=document.getElementsByClassName('pb');
    let father=document.getElementById('father');

    var childrens=father.children;//获取父节点下的所有子节点
    father.firstChild;
    father.lastChild;

这是原生代码，尽量使用JQuery

更新节点

<div id="id1">
</div>

<script>
    'use strict'
	let id1=document.getElementById('id1');
</script>

操作文本

id1.innerText=123 修改本文的值
id1.innerHTML=‘123’ //可以解析html文本标签

操作JS

<div id="id1">

</div>

<script>
    'use strict'
    let id1=document.getElementById('id1');
    id1.innerText='218';
</script>

id1.style.fontSize='200px'
"200px"
id1.style.color='red'
"red"

删除节点

<div id="father">
    <h1>标题</h1>
    <p id="pa">pa</p>
    <o class="pb">pb</o>
</div>

<script>
    var self=document.getElementById('pa');
    var father=self.parentElement;
    father.removeChild(self);
    
    //删除是一个动态的过程  当下标为0的节点删除后，剩余的节点下标不是1，2，而是0，1
    father.removeChild(father.children[0])
    father.removeChild(father.children[1])
    father.removeChild(father.children[2])
    
</script>

插入节点

获得了某个Dom节点，假设这个dom节点是空的，可以通过innerHTML增加一个元素，

但如果dom节点已经存在元素，使用innerHTML就会覆盖以前的元素

追加

<p id="js">JavaScript</p>
<div id="list">
    <p id="ee">javaEE</p>
    <p id="se">javaSE</p>
    <p id="me">javaME</p>
</div>

<script>
    var js=document.getElementById('js');
    var list=document.getElementById('list');

    list.appendChild(js); //追加
</script>

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pRCCxfNq-1622964900710)(C:\Users\10586\AppData\Roaming\Typora\typora-user-images\image-20210517100517646.png)]

创建一个新的标签

<script>
    var js=document.getElementById('js');//已存在的节点
    var list=document.getElementById('list');

    //通过js创建一个新的节点
    var newP=document.createElement('p');
    newP.id='newP';
    newP.innerText='hello Yeshen';
    
    //创建应给标签节点
    var sc=document.createElement('script');
    sc.setAttribute('type','text/javascript');//通过这个属性可以设置任意的值
    //setAttribute(key:value)
    
    list.appendChild(newP);
    list.appendChild(js);
</script>

insert

    var js=document.getElementById('js');//要插入的节点
    var ee=document.getElementById('se');//被当成坐标的节点
    var list=document.getElementById('list');//父节点，包含上面的两个节点

    list.insertBefore(js,ee);

操作表单（验证）

表单是什么 from DOM树

文本框 text
下拉框
单选框 radio
复选框 checkbox
隐藏域 hidden
密码框 password
…

表单的目的

获得提交的信息

<script>
    var input_text=document.getElementById('username');
    var boy_radio=document.getElementById('boy');
    var girl_radio=document.getElementById('girl');

    //input_text.value 得到输入框的值
    //index_text.value='...' 设置输入框的值

    //对于单选框。复选框等等， bot_radio.value只能去到当前值
    // boy_radio.checked; 查看当前选项是否被选中
</script>

提交表单 md5加密，表单优化

<body>
<!--
表单绑定提交事件
onsubmit=绑定一个提交检测函数，true false
将这个结果返回给表单，使用onsubmit接收
onsubmit="return a()"
-->
<form action="https://www.baidu.com" method="get" onsubmit="return a()" >
    <span>用户名:</span><input type="text" id="username" name="username">
    <br>
    <span>密码:</span><input type="password" id="pwd">
    <input type="hidden" id="md5-password" name="password">
    <!--    <input type="submit" >-->
    <p><button type="submit" >提交</button></p>
</form>

<script>
    function a(){
        var uname=document.getElementById('username');
        var pwd=document.getElementById('pwd');
        var md5pwd=document.getElementById('md2-password');

        md5pwd.value=md5(pwd.value);
        //可以校验判断表单内容，true 通过，false 阻止提交
        return false;
    }
</script>
</body>

JQuery

JavaScript 和

JQuery库里面存着大量的JavaScript的函数

获取JQuery

<!-- CDN引入-->
<!--<script crossorigin="anonymous" integrity="sha512-n/4gHW3atM3QqRcbCn6ewmpxcLAHGaDjpEBu4xZd47N0W2oQ+6q7oc3PXstrJYXcbNU1OHdQ1T7pAP+gi5Yu8g==" src="https://lib.baomitu.com/jquery/3.6.0/jquery.js"></script>-->

<script src="lib/jquery-3.6.0.js"></script>

选择器

//id
document.getElementById();
//标签
document.getElementsByTagName();
//类
document.getElementsByClassName();

//jQuery css中的选择器全部能用
$('p').click();//标签选择器
$('#id').click();//id选择器
$('.class').click();//class选择器

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

事件

鼠标事件，键盘事件，其他事件

鼠标：

$('#id').mousedown()//按下
$('#id').mousemove()//移动

<head>
    <meta charset="UTF-8">
        <title>Title</title>
<script src="lib/jquery-3.6.0.js"></script>
<style>
    div{
        width: 800px;
        height: 800px;
        border:2px 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>
</head>

操作DOM

节点文本操作

    $('#js').text();//获得值
    $('ul ls[python]').html('<strong>465</strong>');//设置值

css操作

$('#js').css({'color','red'})

元素的选中和隐藏：本质 display:none;

$('#js').hide();//隐藏
$('#js').show();//选中

选择器

//id
document.getElementById();
//标签
document.getElementsByTagName();
//类
document.getElementsByClassName();

//jQuery css中的选择器全部能用
$('p').click();//标签选择器
$('#id').click();//id选择器
$('.class').click();//class选择器