JavaScript学习

那我懂你的意思啦

已于 2022-09-18 19:29:28 修改

阅读量208

点赞数

文章标签： javascript 学习前端

于 2022-08-03 23:03:58 首次发布

本文链接：https://blog.csdn.net/m0_61894608/article/details/126146522

版权

这篇博客详细介绍了JavaScript的基础语法，包括如何引入和定义变量、数据类型（如数字、字符串、数组、对象）、操作符、流程控制以及函数。此外，还讲解了对象的属性、方法、作用域以及内置对象如Date和JSON的使用。文章深入浅出地阐述了JavaScript的面向对象编程概念，如原型继承和类继承，并探讨了BOM和DOM操作。最后，提到了jQuery库的基本使用。

摘要由CSDN通过智能技术生成

一、入门

1.引入JavaScript

ctrl+? 选中注释

内部标签

<script>
        alert("Hello World！");
</script>

外部引入

qj.js

 <script src="js/qj.js"></script>

2.基本语法入门

定义

var score= 1;

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

    <script>
        //1.定义变量    变量类型  变量名=变量值;
        var num=1;
        var name="lb";
        //alert(num);
        //2.条件控制
        if (2>1){
            alert('true');
        }
        //console.log(score)  在浏览器控制台打印变量  sout
    </script>
</head>
<body>

</body>
</html>

3.数据类型

数值，文本，图形，音频，视频

变量

var来定义js的变量

number

js不区分小数和整数

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

字符串

'abc'  "abc"

比较运算符

=      赋值
==     等于（类型不一样，值一样，也会判断为true）
===    绝对等于（类型一样，值一样，才会判断为true）

这是JS的一个缺陷，要尽量使用===去比较

NaN===NaN,这个与所有的数值都不相等，包括自己。只能通过isNaN(NaN)来判断这个数是否为NaN

null 空

underfined未定义

数组

对数据类型没有特别的定义，想加什么样子的都可以

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

对象

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

每个属性之间用都好隔开，最后一个不需要添加

var person={
  name:"lb",
  age:3,
  tags:['js','java','web','...']
}

取对象的值

person.name
person.age

4.严格检查模式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--'use strict':严格检查模式，预防JavaScript的随意性导致产生的一些问题
   局部变量建议都用let去定义
   必须卸载JavaScript的第一行
-->
    <script>
        'use strict';
        //全局变量
       let i=1
    </script>
</head>
<body>

</body>
</html>

二、数据类型

1.字符串

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

注意转义字符 \

\'      字符串
\n      换行
\t      tab
\u4e2d  中    \u####  Unicode字符
\x41    Ascll字符

多行字符串编写

//波浪键包裹可以写多行字符串 
// ``   tab键上面
var msg = `
		hello
		world
		hihaoa 
		nihai`

模板字符串

let name = "kele";
let age = 18;
let m1 = `你好呀,  ${name}`

字符串长度

var student="student"
console.log(student.length)

字符串的可变性:不可变

可以直接把一个字符串当成数组，输入下标得到相应的字符

7.大小写转换

//注意这是方法，不是属性
student.toUppercase()
student.toLowercase()
//使用
console.log(student.toUppercase())

8.获取指定下标

student.indexOf('t')

9.获得指定位置字符串

student.substring(1)  //从第一个字符串截取到最后一个字符串
student.substring(1,3)  //[1,3)数组位置   包含前面不包含后面

2.数组

Array可以包含任意数据类型

var arr = [1,2,3,4,5]//通过下标取值和赋值
arr[0]
arr[0]=1

长度

arr.length
//注意：假如给arr.length赋值，数组长度就发生变化，赋值过大没有元素的为空值，赋值过小元素会丢失

indexOf():通过元素获得下标索引
```
arr.indexOf(2)
1
```
字符串的”1“和数字1是不同的
slice():截取Array的一部分，返回一个新的数组，也是包前不包后

push,pop

push();给数组添加元素到尾部
pop():弹出尾部的一个元素

unshift(),shift()

unshift();給数组头部添加元素
shift():弹出头部的一个元素

sort():排序

(3) ["b", "c", "a"]
arr.sort();
(3) ["a", "b", "c"]

元素反转 reverse()

(3) ["a", "b", "c"]
arr.reverse()
(3) ["c", "b", "a"]

8.元素拼接 concat()

在尾部拼接，但并没有改变原来的数组，只是会返回了一个新的数组

arr.concat([1,2,3])

9.连接符join()

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

原来 'C''B''A'
arr.join('-')
之后 'C-B-A'

10.多维数组

arr=[[1,2],[3,4],["5","6"]];
arr[1][1]
4

3.对象

若干个键值对

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

//定义一个person对象，有三个属性
		var Person = {
            name :"kele",
            age : 3,
            score : "good"
        }
//js中的对象，{...}表示一个对象，键值对描述属性xxxx:xxxx，
//多个属性之间用逗号隔开，最后一个不加逗号

对象赋值

Person.name="kele"
"kele"
Person.name
"kele"

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

动态删减属性

delete Person.name
true
Person
{age: 3, score: "good"}

动态添加属性,直接给新的属性添加值即可

Person.haha = "haha"
"haha"
Person
{age: 3, score: "good", haha: "haha"}

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

Person
{age: 3, score: "good", haha: "haha"}
'age' in Person
true
//继承
'toString' in Person
true

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

Person.hasOwnProperty('age')
true
Person.hasOwnProperty('toString')
false

4.流程控制

if判断

while循环，避免程序死循环

for循环

forEach循环

var age=[12,3,12,3,12,3,12,31,23,123];
//函数
age.forEach(function(value){console.log(value)})

5.Map和Set

map

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    'use strict'
//学生的成绩，学生的名字
    var map=new Map([['tom',100],['jack',90],['haha',80]]);
    var name=map.get('tom');//通过key获得value
    map.set('admin',12456);
    console.log(name);

</script>
</body>
</html>

set：无序不重复的集合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    'use strict'
var set=new Set([3,1,1,1,1]);//set可以去重
set.add(2);//添加
    set.delete(1);//删除
    console.log(set.has(3));//是否包含某个元素
</script>
</body>
</ht

6.iterator 遍历

遍历数组

//通过for of
var arr=[3,4,5]
for(var x of arr){
console.log(x)
}

遍历map

var map =new Map([["tom",100],["jack",90],["haha",80]]);
for(let x of map){
console.log（x）
}

遍历set

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

四、函数

方法和函数本质相同，只是位置不一样

对象包括（属性，方法）

1.定义函数

方式一

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

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

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

方式二

var abs=function(x){   //把函数赋给它


}

function(x){.....}是一个匿名函数，但可以把结果赋值给abs，通过abs就可以调用函数

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

var abs=function(x){
console.log("x=>"+x);  //x只会代表我们输入的第一个数
for(var i=0;i<arguments.length;i++){
console.log(argument[i]);
}
if(arguments.length>1){
arguments[1]}  //开发者可以利用方法调出所有数据
}

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

function aaa(a,b,...rest){
console.log("a=>"+a);
console.log("b=>"+b);
console.log(rest)
}

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

2.变量的作用域

局部函数

var定义变量实际是有作用域的

在函数体中声明，在函数体外不可以使用

function qj(){
var x=1;
x=x+1;
}
x=x+2;//报错

假设内部函数变量和外部函数变量重名(函数查找变量会从自身函数开始，由内向外查找，假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量)

function qj(){
var x=1;
function qj2(){
var x='A';
console.log('inner'+x)//outer1
}
console.log('outer'+x)//innerA
qi2()//调用一下函数
}
qj()//调用函数

会提高变量的声明，但不会提高变量的赋值(养成规范：所有的变量定义都放在函数的头部，不要乱放，便于代码维护)

function qj(){
var x="x"+y;
console.log(x);
vay y='y';
}
//输出结果：xunderfined

这段代码等价于下一段

function qj2()
{
var y;
var x="x"+y;
console.log(x);
y='y';
}

全局函数

//全局变量
    var x=1;
    function f(){
        console.log(x);
    }
    f();
    console.log(x);

全局对象window（所有全局变量都绑定在window下）

alert()这个函数本身也是一个window变量

全局变量尽量不要绑定在window上以免起冲突

减少全局变量冲突方法，把自己的代码全部放在自己定义的唯一空间名字中

//唯一全局变量
var lb={};
//定义全局变量
lb.name="shuai";
lb.add=function(a,b){
return a+b;
}

let关键字,解决局部作用域冲突问题

function aaa(){
for(let i=0;i<100;i++){
console.log(i)
}
console.log(i+1);  //错误i is not defined
}

常量关键字const

3.方法

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

 var lb={
      name:"彭于晏",
      birth:2020,
      //方法
      age:function (){
          //今年-出生的年
          var now=new Date().getFullYear();//调用现在年份
          return now-this.birth
      }
  }
//属性
lb.name
//方法,一定带括号
lb.age()

  function  getAge(){
        //今年-出生的年
        var now=new Date().getFullYear();//调用现在年份
        return now-this.birth}
  var lb={
      name:"彭于晏",
      birth:2020,
      age:getAge
      
  }

this是正常是无法指向的，默认指向调用它的那个对象

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

 function  getAge(){
        //今年-出生的年
        var now=new Date().getFullYear();//调用现在年份
        return now-this.birth}
    var lb={
        name:"彭于晏",
        birth:2020,
        age:getAge
    };
    var xiaoming={
        name: '小明',
        birth:2000,
        age:getAge()
    };
    //lb.age()    ok
    getAge.apply(xiaoming,[])

五、内部对象

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

1.Date

基本使用

   var now=new Date();
    now.getFullYear();//年
    now.getMonth();//月  0~11  代表月
    now.getDate();//日
    now.getDay();//星期几
    now.getHours();//时
    now.getMinutes();//分
    now.getSeconds();//秒

    now.getTime();//时间戳  全世界统一 1970.1.1 0.00.00到现在的毫秒数
    console.log(new Date(1578106175991))//时间戳转为时间

2.JSON

JSON是一种轻量级的数据交换格式

易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率

JOSN字符串和JS对象的转化

var user={
name:"liuben"，
age：18，
sex:"男"
}
//对象转化为json字符串{"name":"liuben","age":3,"sex":"男"}
var jsonUser=JSON.stringify(user);
//json字符串转化为对象，参数为json字符串
var obj=JSON.parse("{"name":"liuben","age":3,"sex":"男"}");

JSON和js对象的区别

var obj={a:"hello",b:"hellob"};
var json="{"a":"hello","b":"hellob"}"

六、面向对象编程

1.原型继承

子._proto_=父

子的原型是父，相当于继承可以调用父类的方法2.

 var Student={
     name:"liuben",
     age:3,
     run:function(){
         console.log(this.name+"run....");
 }
 };
 var xiaoming={
     name: "xiaoming"
 }
 //原型对象 
 xiaoming._proto_=Student;//小明的原型是Student
 var Bird={
     fly:function (){
         console.log(this.name+"fly...");
     }
 }
 xiaoming._proto_=Bird;  //小明的原型是Student

2.class继承

   //定义一个学生类
    class Student{
        constructor(name) {
        this.name=name;
        }
        hello(){
            alert('hello')
        }
    }
   class XiaoStudent extends Student{
        constructor(name,grade) {
            super(name);
            this.grade=grade;
        }
        myGrade(){
            alert("我是一名小学生")
        }
   }

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

七、操作BOM对象

BOM:浏览器对象模型

window浏览器窗口获得一些窗口的属性

Navigator封装了浏览器的信息获得一些浏览器的对象

screen屏幕尺寸

location 定位代表当前页面的url信息

document 代表当前的页面内容

获取cookie （个人登录信息记录）

劫持cookie原理

服务器端可以设置cookie:httpOnly 来保证信息安全

history代表浏览器的历史记录

history.back()  页面前进
history.forward()   页面后退

八、操作DOM对象

DOM：文档对象模型

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

更新：更新Dom节点

遍历dom节点：得到Dom节点

删除：删除一个Dom节点

添加：添加一个新的节点

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

获得dom节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="father">
    <h1>标题一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>
<script>
    //对应CSS选择器
    var h1=document.getElementsByTagNameNS('h1');
    var p1=document.getElementById('p1');
    var p2=document.getElementsByClassName('p2');
    var father=document.getElementById('father');
    var childrens=father.children;//获取父节点下的所有子节点
    //father.firstchild
    //father.lastchild
</script>
</body>
</html>

更新节点

<div id="id1">

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

操作文本

id1.innerText='456'   修改文本的值
id1.innerHTML='<strong>123</strong>'   可以解析HTML文本标签

操作JS

id1.style.color='red';   //属性使用字符串包裹
id1.style.fontSize='200px'  //-转驼峰命名问题
id1.style.paddong='2em'

删除节点

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

<div id="father">
    <h1>标题一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>
<script>
    var self=document.getElementById('p1');
    var father=p1.parentElement;
father.removeChild(self)

//删除是一个动态的过程
father.removeChild(father.children[0])
father.removeChild(father.children[1])
father.removeChild(father.children[2])
//删除多个节点的时候，children是在时刻变化的，注意字符数量


</script>

插入节点

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

<P id="js">javaScript</P>
<div >
    <p id="se">JavaSE</p>
    <p id="ee">javaEE</p>
    <p id="me">javaME</p>
</div>
<script>
    var js=document.getElementById("js");
    var list=document.getElementById("list");
    list.appendChild(js);//追加到后面
</script>