前端三件套（三）：JavaScript

最新推荐文章于 2024-06-25 19:15:46 发布

Ben～

最新推荐文章于 2024-06-25 19:15:46 发布

阅读量1.2k

点赞数 1

文章标签：数据结构算法排序算法

本文链接：https://blog.csdn.net/weixin_46236591/article/details/123545657

版权

一、什么是JavaScript

1、概述

JavaScript 是世界上最流行的语言之一，是一种运行在客户端的脚本语言（Script 是脚本的意思）
脚本语言：不需要编译，运行过程中由 js 解释器( js 引擎）逐行来进行解释并执行
现在也可以基于 Node.js 技术进行服务器端编程。
作为一名合格的后端工程师必须要精通javascript。

2、历史

JavaScript历史

二、快速入门

1、内部引入

    <script>
    	js代码
    </script>

2、外部引入

注意

<!--注意script成对出现-->
<script src="script/one.js"></script>

3、基本语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //定义变量 数据类型 变量名=变量类型
        var score=82;
        //条件控制
        if(80<=score){
            alert("优秀");
        }else if(60<=score&&score<80){
            alert("良好");
        }else{
            alert("不及格");
        }
    </script>
</head>
<body>

</body>
</html>

在这里插入图片描述

4、数据类型

变量
用var表示类型

var a="abc"

number

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

字符串

'abc' "abc"

布尔值

true false

逻辑运算

&&	//与运算

|| //或运算

！ // 非运算

比较运算符

= //赋值
== //等于（值一样则为true）
=== //绝对等于（类型一样，值一样，才为true）

注意：

比较时坚持使用===
NaN===NaN 结果为false，NaN与所有的数值都不相等，包括自己，只能通过isNaN(NaN)来判断是否为NaN
尽量避免使用浮点数进行运算，存在精度问题

null和undefined

null 空
undefined 未定义

数组类型
JS中数组不需要存放相同类型的值或变量

//建议使用[]，可读性更好
        var arr=[1,2,3,'a','v','w',null,true];

        new Array(1,2,3,'a','v','w',null,true);

如果数组下标越界了，会显示：undefined

对象类型

var person={
    name: "ben",
    age: 11,
    tags: ['js',1,3]
}

取对象的值

person.name
"ben"

5、严格检查格式

‘use strict’ 严格检查格式，防止JavaScript的随意性带来的问题
必须写在第一行
局部变量建议用let定义

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

</body>
</html>

没加use strict

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        'use strict'
        i=1
    </script>
</head>
<body>

</body>
</html>

加了usestrict

三、数据类型

1、字符串

①正常使用字符串我们用单引号或双引号包裹
②转义字符

\' 引号
\n 换行
\t tab
\u4e2d  \u#### Unicode字符
\x41 ASCII字符

③多行字符串编写
用~~包裹起来

var msg =~hello
world
你好
~

④模板字符串

var name="benben";
var age=15;        
var he=`hello,${name}`;

⑤字符串常用属性及方法

字符串长度
str.length

字符串某一个元素
str[n]

字符串截取
str.substring(0,2)

字符串转大写
str.toUpperCase()

2、数组

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

var arr=[1,2,3,aa,cc,vv]

① 长度

arr.length

注意：给arr.length赋值，数组大小会发生变化（如果赋值小于当前长度，元素会丢失）
②indexOf，获得元素的下标索引

arr.indexOf(2)

③slice() 截取一段Array，返回一个新数组，类似于String中的substring
④push()、pop()，操作数组尾部

push() 压入到数组尾部
pop() 弹出尾部的一个元素

⑤unshift()、shift()，操作数组头部

unshift() 压入元素到头部
shift() 弹出头部的元素

⑥排序sort()

var c=[2,4,1,5]
c.sort()
(4) [1, 2, 4, 5]

⑦元素反转 reverse()

(4) [1, 2, 4, 5]
c.reverse()
(4) [5, 4, 2, 1]

⑧concat()拼接数组，不改变原数组，返回一个新数组

var b=['a','b','c']
c.concat(b)
(7) [5, 4, 2, 1, "a", "b", "c"]

⑨将数组元素以特定字符拼接，并以字符串形式打印

(7) [5, 4, 2, 1, "a", "b", "c"]
c.join("-")
"5-4-2-1"

⑩多维数组

var p=[[1,2],[3,4]]
for(var i=0;i<p.length;i++){
    for(var j=0;j<p[i].length;j++){
        console.log(p[i][j]);
    }
}
1
2
3
4

3、对象

若干个键值对

var 对象名={
    属性:属性值,
    属性:属性值,
    属性:属性值
}
//定义了一个对象名为person的对象
var person={
    var name:"ben",
    var age:19,
    var email=1523321@qq.com
}
//js中所有键都是字符串，值是任意对象

①对象赋值

person.age
19
person.age=20
20

②使用一个不存在的属性，不会报错！

person.time
undefined

③动态删减属性，通过delete删除对象的属性

delete person.email
true
person.email
undefined

④动态添加
直接给新的值添加即可

person.score=100
100
person.score
100

⑤判断属性值是否在这个对象中 xxx in xxx

"score" in person
true

⑥判断一个属性是否是这个对象自身拥有（不包括继承来的）的hasOwnProperty()

person.hasOwnProperty("name")
true

4、流程及循环控制

①if else

var age=13;
if(age<18){
    alert("未成年")
}else{
    alert("成年")
}

②while循环

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

③for循环

for (var i = 0; i < 100; i++) {
    console.log(i);
}

④forEach循环

var score=[100,23,121,55,88,99];
score.forEach(function (value) {
    console.log(value)
})

⑤for…in
遍历的是下标

//for(var index in object())    
for(var s in score){
    console.log(score[s])
}

5、Map和Set

Map键值对集合

//Map
var map=new Map([['tom',100],['ben',88],['tao',10]]);
var name=map.get('tom');    //通过key获得value
//新增
map.set('ja',55);
//删除
map.delete('ben')
console.log(name)
100

Set无需不重复的集合

var set=new Set([3,1,1,2,3]);
set.delete(1);	//删除
console.log(set)
{3,2}
console.log(set.has(3));
true

6、iterator遍历

遍历数组

var arr=[3,4,5];
for(let x of arr){
    console.log(x)
}

遍历map

var map=new Map([['qin',123],['ben',2223],['peipei',233]]);
for(let x of map){
    console.log(x)
}

遍历set

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

四、函数

1、定义函数

关键字function
方式一：

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

一旦执行到return，返回结果
若是没有执行到return，会返回undefined

方式二：

//将匿名函数的值赋值给abs
var abs=function(x) {
    if(x>=0){
        return x;
    }else {
        return -x;
    }
}

方式一方式二等价

arguments关键字是一个存放函数参数列表的数组

var abs=function(x) {
    if(typeof x!=='number'){
        throw "不是数字";
    }
    console.log("x="+x);
    for(var i=0;i<arguments.length;i++){
        console.log(arguments[i]);
    }
    if(x>=0){
        return x;
    }else {
        return -x;
    }
}

问题：有时我们需要用到多余的参数（没定义的参数），需要排除已有的参数
ES6新特性，用**…rest**来定义多余的参数

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

在这里插入图片描述

2、变量的作用域

在函数中声明的变量，在函数体外不能使用（除了闭包）

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

内部函数可以访问外部函数的变量,反之不行

function b() {
    var x=1;
    //内部函数可以访问外部函数的变量
    function b2() {
        var y=x+1;
        console.log(y)
    }
    b2();
}

假如函数内部变量和外部变量重名，则会取函数内部的变量

function b() {
    var x=1;
    //内部函数可以访问外部函数的变量
    function b2() {
        var x=2;
        console.log(x);
    }
    b2();
}

全局对象window

var x=1;
alert(x);
alert(window.x);

alert()也是一个全局变量

var x='123';
window.alert(x);
var old_alert=window.alert;

//重写alert()
window.alert=function (cur) {
    console.log(cur);
}

//alert弹窗失效了
window.alert(x);

//恢复alert()
window.alert=old_alert;

window.alert(x)

js中任何变量（包括函数），假设没有在函数中找到，最后会在全局变量中找，如果在全局变量中也没找到，报ReferenceError异常

规范：由于全局变量都会绑定到window下，当引入多个javascript文件时，会产生冲突，为了减少冲突，可以定义唯一空间变量

var ben={
};
ben.name="ben";
ben.age=11;

let关键字

function aaa() {
    for (var i = 0; i < 10 ; i++) {
        console.log(i);
    }
    console.log(i+1);   //问题 i出了作用域依然可以使用2
}

ES6,let 关键字，用于定义局部变量，解决作用域冲突问题

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

const关键字
用于定义常量，常量一旦定义就无法被修改

const a='123';
console.log(a);
a="asd";    //Uncaught TypeError: Assignment to constant variable.
console.log(a)

3、方法

定义方法，方法就是函数写在对象内部。对象包含：属性和方法

var ben={
    birth:2002,
    name:"ben",
    age:function () {
        var now=new Date().getFullYear();   //获取当前年份
        return now-this.birth;
    }
};
ben.age()	//方法一定要带()
20

如果拆开写

function getAge() {
    var now=new Date().getFullYear();   //获取当前年份
    return now-this.birth;
}

var ben={
    name:"ben",
    birth:2002,
    age:getAge
}
console.log(ben.age())	//ok
20
console.log(getAge())	//NaN ,此时this.指向window

apply
在js中可以控制this的指向

function getAge() {
    var now=new Date().getFullYear();   //获取当前年份
    return now-this.birth;
}

var ben={
    name:"ben",
    birth:2002,
    age:getAge
}
console.log(getAge.apply(ben,[]));
20

五、常用内部类

1、Date

var now=new Date(); //Fri Mar 25 2022 09:41:09 GMT+0800 (GMT+08:00)
now.getFullYear();   //年
now.getMonth();     //月
now.getDate()   //日
now.getDay();   //星期几
now.getHours(); //时
now.getMinutes();   //分
now.getSeconds();   //秒

now.getTime();  //时间戳，从1970年

now.toLocaleString()    //本地时间  2022/3/25 上午9:55:39

2、JSON(JavaScript Object Notation)

简洁和清晰的层次结构使JSON成为优秀的数据交换格式
在Js中一切皆为对象，任何Js支持的类型都可以用JSON来表示：
格式：

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

var user={
            name:"ben",
            age:19,
            email:"123123@qq.com"
        }
        //将对象转换为Json字符串
        var jsonUser=JSON.stringify(user);  //{"name":"ben","age":19,"email":"123123@qq.com"}

        //Json字符串转换为对象
        var obj=JSON.parse(
        '{"name":"ben","age":19,"email":"123123@qq.com"}'
        );

JSON和Js对象的区别

var obj={a:'hello',b:'hellob'}
var json='{“a”:"hello","b":"hellob"}'

3、Ajax

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

六、面向对象编程

1、指定原型

js中的面向对象与java的有所不同
用__proto__来指定原型对象

var man={
    name:"man",
    run: function () {
        console.log(this.name+" run....");
    }
};

var me={
    name:"ben"
};

//原型对象
me.__proto__=man;
//此时小明的原型是man

2、class继承

class关键字，在ES6引入
①定义一个类，属性，方法

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

    hello(){
        alert("My name is "+name);
    }
}
var student=new Student("ben")

②继承

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

    hello(){
        alert("My name is "+this.name);
    }
}

class Pupil extends Student{
    constructor(name,age){
        super(name);
        this.age=age;
    }

    year(){
        alert("My age is"+this.age);
    }
}

他的原型即为它继承的类
在这里插入图片描述

七、操作BOM对象（重点）

BOM:浏览器对象

1、window

window代表浏览器窗口

//内部高度
window.innerHeight	
202
//外部高度
window.outerHeight
867

2、navigator

navigator,封装了浏览器的信息

navigator.appName
"Netscape"
navigator.appVersion
"5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.107 Safari/537.36"
navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.107 Safari/537.36"
navigator.platform
"Win32"

3、screen

代表屏幕尺寸

screen.height
864 px
screen.width
1536 px

4、location

代表当前页面的url信息

location.host
"search.bilibili.com"
location.href
"https://search.bilibili.com/?from_source=webtop_search&spm_id_from=333.788.b_696e7465726e6174696f6e616c486561646572.9"
location.protocol
"https:"
location.reload()	//刷新网页
location.assign(url)	//跳转到指定url

5、document

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

document.title
"_ 搜索结果_哔哩哔哩_Bilibili"
document.title="bilibili";
"bilibili"

获取文档树节点

<dl id="Man">
   <dt>ben</dt>
    <dd>Ben</dd>
    <dd>BEN</dd>
</dl>
<script>
    var dl=document.getElementById("Man");
</script>

在这里插入图片描述
获取cookie

document.cookie

八、操作DOM对象（重点）

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

更新
遍历
删除
添加

1、得到DOM节点

//对应css选择器
var h1=document.getElementsByTagName("h1");
var p1=document.getElementById("Man");

2、更新节点

<div id="id1">

</div>
<script>
    var id1=document.getElementById("id1");
</script>

操作文本

id1.innerTest=“abc” 修改文本的值
id1.innerHtml=

操作JS

id1.style.fontSize=‘120px’; //-转驼峰命名
id1.style.color=“red”

在这里插入图片描述

3、删除节点

<div id="father">
    <h1>标题</h1>
    <p id="p1">p11</p>
    <p class="p2">p22</p>
</div>

<script>
    var h1=document.getElementsByTagName('h1');
    var p1=document.getElementById('p1');
    var p2=document.getElementsByClassName('p2');
    var father=document.getElementById('father');

    var childreds=father.children;  //获取父节点

删除的步骤：现货区父节点，再通过父节点删除自己

 var self=document.getElementById('p1');
 var father=self.parentElement;
 //删除是个动态的过程,依次删除
 father.removeChild(father.children[0]);
 father.removeChild(father.children[0]);
 father.removeChild(father.children[0]);

4、插入节点

我们获得了某个DOM节点，假设这个DOM是空的，我们通过innerHTML就可以增加一个元素了，但是若这个DOM节点已经存在元素了，则会产生覆盖

①append：追加

<p id="4">ben</p>
<div id="list">
    <p id="1">abc</p>
    <p id="2">def</p>
    <p id="3">123</p>
</div>

<script>
    var ben=document.getElementById("4");
    var list=document.getElementById("list");
    list.appendChild(ben);	//追加到最后
</script>

效果：
在这里插入图片描述
②insertBefore

<p id="4">ben</p>
<div id="list">
    <p id="1">abc</p>
    <p id="2">def</p>
    <p id="3">123</p>
</div>

<script>
    var abc=document.getElementById("1");
    var def=document.getElementById("2");
    var list=document.getElementById('list');
    //将新节点插到目标节点的前面insertBefore(newNode,targetNode)
    
</script>

在这里插入图片描述

九、操作表单（验证）

<body>
<form method="post">
    <p>
        <span>用户名：</span><input type="text" id="username">
    </p>
    <!--多选框的值，就是定义好的value-->
    <p>
        <span>性别：</span>
        <input type="radio" name="gender" value="male" id="man">男
        <input type="radio" name="gender" value="female" id="woman">女
    </p>
</form>

<script>
    var test_name=document.getElementById('username');
    //得到test_name的值
    test_name.value;
    //修改输入框的值
    test_name.value="ben";

    //对于单选框，多选框等固定的值，只能取到当前的值
    var nan=document.getElementById('man');
    nan.checked //true选中，false未选中

    //通过设置.checked的值来赋值

提交表单，MD5加密

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form</title>
    <!--md5工具类-->
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<!--οnsubmit=绑定一个提交检测的函数，true false
函数将这个返回结果返回给表单-->

<form action="https://www.baidu.com" method="post" onsubmit="return aaa()">
    <p>
        <span>用户名：</span><input type="text" id="username" name="username">
    </p>
    <p>
        <span>密码：</span><input type="password" id="pwd" >
    </p>
    <!--建议使用hidden-->
    <input type="hidden" id="md5" name="password">
    <button type="submit">提交</button>
</form>

<script>
    var aaa=function () {
        var username=document.getElementById("username");
        var pwd=document.getElementById("pwd");
        var md5pwd=document.getElementById("md5");
        md5pwd.value=md5(pwd.value);
        alert(md5pwd.value)
        return true
    }
</script>
</body>
</html>

十、jQuery

jQuery中文文档

1、选择器

<script>
    //原生js
    //标签
    document.getElementsByTagName();
    //Id
    document.getElementById();
    //类
    document.getElementsByClassName();

    //jQuery    css中的选择器全能使用
    //标签选择器
    $('p').click();
    //id选择器
    $('#id1').click();
    //类选择器
    $('.class1').click()

</script>

2、事件

显示鼠标的坐标

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/jquery-3.6.0.js"></script>
    <style>
        #disMove{
            width: 200px;
            height: 200px;
            border-style: solid;
            border-color: red;
        }
    </style>
</head>
<body>
mouse：<span id="mouseMove"></span>
<div id="disMove">
    移动鼠标
</div>

<script>
    //当页面加载完成后，响应事件
    $(function () {
        $('#disMove').mousemove(function (e) {
            $('#mouseMove').text('X:'+e.pageX+',Y:'+e.pageY);
        })
    })
</script>
</body>
</html>

3、操作DOM

<ul id="qin">
    <li id="ben">BEN</li>
    <li name="123">123123</li>
</ul>

节点文本操作

//获得值
$('#qin li[id=ben]').text();
//改变值
$('#qin li[id=ben]').text("BENBEN");

CSS操作

$('#qin li[id=ben]').css("color","red")

元素的显示和隐藏

$('#qin li[id=ben]').hide()	//隐藏
$('#qin li[id=ben]').show()	//显示

Ben～

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端三件套（三）：JavaScript

这里写自定义目录标题一、什么是JavaScript1、概述2、历史二、快速入门1、内部引入2、外部引入3、基本语法4、数据类型一、什么是JavaScript1、概述JavaScript 是世界上最流行的语言之一，是一种运行在客户端的脚本语言（Script 是脚本的意思）脚本语言：不需要编译，运行过程中由 js 解释器( js 引擎）逐行来进行解释并执行现在也可以基于 Node.js 技术进行服务器端编程。作为一名合格的后端工程师必须要精通javascript。2、历史JavaScript历
复制链接

扫一扫