JavaScript入门学习

最新推荐文章于 2022-04-17 21:21:50 发布

CShadow7

最新推荐文章于 2022-04-17 21:21:50 发布

阅读量1.3k

点赞数

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/CShadow7/article/details/124092441

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

3.2 变量的作用域、let和const详解

一、快速入门

1.1 引入JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--第一种引入方法：内部引入：script标签内，写JS代码-->
    <!--<script>-->
    <!--    alert('HelloWorld!');-->
    <!--</script>-->

    <!--第二种引入方法：外部引入-->
    <!--注意：script必须成对出现-->
    <script src="js/qj.js"></script>

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

    </script>
</head>
<body>
<!--这里也可以存放JS代码-->
</body>
</html>

alert('HelloWorld');

1.2 浏览器控制台的使用

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

<!--JavaScript严格区分大小写！！-->
    <script>
        //1、定义变量 变量类型 变量名 = 变量值
        var score=1;

        //2、条件控制
        if(score>60 && score<70){
            alert('60~70');
        }else if(score>70 && score<80){
            alert('70~80');
        }else{
            alert('other');
        }

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

</body>
</html>

1.3 数据类型

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

变量

var a=1

number

js不区分小数和整数，number

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

字符串

'abc'、"abc"

布尔值

true、false

逻辑运算

&&、||、！

比较运算！！！重要！！！

=
== 等于(类型不一样，值一样，也为true)
=== 绝对等于(类型一样，值一样，才为true，js中一般用===)
注意：NaN===NaN结果为false，NaN与所有的数值都不想等，包括其自己，只能通过isNaN(NaN)来判断这个数是否为NaN

浮点数问题

console.log((1/3) === (1-2/3));//结果为false
console.log(Math.abs(1/3-(1-2/3))<0.000001);//结果为true

尽量避免使用浮点数进行运算，因为会有精度的损失

null和undefined

null：空
undefined：未定义

数组

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

Java中的数组为一系列相同类型数据的组合，而JavaScript中则可以为不同类型数据的组合，因为其任何数据都使用var去定义，因此不用区分
取数组下标，如果越界了，就会undefined，而不会报错

对象

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

//Person person = new Person(1,2,3,4,5);
var Person={
    name:"CShadow7",
    age:3,
    tags:['js','java','web','...']
}

1.4 严格检查模式strict

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--
前提:IDEA设置了JS遵循ES6的语法
'use strict';严格检查模式，预防js的随意性导致产生的一些问题，必须写在JS代码的第一行
局部变量建议都使用let去定义
-->
    <script>
        'use strict';
        //全局变量,需要注意使用
        i=1;
        //ES6中定义局部变量使用let
        let i=2;
    </script>
</head>
<body>

</body>
</html>

二、数据类型

2.1 字符串

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

\n 换行
\t tab
\' 单引号
\u4e2d \u#### unicode字符
"\x41" ASCII码字符

多行字符串编写

'use strict';
//tab键盘上面的，esc键下面的 `
var msg=
    `hello
    world
    你好
    世界`

模板字符串

'use strict';
//tab键盘上面的 `
let name="CShadow7";
let age = 3;
let msg = `你好呀，${name}，今天我${age}岁了`
console.log(msg);

字符串长度

console.log(str.length);

字符串的可变性，不可变

大小写转换

stu.indexof('t')
stu.substring(1,3)

2.2 数组类型详解

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

'use strict'
let arr=[1,2,3,4,5,6];//通过下标取值和赋值
arr[0]=1;

长度：可变的，若给arr.length赋值，数组大小则会发生变化，其中未定义数据为undefined

arr.length

indexof，通过元素获得下标索引

arr.indexof(2);
1

slice()，截取数组的一部分，返回一个新数组，类似于string中的substring()
push()，pop()

push("a","b")：将指定元素压入数组的尾部
pop()：将数组尾部的元素弹出

unshift()，shift()

unshift("a","b")：将指定元素压入数组的头部
shift()：将数组头部的元素弹出

数组排序：sort()

元素反转

concat()：这个方法并没有修改数组，仅仅是返回一个新的数组

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

多维数组

2.3 对象

JS对象，{}表示一个对象，键值对描述属性xxxx：xxxx，多个属性之间使用逗号隔开，最后一个属性不加逗号。JS代码键值对中的键都是字符串，值都是对象。

var 对象名={
    属性名：属性值，
    属性名：属性值，
    属性名：属性值
}

//创建四个对象，他有四个属性！
'use strict';
let Person={
    name:"CShadow7",
    age:3,
    email:"1758481045@qq.com",
    score:0
}

对象赋值

使用一个不存在的对象属性是不会报错的，只会显示undefined

动态删减属性：delete()

动态添加属性：直接添加新的属性即可

判断属性值是否在对象中间！xxx in xxx！

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

2.4 分支和循环

if判断

'use strict';
let age = 3;
if(age>3){
    alert("haha");
}else if(age<5){
    alert("kuwa~")
}else{
    alert("kuwa~")
}

while循环

'use strict';
let age =3;
while(age<100){
   age=age+1;
   console.log(age);
}

for循环

'use strict';
for (let i = 0; i < 100; i++) {
    console.log(i);
}

forEach循环

'use strict';
let arr=[1,2,3,4,5,6,7,8,9,0]
arr.forEach(function (value) {
    console.log(value)
})

for in循环

'use strict';
let arr=[1,2,3,4,5,6,7,8,9,0]
for(let num in arr){
    console.log(arr[num])
}

2.5 Set和Map集合

Map集合

'use strict';
let map = new Map([['tom',100],['jack',99],['haha',80]]);
let score = map.get('tom')
map.set('admin',70);
map.delete('tom');

Set集合：无序不重复的集合

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

2.6 iterator迭代器

for of遍历数组

//for of可以实现，但是for in只能输出下标
let arr=[1,2,3,4,5]
for (let x of arr) {
    console.log(x)
}

for of遍历map

let map = new Map([['tom',100],['jack',99],['mary',80]])
for(let x of map){
    console.log(x)
}

for of遍历set

let set = new Set([1,3,4,3,5])
for(let x of set){
    console.log(x)
}

三、函数

4.1 定义函数

定义方式一：如果没有执行return，也会返回结果，就是undefined

<script>
    function abs(x){
        if(x>=0){
            return x;
        }else{
            return -x;
        }
    }
</script>

定义方式二：创建一个匿名函数，可以把结果赋值给abs，可以使用abs去调用函数。注意：JS可以传递任意一个参数，也可以不传递参数。

<script>
    'use strict';
    let abs = function (x){
        if(x>=0){
            return x;
        }else{
            return -x;
        }
    }
</script>

参数进来是否存在问题？假设不存在参数，如何规避问题？(可以手动抛出异常)

<script>
    'use strict';
    let abs = function (x){
        if(typeof x !== 'number'){
            throw 'not a number!';
        }
        if(x>=0){
            return x;
        }else{
            return -x;
        }
    }
</script>

arguments：是JS免费赠送的一个关键字，代表传递进来的所有参数，是一个数组

<script>
    'use strict';
    let abs = function (x){
        console.log('x=>'+x)
        for(let i=0;i<arguments.length;i++){
            console.log(arguments[i]);
        }
    }
</script>

arguments的问题：arguments数组包含了所有参数，但是我们有时候需要获取定义意外的参数来进行附加操作，这时候需要排除已有的参数。使用rest关键字，可以获取已经定义的参数之外的参数

<script>
    'use strict';
    function aaa(a,b,...rest){
        console.log(a);
        console.log(b);
        console.log(rest);
    }
</script>

3.2 变量的作用域、let和const详解

在JS中，var声明的变量是有作用域的，在函数体内声明的变量不可以在函数体外使用

<script>
    'use strict';
    function qj(){
        var x = 1;
        x = x+1;
    }
    x = x+2;//报错
</script>

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

<script>
    'use strict';
    function qj(){
        var x = 1;
        x = x+1;
    }
    function qj2(){
        var x = 1;
        x = x+1;
    }
</script>

提升变量的作用域

<script>
    function a(){
        var x = 'x' + y;
        console.log(x);
        var y = 'y';
    }
    a();
</script>

可以看到此处的输出为xundefined，即JS的执行引擎已经自动提升了y的声明，但是并没有提升y的赋值。这个是在JS建立之初就存在的特性，因此我们需要养成规范：将所有变量的声明都放在代码头部

所有的全局变量都会默认绑定在window对象中

<script>
    var x = 'xxx';
    alert(x);
    alert(window.x)//与上一条等价
</script>

alert函数本身也是window的变量

<script>
    var x = 'xxx';
    window.alert(x);
    var old_alert = window.alert;
    //old_alert
    window.alert = function (){
    }
    //发现alert失效
    window.alert(123);//不弹出
    //恢复alert
    window.alert = old_alert;
    window.alert(456);//弹出
</script>

注意：JS实际上只有一个全局作用域，任何变量(函数也可以视为变量)，假设没有在函数作用范围内找到，就会向外查找，如果在全局作用域都没有找到，则会报错。

规范

由于我们的全局变量都会绑定到window对象上，如果不同的js文件，使用了相同的全局变量会造成冲突，如何减少冲突呢？？？→将自己的代码全部放入自己定义的唯一空间名字中，降低全局命名的冲突

<script>
    //唯一全局变量
    var KuangApp = {}
    //定义全局变量
    KuangApp.name = 'CShadow7'
    KuangApp.add = function (a,b){
        return a + b
    }
</script>

局部作用域 let

<script>
    function aaa(){
        for(var i = 0;i<100;i++){
            console.log(i)
        }
        console.log(i+1);//问题，最后输出了101，为什么i出了作用域依然可以使用？？
    }
</script>

ES6引入let关键字用于解决局部作用域的冲突问题，因此建议使用let关键字去定义局部作用域

<script>
    function aaa(){
        for(let i = 0;i<100;i++){
            console.log(i)
        }
        console.log(i+1);
    }
</script>

常量const

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

3.3 方法

方法就是将函数放在对象里面，对象只有两个东西：属性和方法。this指向调用该属性和方法的对象

<script>
    var CShadow7={
        name:'CShadow7',
        birth:'1996',
        age:function (){
            var now = new Date().getFullYear()
            return now - this.birth;
        }
    }
</script>

apply

在JS中，可以控制this的指向！

<script>
    function getAge(){
        var now = new Date().getFullYear()
        return now - this.birth;
    }
    var CShadow7= {
        name: 'CShadow7',
        birth: '1996',
        age: getAge
    }
</script>

五、内部对象

5.1 Date

<script>
    var now = new Date();
    now.getFullYear()//年
    now.getMonth()//月 0-11月，如果获取当前月份需要+1
    now.getDate()//日
    now.getDay()//周几
    now.getHours()//时
    now.getMinutes()//分
    now.getSeconds()//秒
    now.getTime()//时间戳
</script>

5.2 JSON对象

JSON是一种轻量级的数据交换格式，在JS中一切皆为对象，任何JS支持的类型都可以用JSON来表示。

<script>
    var user={
        name:'CShadow7',
        age:3,
        sex:'男'
    }
    //将对象转化为JSON
    var jsonUser = JSON.stringify(user);
    //将JSON转化为对象
    var obj = JSON.parse(jsonUser);
</script>

六、面向对象编程

6.1 class继承

定义一个类的属性和方法

<script>
    class student{
        constructor(name) {
            this.name = name;
        }
        hello(){
            alert('hello!')
        }
    }
var xiaoming = new student("xiaoming");
xiaoming.hello();
</script>

继承

<script>
    class student{
        constructor(name) {
            this.name = name;
        }
        hello(){
            alert('hello!')
        }
    }
    class xiaostu extends student{
        constructor(name,grade) {
            super(name);
            this.grade = grade;
        }
        mygrade(){
            alert('我是一个小学生！');
        }
    }

    var xiaoming = new student("xiaoming");
    xiaoming.hello();
    var xiaohong = new xiaostu("xiaohong",1);
    xiaohong.mygrade();
</script>

七、操作BOM对象(重点！)

BOM：浏览器对象模型

window：代表浏览器窗口


window.alert(1)
undefined
window.innerHeight
104
window.outerHeight
1040
window.innerWidth
1097
window.outerWidth
1920

navigator：封装了浏览器的信息

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

screen：代表屏幕

screen.width
1920
screen.height
1080

location(重要)：代表了当前页面的URL信息

location.assign('https://www.baidu.com/')//重定向页面，使所有访问网页的人会被跳转至百度

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

document.title
'百度一下，你就知道'
document.title = 'CShadow7'
'CShadow7'

可以获取具体的文档树节点

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

获取cookie

劫持cookie的原理：服务器端可以设置httpOnly来保证cookie的安全

<script src="aa.js"></script>
//恶意人员通过获取你的cookie上传到他的服务器窃取你的隐私

history：代表了浏览器的历史记录

history.back()//后退到上一页面
history.forward()//前进到下一页面

八、操作DOM对象(重点)

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

遍历得到DOM节点(查)

要操作一个DOM节点，首先必须先得到DOM节点。

<body>

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

<script>
    var h1 = document.getElementsByTagName('h1');//标签选择器
    var p1 = document.getElementById('p1');//id选择器
    var p2 = document.getElementsByClassName('p2');//类选择器
    var father = document.getElementById('father');

    var children = father.children;//获取父节点下的所有子节点
    var firstchild = father.firstChild;
    var lastchild = father.lastChild;
</script>

</body>

更新DOM节点(改)

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

<script>
    var id1 = document.getElementById('id1');
    //操作文本
    id1.innerText = '123';//将文本内容修改为‘123’
    id1.innerHTML = '<strong>123</strong>'//将HTML文本内容修改
    //操作JS代码
    id1.style.color = 'red';//修改文本的颜色
    id1.style.fontSize = '200px';//修改字体大小
    id1.style.padding = '2em';
</script>
</body>

删除DOM节点(删)

先获取父节点，再通过父节点删除自己

<body>
<div id="father">
    <h1>标题一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>

<script>
    var self = document.getElementById('p1');//获取p1节点
    var father = self.parentElement;//获取p1子节点的父节点
    father.removeChild(self);//删除子节点p1
    father.removeChild(father.children[0]);//删除节点是一个动态过程
</script>
</body>

添加DOM节点(增)

我们获得了一个DOM节点，若该DOM节点为空，则我们可以通过innerText或innerHTML去为其增加元素；但是如果这个DOM元素不为空，我们就不可以使用上述方法，因为会产生覆盖！

追加现有标签：

<body>
<p id="js">JavaScript</p>
<div id="list">
    <p id="SE">JavaSE</p>
    <p id="EE">JavaEE</p>
    <p id="ME">JavaME</p>
</div>

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

创建一个已知属性的新的标签

<body>
<p id="js">JavaScript</p>
<div id="list">
    <p id="SE">JavaSE</p>
    <p id="EE">JavaEE</p>
    <p id="ME">JavaME</p>
</div>

<script>
    var
        js = document.getElementById('js');
        list = document.getElementById('list')
    //通过js创建一个新的节点
    var newP = document.createElement('p');
    newP.id = 'newP';
    newP.innerText = 'Hello,CShadow7';
    list.appendChild(newP);
</script>
</body>

创建一个未知属性的新的标签

<body>
<p id="js">JavaScript</p>
<div id="list">
    <p id="SE">JavaSE</p>
    <p id="EE">JavaEE</p>
    <p id="ME">JavaME</p>
</div>

<script>
    var
        js = document.getElementById('js');
        list = document.getElementById('list')
    //创建一个新的标签节点
    var myScript = document.createElement('script');
    myScript.setAttribute('type','text/javascript');
    list.appendChild(myScript);
</script>
</body>