JavaScript

Circle in Circle

已于 2024-10-05 15:22:01 修改

阅读量1.3k

点赞数 28

文章标签： javascript 前端

于 2024-10-01 20:00:40 首次发布

本文链接：https://blog.csdn.net/weixin_43731078/article/details/142673644

版权

1 历史与发展

1995 年，网景（Netscape）公司推出了 LiveScript，后改名为 JavaScript，简称 JS
1996 年，IE 中也开始出现了 JScript
1997 年，制定了 JS 的标准规范 ECMAScript
ECMAScript 这个规范一直在发展，每一年都会出新的标准规范，目前是 ES6
2009 年，JS 开始向后端发展，出现了 Node.js

2 JS作用

用于给页面添加动态交互效果
注意：JS 与 Java 是两种完全不同的编程语言

3 JS语言特点

动态类型：JS 是一种弱类型语言，不需要指定变量类型，变量的类型在运行时会根据值自动推断
解释性：JS 是一种解释型语言，不需要编译就可以直接在浏览器中运行
基于对象：JS 是一种基于对象的语言，它不仅可以创建对象，也能使用现有的对象
包含的内容有：变量、数据类型、运算符、各种语句、方法、面向对象…

4 页面中引入JS代码的三种方式:

内联（行内）写法：

位置：写在对应的 HTML 元素上
作用：可以给元素添加 JS 事件代码，触发事件执行对应效果
事件：指系统提供的一系列状态
- onclick 点击事件，点击此元素时才会触发
- alert（666）弹出警告框

<button onclick="alert('请先登录!')">点击即玩</button>

内部写法：

位置：在页面任意位置添加 script 标签，在 script 标签中添加 JS 代码
建议写在 body 结束标签之前！

<script>
    //将内容输出到浏览器控制台
    console.log("Hello World!");
    console.log(d1);
</script>

外部写法：

位置：写在单独的 js 文件中，在 head 标签中添加 script 标签引入外部的 js 文件
注意：若此 script 标签用于引入外部的 JS 文件，则标签中不能写 JS 代码，不会执行

<script src="01.js">
    console.log("Hello World!666");//不会执行！
</script>

5 变量与常量

JS 语言是弱类型语言，声明变量不需要指定类型
在 JS 中，使用 let 或 var 声明变量
- let 声明的变量，作用域类似Java 语言中的局部变量, 块级作用域【推荐使用】
- var 声明的变量，全局作用域，var声明的变量还可以重复声明
在 JS 中,使用 const 声明常量,常量的值不允许被修改!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02变量与常量</title>
</head>
<body>
    <script>
        //JS是一门弱类型语言,不需要指定变量的数据类型
        //1.声明变量
        var a = 10;
        var b = 3.14;
        var c = '你们';
        var d = "好呀";//单引双引都可以
        var e = true;
        console.log(a,b,c,d,e);//可以一次性输出多个值,用逗号隔开
        //根据存的值来推断变量的类型 typeof
        console.log(typeof a,typeof b,typeof c,typeof d,typeof e);

        //js变量可以使用不同的类型
        a = 3.4;
        console.log(a,typeof a);//3.4 number
        a = false;
        console.log(a,typeof a);//boolean false
        //用var声明的变量可以重复声明
        var a = '哈哈哈我又来啦';
        console.log(a,typeof a);//哈哈哈我又来啦 string

        let x = 1;
        console.log(x,typeof x);
        x = 6.6;
        console.log(x,typeof x);
        //let x = false;//报错:x已经被声明过了
        //console.log(x,typeof x);

        const y = 1;
        console.log(y,typeof y);
        //y = 33;//常量的值不允许被修改
    </script>
</body>
</html>

6 JS常用数据类型

原始数据类型

字符串（string）：没有字符的概念，使用单引号或双引号包裹均可
数字（number）：包含整数与小数类型
布尔（boolean）：值只有 true 与 false
未定义（undefined）：Java 声明变量必须声明类型，但 JS 是弱类型语言，若声明变量未赋值就不清楚数据类型
空(null)：结合后面的引用类型使用

引用类型

对象（Object）
数组（Array）
函数（Function）

查看变量类型的方式：typeof 变量名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据类型</title>
</head>
<body>
    <script>
        //JS的数据类型分为原始类型+引用类型
        //原始类型:number string boolean undefined null
        var a =1;
        let b = 9.9;
        console.log(typeof a, typeof b);//整数+小数->number数值类型

        let c = '下午好!';
        let d = '今天下雨了';
        console.log(typeof c, typeof d);//单引+双引->string字符串类型

        let e = true;
        let f = false;
        console.log(typeof e, typeof f);//boolean布尔类型

        //声明了变量,但未赋值
        //访问对象不存在的属性,访问数组不存在的下标
        let g;
        console.log(g, typeof g);//undefined 'undefined' 未定义型

        //引用类型:Object Array String Boolean Function Number...
        //1)定义JS对象
        //let obj = {};  ===> new obj();
        let obj = {
            //属性名:属性值 多对值间使用逗号隔开
            name : '张三',
            age : 18
        };
        console.log(obj);
        console.log(obj.age,obj.name);
        //如果属性存在,修改属性的值
        obj.age = 19;
        console.log(obj.age);
        //如果属性不存在,新增一个属性
        obj.like = '吃冰棍';
        console.log(obj);
        console.log(obj.like);
        console.log(obj.eat);//访问对象不存在的属性undefined

        //JS数组
        let arr = ['李逵','鲁班','后羿',1,3.3,false];
        console.log(arr);//打印数组名可以直接查看数组中的数据
        console.log(arr[0]);//'李逵'
        console.log(arr[5]);//false
        console.log(arr[99]);//访问数组不存在的下标 undefined
    </script>
</body>
</html>

7 运算符

7.1 算术运算符：+ - * / %

除法会自动根据结果转换为整数或小数
Java:

int x = 5; int y = 2; 
int z = x/y 
z=2

let x = 5; let y = 2; 
let z = x/y; 
z=2.5 自动变为小数
若x变为6：z=3 自动变为整数

7.2 关系运算符：> < >= <= ！`=` `==`和`===`

==：松散比较运算符：只比较等号左右两边的值，如：“666”==666 结果为 true
===：严格比较运算符：先比较类型，类型相同后再比较值，如：“666”===666 结果为 false

7.3 逻辑运算符：&&、||、！

7.4 赋值运算符：= += -= *= /= %=

7.5 三目运算符：条件？值 1：值 2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS运算符</title>
</head>
<body>
<script>
    //如果比较运算符左右两边有数字,会转为数字再进行比较
    console.log(3>10);
    console.log('3'>10);
    console.log(3>'10');
    //如果比较运算符左右两边都是字符串,会比较它们的编码值
    console.log('3'>'10');//51>49=>true
    /* '3'.charCodeAt()查看字符的编码值 */
    console.log('3'.charCodeAt());//51
    console.log('10'.charCodeAt());//49
    //console.log('超'>'博');

    //除法会按照实际结果显示结果
    console.log(6/2);//3
    console.log(3/2);//1.5

    let a = 1;
    let b = true;
    //松散比较运算符,只比较值,Number(true)=1
    console.log(a == b);//true
    //严格比较运算符,先比较类型,再比较值 number ≠ boolean
    console.log(a === b);//false

    //Number() 将参数转为数字,如果得不到数字结果,就是NaN(Not a Number)
    //Boolean()
    //以下五个特殊值转为布尔都是false
    console.log(Boolean(false));
    console.log(Boolean(0));
    console.log(Boolean(''));
    console.log(Boolean(undefined));
    console.log(Boolean(null));

    //三元运算符 1
    let c = 0;
    console.log(c==0 ? 'YES' : 'NO');//'YES'
    //=是赋值符号,给c赋值为0,Boolean(0)=false,所以取3号位置的值'NO'
    console.log(c=0 ? 'YES' : 'NO');//'NO'
</script>
</body>
</html>

8 流程控制

分支语句：（与 Java 一致）
- if 单分支结构
- if-else 双分支结构
- if-else-if 嵌套分支
- switch-case 选择分支

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05流程控制</title>
</head>
<body>
<script>
    //1.顺序结构
    console.log(1);
    console.log(2);
    console.log(3);
    console.log(4);
    //2.分支结构
    if('3'<'10'){
        console.log('比较的是数值3<10')
    }else{
        console.log('比较的是编码51<49')
    }
    //3.选择分支
    let gender = 666;
    switch (gender){
        case 1:
            console.log('先生');break;
        case 0:
            console.log('女士');break;
        default:
            console.log('未知');
    }
</script>
</body>
</html>

for 循环语句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>流程控制</title>
</head>
<body>
  <script>
//4.循环结构
let names = ['张三','李四','王五','赵六','钱七'];
for (let i = 0; i < names.length ;i++){
    console.log(names[i]);
}
//如果是用var声明的循环变量i,此处可以打印,是全局变量
//如果是用let声明的循环变量i,此处无法使用,是局部变量
//console.log(i)
//增强for循环 names是要遍历的集合/数组
//let n 表示每轮循环取出的内容,也就是本轮循环遍历到的元素
for (let n of names){
    console.log(n)
}
  </script>
</body>
</html>

帮大家回忆下Java的写法：

import java.util.ArrayList;

public class TestDemo {
    public static void main(String[] args) {
        ArrayList<Person> persons = new ArrayList<>();
        Person p1 = new Person("张三",3);
        Person p2 = new Person("李四",4);
        Person p3 = new Person("王五",5);
        persons.add(p1);
        persons.add(p2);
        persons.add(p3);
        //增强for循环
        for(Person p : persons){
            p.eat(p.name,p.age);
        }
    }
}
class Person {
    String name;
    int age;
    void eat(String name,int age){
        System.out.println(name+"练了"+age+"年Java");
    }
    public Person(String name, int age) {
        this.name = name;
        this.age = age;
    }
}

所以后面的JS循环结构也可以写成这样：

<script>
var person1 ={
    name: "张三",
    say: function(name){
        console.log(name+'你好');
    }
};
var person2 ={
    name: "李四",
    say: function(name){
        console.log(name+'你好');
    }
};
var person3 ={
    name: "王五",
    say: function(name){
        console.log(name+'你好');
    }
};
var persons = [person1,person2,person3];
for(let p of persons){
    console.log(p.name)
    p.say(p.name);
}
</script>

9 方法

Java 语言的方法和 JavaScript 的方法对比

Java: public 返回值类型方法名（参数列表）{方法体}
JavaScript: function 方法名（参数列表）{方法体}

四种定义方法的方式：

function 方法名（参数列表）{方法体}
let 方法名 = function（参数列表）{方法体}
const 方法名 = (参数列表)=>{方法体}
let 方法名 = new Function（“参数 1”，“参数 2”，… ,“字符串方法体”);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06函数</title>
</head>
<body>
<script>
    //1.JS通过function关键字来定义函数
    function f1(){
        console.log('今天星期五~');
    }
    f1();//调用函数
    f1();
    f1();
    function f2(n){//函数形参不需要写类型,指定一个形参名即可
        console.log('今天星期五~'+n);
    }
    f2(333);
    f2(334);
    f2(335);

    function f3(a,b){
        console.log(a+b);
    }
    f3(1,2);
    //形参个数>实参个数,未被赋值的形参值为undefined
    f3(1);//1+undefined=NaN(Not a Number)
    //形参个数<实参个数,多余的实参会被忽略
    f3(2,2,3);//2+2=4

    //arguments用来保存调用函数时传入的实参,可以看到实参的个数和值
    function f4(){
        console.log(arguments);
    }
    f4(50);//Arguments[50, ...]
    f4(50,60);//Arguments(2)[50,60, ...]
    f4(50,60,70);//Arguments(3)[50,60,70, ...]

    //使用return关键字返回方法的结果
    function f5(a,b){
        return a+b;
    }
    console.log(f5(1,2));//直接打印return的结果
    let res = f5(2,2);//将打印结果保存在res变量里并打印
    console.log(res);

    //第二种声明方式
    let f6 = function(){
        console.log('第二种')
    }
    f6();
    console.log(typeof f6);//function
    console.log(f6);//ƒ (){console.log('第二种')}

    //第三种:箭头函数
    const f7 = (n)=>{
        console.log('第三种箭头函数'+n);
    }
    f7(666);

    //第四种
    //new Function(参数1,参数2,...,方法体)
    //最后一个参数是字符串类型的方法体
    let f8 = new Function('name','age',"console.log('方法体'+name);return age;");
    console.log(f8('小明',18));
</script>


</body>
</html>

10 JavaScript组成

在这里插入图片描述

DOM 与 BOM 的关系：
DOM 的核心对象document 是 BOM中window对象的子对象

11 DOM操作

DOM（Document Object Model）文档对象模型，包含 W3C 规定的页面相关接口
DOM 把页面规划成节点层级构成的文档，当浏览器加载一个 WEB 页面时，就会创建这个页面的模型，称为 DOM 树。

这些接口可以操作网页的结构、内容与样式：
创建元素对象

let d = document.createElement(“div”);

将新元素到某个元素对象里

元素对象.append（新元素）；

修改元素的属性值

imgE.src = “money.jpg”;

通过 id 获取页面中的元素对象

let 元素对象 = document.getElementById(‘d2’);
h5 中也可以直接使用 id 值代表元素 console.log（id 值）；

通过选择器获取页面中的元素对象

let 元素对象 = document.querySelector（“选择器”）；

获取和修改控件的值

元素对象.value 获取
元素对象.value=“xxx” 修改

获取和修改元素的文本内容例：<div>文本内容</div>

元素对象.innerHTML获取
元素对象.innerHTML = “xxx” 修改

12 BOM操作

BOM（Browser Object Model）浏览器对象模型，是 JavaScript 与浏览器之间进行交互的接口
BOM 提供了一组对象，这些对象代表着浏览器相关内容，并提供了访问和控制这些对象的方法
以下是一些常见的 BOM 对象：

window
location
history

window 对象
window 对象是 JavaScript 中表示当前浏览器窗口的内置全局对象
它包含了浏览器窗口的所有属性和方法，可以通过该对象来访问和控制当前窗口的各种行为

isNaN（变量）判断变量是否是 NaN
parseInt（）将字符串或小数转成整数
parseFloat（）将字符串转成小数
alert（“xxx”）弹出提示框
confirm（“xxx”）弹出确认框
prompt（“xxx”）弹出提示输入框

location 对象

location.href 获取或修改浏览器的请求地址
location.reload() 刷新页面
location.search 获取查询字符串参数

history 对象

history.length 历史页面的数量
history.back() 返回上一页面后退
hisotry.forward() 前往下一页面前进
history.go(n) 正值代表前进n个页面负值代表后退n个页面
- history.go(0) 表示刷新页面
- history.go(-1) 表示回退一个页面,注意如果是第一个页面,无法回退
- history.go(2) 表示前进两个页面,注意如果是最后一个页面,无法前进