无标签

前端

发布日期: 2021-12-01

文章字数: 1.9k

阅读时长: 8 分

1. 网页中的三剑客

html: 网页内容

css: 网页样式

javascript:网页的交互

2. CSS中的动画

旋转
平移
缩放

3. Javascript的简介

现在我们学习的javascript其实是EcmaScript
下面我们将要学习主流的EcmaScript5的版本(es5)
我们使用javascript可以实现和 用户和页面的交互
js也是一个跨平台的编程语言
js是由浏览器解释执行的;

4. Javascript和Java的区别

没有关系; 雷锋–>雷峰塔;

js是弱类型语言,java强类型语言;

js是解释型语言,java是编译型语言;

5. 编写第一个js文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个js</title>
    <script>
        console.log("hello 新卓越");
    </script>
</head>
<body>
</body>
</html>

6. js引入的方式

内嵌方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个js</title>
    <script>
        console.log("hello 新卓越");
    </script>
</head>
<body>
</body>
</html>

优点: 编写方便

缺点: js的操作和显示和样式没有分离,不建议在生成环境中使用;

外部引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个js</title>
    <script  src="base.js">
    </script>
</head>
<body>
</body>
</html>

优点: 显示和样式和操作分离

缺点: 没有缺点

7. js中的变量的定义

<script>
    //定义一个变量(es5中没有定义常量的语法)
    var a = 10;

    //es6中定义变量
    let b = 20;
    //es5中定义常量
    const c = 30;
    console.log(a, b, c);
</script>

8. js中的变量的类型

js虽然是弱类型语言,但是还是变量类型的;

字符串(string)
数字(number)
布尔(boolean)
数组(Array)
对象(object)
undifine: 变量被定义了,但是没有被赋值;
null:值为null

9. js中的标识符

同何编程语言一致

10. js中的命名法

大驼峰
小驼峰

同何编程语言一致

11. js中的表达式

同任何编程语言一致

表达式: 能得出固定的值的一条代码

“a” 1 10.2: 是表达式 “值表达式”

var a=10; 不是表达式; 变量的定义不是表达式

a=20; 是表达式; 值表达式

12. js流程控制

同java一致

0,’’,””,null,undefine,0.0 :都为false

判断
循环
分支

13. js中的语句的结尾

js中的语句可以不以分号结尾,要求一行只写一条语句;

但是后面有一些第三方的库会对代码进行压缩,不写分号可能会报错的;

建议每一行都加上分号;

14. js中的运算符

和java一致

==:在js中只比较值,不比较类型

===: 在js值不仅比较值,还比较类型;

15. 字符串的拼接

<!--es5中的字符串的拼接-->
<script>
    let a = "hello"
    console.log(a + "新卓越")
</script>

<!--es6中借助模板字符串语法进行字符串的拼接-->
<script>
    let b = "你好";
    console.log(`你好${b}`)
</script>

16. js中的函数

函数: 实现特定功能的代码的组合;

函数的定义:

1
2
3

function 函数名称(形参列表) {
    	函数体
}

函数的调用:

1	函数名称(实参列表)

17. js中的匿名函数

定义函数时不写函数名称,把函数赋值给一个变量,此变量是函数对象

1
2
3

let func1 = function (a, b) {
    return a + b;
}

18. 普通函数和匿名函数

普通函数可以使用在前,定义在后;

匿名函数必须先定义才能使用

普通函数和匿名函数中的this都是Window对象

19. EcmaScript的核心

基础语法
Bom: 浏览器对象模型
Dom: 文档对象模型

20. js中的数组

数组的定义:

1	const array = [2, 4, 1, 10];

1
2
3

//传递一个参数时,代表数组的长度,传递多个参数是数组中的元素
const array2 = new Array(2);
const array3 = Array(12);

21. js中的数组的遍历

const array1 = [20, 30, "你好", 21.22];
for (let i = 0; i < array1.length; i++) {
    console.log(array1[i])
}

const array1 = [20, 30, "你好", 21.22];
for (let index in array1) {
    console.log(array1[index])
}

22. 数组中存放键值对

1
2
3

const array1 = [20, 30, "你好", 21.22];
array1["name"] = "admin"
console.log(array1["name"])

23. 数组中的元素的操作

const array1 = [20, 30, "你好", 21.22];
//截取数组中的元素,[start,end),生成一个新数组
let slice = array1.slice(1, 4);

//替换原数组的指定索引位置的元素
array1.splice(3, 1, "hello");
console.log(array1)

1 2	array1.push(100, 200);//给原数组尾部添加元素 array1.pop();//移除原数组尾部的一个元素,返回被移除的元素

const array1 = [20, 30, "你好", 21.22];
array1.unshift(100);//给数组的首部添加元素
array1.unshift(200);
array1.shift();//数组的首部移除元素

24. js中的面向对象编程

24.1 js中的对象的创建

字面量的方式创建对象

let obj1 = {
    name: "admin",
    age: 20,
    say: function () {
        console.log("say....")
    }
}
//动态添加属性
obj1.sex ="男"
//动态添加方法
obj1.see=  function (){}

new Object();方式创建对象

let obj2 = new Object({
    name: "admin",
    age: 20,
    say: function () {
        console.log("say....")
    }
});

使用构造函数创建对象

function Person(name, age) {
    this.name = name;
    this.age = age;
}

//原型对象,用来共享属性和方法的
Person.prototype.say = function () {
    console.log(this)
}

let p1 = new Person("admin1", 10);
let p2 = new Person("admin2", 20);

p1.say()

数据代理(Vue底层的实现)

通过动态的定义一个代理属性(这个代理属性不配置value项),可以通过操作代理属性从而操作真实属性

let p1 = {
    name: 'admin',
    age: 20
}
Object.defineProperties(p1, {
    _name: {
        get() {
            console.log("getter....", this)
            return this.name;
        },
        set(v) {
            console.log("setter....")
            this.name = v;
        }
    }
});


p1._name = "男一号";
console.log(p1)

25. js中的对象成员的简写

let name = "amdin";
let obj = {
    name,
    age: 20,
    say() {

    }
};

26. 箭头函数

箭头函数中的this指向的是window对象,非当前调用的对象

var obj = {
    name: "admin",
    age: 30,
    sub(a) {
        //这的this指向的是当前调用对象obj
        console.log(this)
        return a + this.age;
    },
    add: (a) => {
        console.log(a, this)
        //这里面是不能出现this.age,因为this指向的是window对象
        return obj.age - a;
    }
};
console.log(obj.add(10))
console.log(obj.sub(100))

27. js中的bom

bom: brower object model(浏览器对象模型)

实时我们学习的bom就是一个对象window

window对象不需要我们创建,js已经给我们创建好了,我们可以直接使用;

window.alert("msg");//提示信息
window.close();//关闭窗口
window.location.href = "http://www.sina.com";//地址重定向
window.onload =  function (){
        console.log(this)
    };//页面加载完成之后的回调函数
window.document;//dom对象

js中的定时器:

1
2
3

window.setTimeout(function () {
    console.log("我执行了..")
}, 3000)

js中的周期执行器:

//返回定时器的id
let r = window.setInterval(function () {
    console.log("我执行了...")
}, 1000)

setTimeout(function () {
    //停止定时器
    clearInterval(r)
}, 3000)

Yang Shiyu

https://yangshiyu52.github.io/2021/12/01/qian-duan-javascript/

本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 Yang Shiyu !

无标签

dom

2021-12-08 前端

css

2021-11-22 前端

JavaScript

1. 网页中的三剑客

2. CSS中的动画

3. Javascript的简介

4. Javascript和Java的区别

5. 编写第一个js文件

6. js引入的方式

7. js中的变量的定义

8. js中的变量的类型

9. js中的标识符

10. js中的命名法

11. js中的表达式

12. js流程控制

13. js中的语句的结尾

14. js中的运算符

15. 字符串的拼接

16. js中的函数

17. js中的匿名函数

18. 普通函数和匿名函数

19. EcmaScript的核心

20. js中的数组

21. js中的数组的遍历

22. 数组中存放键值对

23. 数组中的元素的操作

24. js中的面向对象编程

24.1 js中的对象的创建

25. js中的对象成员的简写

26. 箭头函数

27. js中的bom

你的赏识是我前进的动力