第四周预习-JavaScript基础语法

表单动态校验（JS产生的最终目的）
网页特效	服务端开发（Node.js）
桌面程序（Electron）	APP（Cordova）
控制硬件-物联网（Ruff）	游戏开发（cocos2d-js）

HTML，CSS和JS之间有什么联系？

HTML——决定结构和内容 CSS——决定外观样式 JS——决定功能（业务逻辑、页面控制）

④JavaScript的组成

ECMAScript，描述了该语言的语法和基本对象。
DOM（文档对象模型），描述处理网页内容的方法和接口。
BOM（浏览器对象模型），描述与浏览器进行交互的方法和接口。

二、JS引入方式

①行内式JS

样式范例如下~

<input type="button" value="戳我查看！" onclick="alert('Hello World!')"/>

可用于将单行/少量代码写于HTML标签的事件属性中（以on开头的属性）。
在HTML中推荐使用双引号，在JS中推荐使用单引号。
可读性差，引号易错，不常使用。

显示效果如下~

②内嵌式JS

样式范例如下~

<script>
    alert('道路千万条，安全第一条。行车不规范，亲友两行泪。');
</script>

可以在HTML文档中任意地方放置任意数量的标签。
一般把脚本 < body >置于元素的底部，可改善显示速度——因为浏览器在加载页面的时候会从上往下进行加载并解析。我们应该让用户看到页面内容，然后再展示动态的效果。

显示效果如下~

③外部JS文件

样式范例如下~

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

适用于JS代码较多的情况，利于HTML页面代码结构化，美观方便。
引用外部JS文件的<script>标签中间不能写代码！！！
外部脚本中不能包含<script>标签，直接写JS代码即可。

显示效果如下~

三、JS语法

①加注释

在<script>标签中的加注释方法（在vscode中可自行更改为自己适应的方式！）

单行注释：Ctrl + /
多行注释：Shift + Alt + a

效果如图~

②输入输出语句

方法	说明	归属
alert（msg）	浏览器弹出警示框	浏览器
console.log（msg）	浏览器控制台打印输出信息	浏览器
prompt（info）	浏览器弹出输入框，用户可输入	浏览器

使用示范样例

<!DOCTYPE html>
<head>
    <title>预习No.4</title>
    <meta charset="utf-8">
    <script>
        prompt('请在这里输入信息');
        alert('信息录入成功！')
        console.log('我是程序员能看到的');
    </script>
</head>
<body>
    
</body>
</html>

效果如下~

（开发人员工具，按F12或在“更多工具”中打开）

③变量

1.什么是变量？

变量是用于存放数据的容器，我们通过变量名来获取数据，修改数据。
变量是程序在内存中申请的一块用来存放数据的空间。
与酒店类比，一个变量就是酒店的一个房间，变量名即为房号，所存储的数据即为入住者。
其中，变量名由数字、字母、下划线_和美元符号$组成，严格区分大小写，不以数字开头，不能是关键字，保留字（如var，for），遵守驼峰命名法。

2.声明变量，赋值并输出

   <script>
        var num;
        num=100.05;
        console.log(num);
    </script>

JS关键字：var——用于声明变量，使用后计算机会自动为变量分配内存空间。

运行此段代码，在浏览器的开发者工具中便可看到100.5的输出值。

若要声明多个变量？

书写方式如下~

var mingzi='蛋仔',
    word='鸡蛋鸭蛋荷包蛋'，
    num=6;

只需写一个var，多个变量名间用逗号隔开。

3.变量的初始化

    var content='一段文字balabala';
    console.log(content);

变量的初始化——声明一个变量的同时并为其赋值。

这两段效果如下~

4.更新变量

    <script>
        var word='鸡蛋鸭蛋荷包蛋';
        console.log(word);
        word='咔咔我的小揪揪';
        console.log(word);
    </script>

一个变量被重新赋值后，其原有的值会被覆盖，变量的值将以最后一次赋的值为准。

效果如下

④运算符

又名操作符，用于实现赋值，比较和执行算术运算等功能的符号。

算术运算符

执行最简单的算术运算—— + 加；- 减；* 乘；/ 除；% 取模运算
避免使用浮点数，在算数运算中会有问题！
不能用浮点数直接比较来判定是否相等

递增和递减运算符

递增（++）递减（--）
在变量前——前置递增、前置递减（先运算后返回）
在变量后——后置递增、后置递减（先返回原值后运算）
必须配合变量使用

比较运算符（关系运算符）

两个数据进行比较时用，返回布尔值
<（小于）>（大于）<=（小于等于）>=（大于等于）
==（判等号）!=（不等于）=== !==（全等，要求值和数据类型都一致）

逻辑运算符

&&（与）：同真则真，一假即假 console.log（3>5&&3>2）;//false
||（或）：同假则假，一真即真 console.log（3>5||3>2）;//true
！（非）：取反
进行布尔值运算的运算符，返回值也是布尔值
用于多个条件的判断

逻辑与短路运算

当左边的表达式以及可以确定结果时，就不再进行右边表达式的运算了
表达式1为真返回表达式2，否则返回表达式1
空格or否定为假，其余为真

逻辑或短路运算

表达式1为真返回表达式1，否则返回表达式2

赋值运算符

=（直接赋值）
+=，-=（加or减一个数后再赋值）
*=，/=，%=（乘or除or取模后再赋值）

优先级

⑤数据类型

1.一些特性们

JavaScript是一种弱类型语言（动态语言）！

这意味着不必提前声明变量的类型，在程序的运行过程中会根据等号右边的值来自动确定其类型。

var num; //什么类型不知道呀

var age = 18; //数字型

var word='Hello World!'; //字符串型

JavaScript拥有动态类型！

这意味着相同变量可用作不同类型。（变量的类型可以变化）

var abc = 11; //此时abc为数字型

var abc = 'word'; // 此时abc为字符串型

2.数据类型的分类

简单数据类型：（Number，String，Boolean，Undefined，Null）
复杂数据类型：（Object）对象

数字型

1.可储存整数或小数。

2.数字型有进制表现，最常见的有二进制，八进制，十进制，十六进制。

八进制如何表示？——数字前加个0（如010=8），输出时会转换成十进制。
十六进制如何表示？——数字前面加0x（如0xa=10）。

3.数字型的范围

最大值如何表示？—— Number.MAX_VALUE
最小值如何表示？—— Number.MIN_VALUE
数值如下

4.特殊值

Infinity：无穷大，大于任何数值。
-Infinity：负无穷，小于任何数值。
NaN：Not a number，一个非数值（比如console.log（'abc'-10）输出结果会为NaN）。
isNaN（）：用于判断一个变量是否为非数字型（是数字—false，不是数字—true）

字符串型

1.可以是引号中的任意文本，可以使用单引号' '或者双引号" "（JS中推荐使用单引号）。

2.嵌套效果——外双内单or外单内双（两个相同种类的引号不可嵌套，单双引号搭配会报错）。

3.字符串转义符（以\开头）

4.字符串长度：构成它的字符数量，通过length属性可以获取。

用法——console.log(str.length);

5.字符串拼接：多个字符串用+拼接。

即字符串+任何类型（会被转换成字符串）=拼接后的新字符串

例——console.log（'abc'+10）; （输出abc10）

注意：若在字符串中加变量，要通过+与字符串连接，而不是把变量放进字符串里！

布尔型

1.两个值：true为真，false为假。

2.与数字型相加时：true值为1，false值为0。

console.log（true+1）;—2 console.log（false+1）; —1

Undefined

1. 如果一个变量声明了却未赋值，则是undefined未定义数据类型。

2.可手动定义一个元素为未定义数据类型（var abc = undefined；）

与字符串，数字相加：

Null

空值

与字符串，数字相加：

如何获取变量类型？——typeof 变量名

例如：

var word = 'ppap';

console.log（typeof word）; //boolean

var word = null;

console.log（typeof word）; //object

注：prompt取来的值为字符串型的！

3.数据类型转换

转换为字符串

toString（）——var num = 1；alert（num.toString()） ;
String（）强制转换——var num = 1；alert（String(num)） ;
加号拼接字符串（隐式转换）——var num = 1；alert（num+‘字符串balabala’） ;

转换为数字型

parseInt（String） ——字符型转整数数值型——parseInt（‘2.71828’）；// 2
parseFloat（String）——字符型转浮点数数值型——parseFloat（‘12345’）；
上两个中若有单位px，可去掉单位输出，若第一个字符为字母，输出NaN。
Number（）强制转换——字符型转数值型——Number（‘123’）；
JS隐式转换（- * /）——用算术运算隐式转换为数值型——‘12’-0

转换为布尔型

Boolean（）——其他类型转布尔型—— Boolean（‘true’）；

代表空、否定的值会被转换成false（如“ ，0，NaN，null，undefined”）
其余值都会被转换成true

⑥数组

1.概念

数组是一组数据的集合，其中每个数据被称为元素，在数组中可以存放任意类型的元素。

2.语法

new关键字创建数组——var arr（数组名）= new Array（）;

数组字面量创建数组——var arr（数组名）= [1,2,3,4,5];

⑦对象

1.概念

对象是由属性和方法组成的。JavaScript中几乎所有事物都是对象。

其中：属性：事物的特性（常用名词）

方法：事物的行为（常用动词）

2.创建对象的三种方式

1.利用字面量创建对象

        var stu={
            name:'xy',
            age:18,
            sex:'female',
            word:function(){
                alert('Hello World!');
            }
        };

2.利用new Object创建对象

        var stu=new Object();
        stu.name='xy';
        stu.age=18;
        stu.sex='female';
        stu.word=function(){
                alert('Hello World!');
            }

3.利用构造函数创建对象

        function person(name,age,sex){
            this.name=name;
            this.age=age;
            this.sex=sex;
            this.word=function(){
                alert('我叫'+this.name+',今年'+this.age+'岁，性别为'+this.sex);
            }
        }
        var stu=new person('xy',18,'female');

4.对象的调用

        console.log(stu.age);
        console.log(stu['name']);
        stu.word();

四、函数

①概念

封装了一段可被重复调用执行的代码块，通过它可实现大量代码的重复使用。

②函数的使用

先声明后调用

1.声明

自定义函数方式（命名函数）：function 函数名（形参）{ } ；
函数表达式方式（匿名函数）：var 函数名 = function（形参）{ }；

2.调用

函数名（）；

（使用范例见上“利用构造函数创建对象”）

③形参实参

形参：声明变量时函数名称后面小括号里的参数，是形式上的参数。
JS中形参的默认值：undefined。
实参：调用该函数时赋予的实际参数。
JS变量保存在栈内存中，基本数据类型的值也在此储存，值与值间独立存在

④关键字new

function stu(){

//函数体

}

var xiaoming = new stu（）；

利用关键字new创建一个函数，可实例化调用该函数。

在内存中创建一个新的空对象
让this指向这个新对象
执行构造函数里面的代码，给这个信息对象添加属性和方法
返回这个新对象（构造函数不需要return）

⑤同步和异步

同步任务

同步任务都在主线程上执行，形成执行线。

异步任务

JS的异步是通过回调函数实现的。

异步任务的三种类型

普通事件：如click，resize等
资源加载：如load，error等
定时器：包括setInterval，setTimeout等

课后总结

这次课程说实话没太跟上orz，好多地方都没有预习到，这里是一些补充！

1.行内引入的一些事件（只有行内引入必须结合事件）

<开始标签 on+事件类型="js代码"> </结束标签>

blur：失去焦点
change：下拉列表选项中项改变/文本框内容改变
click：鼠标点击
dbclick：鼠标双击
focus：获得焦点
keydown：键盘按下
keyup：键盘弹起
load：页面加载完毕
mousedown：鼠标按下
mouseup：鼠标弹起
mouseover：鼠标经过
mousemove：鼠标移动
mouseout：鼠标离开
reset：表单重置
select：文本被选择
submit：表单提交

2.变量声明的三种方式！

1.var：存在变量提升，可以多次声明，可以多次赋值，无自身作用域（函数作用域）。

什么是变量提升呢？

当使用var声明一个var变量时，该变量会被提升到作用域的顶端，但是赋值的部分不会提升。

简言之，在声明一个变量之前就可以输出它，输出值是undefined。

2.let：无变量提升，不可多次声明，可以多次赋值，有自身作用域（块状作用域）。

let一般用于循环遍历计数

在函数里使用var声明了一个变量，那么这个变量在整个函数内都是有效的，例如在for循环里用var声明一个变量，在for循环外也是可以使用的。但是let作用域是块状作用域，只在作用域里有效，例如在for循环里用let声明一个变量，在for循环外面是不能被访问的。

3.const：无变量提升，不可多次声明，不可多次赋值，定义一定要赋值，有自身作用域。

const一般用于写在全局作用域做常量

3.弱类型——运算时可以用隐式转换得到正确类型，所有类型都能进行运算。

1.number与string运算：+为连接运算，其余为数值运算

2.number与boolean 运算：boolean转换成number数值运算

3.number与undefined运算：NaN

4.number与null运算：null转换为0，数值运算

5.string与boolean运算：

纯数字字符串——+为连接运算，其余为数值运算

非纯数字字符串——+为连接运算，其与输出NaN

6.string与undefined运算：+为连接运算，其余输出NaN

7.string与null运算：

纯数字字符串——+为连接运算，其余为数值运算

非纯数字字符串——+为连接运算，其与输出NaN

1.number和string比较：

纯数字字符串——数值运算

非纯数字字符串——输出false

2.number和boolean比较：转换为number作比较运算

3.number和undefined比较：输出false

4.number和null比较：null转换为0作比较运算

5.string和boolean比较：

纯数字字符串——转换为数值进行比较

非纯数字字符串——输出false

6.string和undefined比较：输出false

7.string和null比较：

纯数字字符串——转换为数值进行比较

非纯数字字符串——输出false

4.数组的一些应用

修改原数组

push（）末尾添加元素
pop（）删除最后一个元素，返回该元素值
shift（）删除第一个元素，返回该元素值
unshift（）在数组头部添加元素，返回该数组长度
sort（）对数组元素进行排序
reverse（）数组中元素位置颠倒，返回该数组
splice（start，deleteCount？，item1？）通过删除或替换现有元素或原地添加新元素来修改数组，并以数组形式返回被修改内容（没有删除则返回空数组）

不改变原数组

slice（begin？，end？）返回一个新的数组对象，这一对象是一个由begin和end决定的原数组的浅拷贝（包括begin不包括end）
concat（）合并两个或多个数组，不改变现有数组但返回新数组
join（）将一个数组（or类数组对象）的所有元素连接成一个字符串，返回这个字符串。如果数组只有一个项目，那么将返回该项目而不使用分隔符（默认使用，分隔，如果使用“ ”则所有元素之间都没有任何字符）

5.字符串

charAt（）方法可返回字符串中指定位置的字符
concat（）方法用于两个or多个字符串
indexOf（）方法可返回某个指定字符串值在字符串中首次出现位置
includes（）方法用于判断字符串是否包含指定的子字符串
match（）方法可在字符串中检索指定的值，或找到一个或多个正则表达式的匹配，返回数组
repeat（）方法看字符串复制的指定次数
replace（）方法用于在字符串中用一些字符替换另一些字符。或替换一个正则表达式匹配的子串
replaceAll（）方法替换所有
search（）方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。返回与指定查找的字符串或者正则表达式相匹配的 String 对象起始位置
slice（start，end）方法提取字符串的某个部分，并以新的字符串返回被提取部分
substring（）方法提取字符串中介于两个指定下标之间的字符
split（）方法把一个字符串分割成字符串数组
trim（）方法用于删除字符串的头尾空白符。空白符包括：空格、制表符 tab、
换行符等其他空白符

什么是正则表达式？正则表达式是对字符串（包括普通字符（例如，a 到 z 之间的字母）和特殊字符（称为“元字符”））操作的一种逻辑公式，就是用事先定义好的一些特定字符及这些特定字符的组合，组成一个“规则字符串”，这个“规则字符串”用来表达对字符串的一种过滤逻辑。正则表达式是一种文本模式，该模式描述在搜索文本时要匹配的一个或多个字符串。

6.构造函数创建对象（除使用对象字面量外的定义对象方式）

使用new关键字调用的函数是构造函数constructor

构造函数是专门用来创建对象的函数

使用typeof检查一个对象时，会返回object

7.操作对象

访问属性：使用点访问符（.）
给对象添加属性：对象.属性=属性值；
删除对象属性：delete 对象.属性；
对象属性检测：“属性名”in对象，有返回true
object根构造函数：所有对象都直接或间接继承object，都能调用object原型里的方法

8.对象序列化

1.常规转换

obj.tostring()
默认tostring返回‘[object type]’，type为对象类型，其值可以是object，可重写

2.转换为json字符串

JSON.stringify(obj)

3.查询字符串

var qs = require('querystring');//引入node.js模块
qs.stringify(obj)

9.增强 for循环遍历对象

语法：for(var 变量 in 对象){undefined}

for...in语句对象中有几个属性，循环体就会执行几次
每次执行时，会将对象中的一个属性名赋值给变量

10.函数内部属性（只有在函数内部才能访问）
arguments：一个类数组对象，包含着传入函数中的所有参数。arguments主要用途是保存函数参数。
（当传递的实参个数超过形参的个数的时候不会报错,所有的实参都会保存在arguments里）
callee属性：arguments 对象有一个名为callee的属性，该属性是一个指针，指向拥有这个arguments对象的函数。（arguments.callee 实际上就是函数名。）
length 属性：arguments 对象的 length 属性返回实参个数。

11.this指向问题

this——执行环境上下文对象

在方法中，this表示该方法所属的对象
单独使用，this表示全局对象
在函数中，this表示全局变量
在事件中，this表示接收事件的元素
在显式函数绑定时，我们可以自己决定this指向

12.同步异步

同步任务是那些没有被引擎挂起、在主线程上排队执行的任务。只有前一个任务执行完毕，才能执行后一个任务。

异步任务是那些被引擎放在一边，不进入主线程、而进入任务队列的任务。只有引擎认为某个异步任务可以执行了（比如 Ajax 操作从服务器得到了结果），该任务（采用回调函数的形式）才会进入主线程执行。排在异步任务后面的代码，不用等待异步任务结束会马上运行，也就是说，异步任务不具有“堵塞”效应。

1.回调函数
function f1(callback) {
// ...
callback();
}

function f2() {
// ...
}

f1(f2);

f2写成f1的回调函数。
f2必须等到f1执行完成，才能执行。

回调函数的优点是简单、容易理解和实现，缺点是不利于代码的阅读和维护，各个部分之
间高度耦合，使得程序结构混乱、流程难以追踪（尤其是多个回调函数嵌套的情况），而且每个任务只能指定一个回调函数

介绍两个定时器setInterval（隔一段时间执行）和setTimeout（执行一次）
setInterval(function(){
执行代码
},时间间隔（毫秒）)
setTimeout(function(){
执行代码
},时间间隔（毫秒）)
clearTimeout(定时器标识)//清除setTimeout定时器
clearInterval(定时器标识)//清除setInterval定时器
2.事件监听
对于元素事件的监听也是异步的，因为只有满足==事件触发条件==时才会执行相应的函数

小结：感觉这次课程还有很多不理解未掌握的地方，课后的补充也大多基于学长讲课用的博客，在后续作业与练习的过程中，我会尽力在实践中吸纳这些知识的orz

lznzl

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
第四周预习-JavaScript基础语法

JavaScript最初由Netscape的Brendan Eich设计。Brendan Eich在1995年仅用10天完成了JavaScript的设计。最初将其脚本语言命名为LiveScript，后来Netscape在与Sun合作之后将其改名为JavaScript。与Java语法上有类似之处，一些名称和命名规范也借自Java，但JavaScript的主要设计原则源自Self和Scheme。JavaScript是世界上最流行的语言之一，是一种运行在客户端的脚本语言。
复制链接

扫一扫