【Javascript基础语法】第五周预习博客
Javascript基础语法
- 前言
- 一、初识JavaScript
-
-
- 1.JS是什么
- 2.作用
- 3.浏览器执行js简介
- 4.Js组成
-
- 二、JS的引入方式
-
-
- 1.行内式
- 2.内部引入
- 3.外部引入
-
- 三、js语法规范
-
-
- 1.标识符的命名规范
- 2.程序注释
- 3..常用标识符命名方法
-
- 四、变量
- 五、数据类型
- 六、运算符
- 七、条件循环语句
-
-
- 1.条件语句
- 2.循环语句
-
- 八、数组
- 九、对象
- 十、函数
- 十一、作用域
- 十二、预编译
前言
第五次预习博客，本次预习内容为：js的引入方式，js语法规范，变量，数据类型，运算符，条件循环语句，数组，对象，函数，作用域，预编译
一、初识JavaScript
1.JS是什么
- Javascript是最流行的计算机语言之一，是运行在客户端的脚本语言
- 脚本语言：不需编译，在运行中由JS解释器（js引擎）逐行解释并执行
2.作用
- 表单的动态校验（密码强度检测）–是最初目的
- 网页特效
- 服务端开发
- 桌面程序
- App
- 控制硬件-物联网
- 游戏开发
3.浏览器执行js简介
- 渲染引擎：解释html和css，也称作内核
- js引擎：（js解释器）读取网页中的JavaScript引擎来执行代码，JavaScript引擎执行代码时逐行解释每一句源码，然后由计算机执行
4.Js组成
- ECMAScript JS语法
- DOM 文档对象模型
- BOM 浏览器对象模型
二、JS的引入方式
1.行内式
<开始标签 on+事件类型=“js代码”>
代码如下：
<body>
<input type="button" οnclick="alert('这是行内引入')" value="button" name="login">
body>
2.内部引入
在head或body中，定义script标签，然后在script标签里面写js代码
代码如下：
<script>
alert("这是内部引入方式");
script>
3.外部引入
定义外部js文件(.js结尾的文件)
在head或者body中，添加以下代码
<script type="text/javascript" src=".js文件的路径">script>
//注意：两标签之中不可再写任何代码
注:
-
script标签一般定义在head或body中
-
Script标签要单独使用，要么引入外部js，要么定义内部js，不要混搭使用
三、js语法规范
1.标识符的命名规范
-
第一字符必须是为字母、下划线( _ )或者美元符号( $ )，不能是数字
-
其他字符可以是字母、下划线、美元符号或数字，最好不要包含其他字符
-
不能把关键字或者保留字作为标识符
2.程序注释
1.单行注释
使用双斜线//可以定义单行注释或尾随注释
//prompt('这是单行注释');
2.多行注释
多行注释又被称为块注释，可以使用/*和*/进行定义，位于注释开始标签/*和注释结束标签*/之间的任何字符都将被解释为注释并忽略
/* alert('这是多行注释'); */
3.文档注释
文档注释以“/**”开始，以“/”结束，且每行都以一个星号“”开头
/**
* 这是
* 文档
* 注释
*/
3…常用标识符命名方法
1.驼峰命名法
第一个单词首字母小写，其余所有单词首字母大写。变量、函数、方法、属性等基本都采用这种命名方法
2.帕斯卡名法
所有单词首字母大写。经常被用在类、接口的声明中，例如，HelloWorld就可以作为一个类名，而接口名经常在前面加一个大写字母 I，例如 IHelloWorld。
3.匈牙利命名法
在标识符前面增加小写字母做前缀，多用于C、C++的标识符命名。其基本规则是：
标识符名称=特性前缀+功能描述
四、变量
变量就是储存数据的容器
1.变量的使用
- 声明变量
var age（变量名）; - 赋值
age = 10;
2.变量的初始化
声明变量并赋初值 var age = 10;
3.变量的语法扩展
- 更新变量：变量被重新赋值后原有的值会被覆盖
- 同时声明多个变量：
var age=10,address='china',salary=5000; - 特殊情况：只声明不赋值，使用变量结果为undefined（未定义的）；未声明未赋值直接使用变量结果为报错；不声明直接赋值使用变量结果为正常；
五、数据类型
在JS中一共有九种数据类型，有六种基本数据类型，分别是：String （字符串）、Number （数值）、Boolean （布尔值）、Null （空值）、Undefined （未定义）、Object（对象）
1.Number 数值
在JS中所有的数值都是Number类型,包括整数和浮点数（小数）
- Number.MAX_VALUE 数字的最大值
- Number.MIN_VALUE 大于0的最小值 5e-324
- Infinity（正无穷大）
- -Infinity（负无穷大）
- NaN表示一个特殊的数字，表示Not A Number，用来判断非数字，
NaN（）若括号内是数字（10）便返回false，若括号内不是数字（‘宋琳’-10）则返回true - 八进制 以0开头，十六进制 以0x开头
2.String 字符串
- 可以用
' '也可以用'' '' - 转义字符： \n , \ , ’ , ‘’ , \t , \b
- 字符串长度：length
var str='My name is song lin';
console.log(str.length); //控制台输出str字符串的长度19
- 字符串的拼接： 字符串+任何类型（拼接前转成字符串类型）= 拼接后的新字符串
六、运算符
运算符也被称为操作符，是用于实现赋值、比较和执行算数运算等功能的符号。
JavaScript中常用的运算符有：
● 算术运算符： + - * / %
● 赋值运算符： = += -= *= /= %=
● 比较运算符：== != > < >= <=
● 逻辑运算符: && || !
● 位运算符： & | ~ ^ >> << >>>
七、条件循环语句
1.条件语句
1.单分支
当括号内的判断条件/表达式结果成立的时候，执行执行语句
if(表达式){
执行语句;
}
2.双分支
当括号内的判断条件/表达式结果成立的时候，执行执行语句1，否则执行执行语句2
if (判断条件/表达式){
执行语句1;
}else{
执行语句2;
}
3.多分支
3.1 if- else if -else结构
从上往下，满足哪个条件就执行对应的语句，都不满足时，执行最后的else的语句，只能进入其中之一
if(表达式1) {
执行语句1;
}else if(表达式2) {
执行语句2 ;
}else if(表达式3 ){
执行语句3;
}else{
执行语句4;
}
3.2 switch-case-default结构
表达式的结果等于哪个case的常量，则执行其后的语句，执行完break以后，就跳出switch结构，如果都不满足，执行default语句，break不可省略
witch(表达式){
case常量1:
语句1;
break;
case常量2:
语句2;
break;
case 常量3:
语句3;
break;
default:
语句4; //如果上述语句都不成立，执行语句4
break;
}
2.循环语句
在给定条件成立时，反复执行某程序段，直到条件不成立为止
1.while循环
先判断表达式，表达式成立后执行循环语句，循环语句应有循环结束的条件
while(表达式)
循环语句;
}
2.do-while循环
do-while循环先去执行次循环语句， 然后再去判断一次表达式，表达式为真则继续循环，表达式为假则结束循环
do
{
循环语句;
}while(表达式);
3.for循环
先求解表达式1 (只求一次) ;求解表达式2，若其值为真(非0)，则执行for语句中指定的内嵌语句，然后求解表达式3;再求解表达式2，若为假，则结束循环， 注：三个表达式都可以省略，但分号不能省略
for(表达式1:表达式2:表达式3)
{
循环语句;
}
八、数组
1.数组的概念
数组是一组数据的集合，其中每个数据成为元素，数组中可以存放任意类型的元素，数组是一种将一组数据存储在单个变量下的优雅方式
2.创建数组
利用new创建数组
var 数组名 = new Array();
利用数字面量创建数组
var 数组名 = [元素1,元素2,元素3];
- 数组的初始化：创建数组并赋初值
var arr = [ 1.05 , '数组' , true ];
3.获取数组元素
数组名[索引号] 索引号从0开始
4.通历数组
-
数组中每个元素从头到尾访问
-
方法：循环
var arr = ['red' , 'green' , 'blue'];
for( var i=0 ; i < arr.length ; i++) {
console.log ( arr[i] );
}
- 数组长度：
数组名.length，可以动态的检测数组元素的个数 - 数组转变为字符串并用分隔符分割
var arr = ['red' , 'green' , 'blue' , 'pink'];
var str = '';
var t = '|';
for( var i=0 ; i < arr.length ; i++) {
str += arr[i] + t;
}
console.log( str ); //最终str的值为: red|green|blue|pink
5.数组中新增元素
- 通过修改length长度新增数组元素，新增的数组值为undifined
- 通过修改索引号，追加数组元素，若索引号存在则为覆盖
九、对象
- 对象也是变量，但是对象包含很多值
var duixiang = {name:"peiqi", age:"5", sex:"girl"};
- 值以
名称:值对的方式来书写（名称和值由冒号分隔） - JavaScript 对象是被命名值的容器
1.对象属性
名称:值对被称为属性
var person = {firstName:"Bill", lastName:"Gates", age:18};
2.对象方法
对象也可以有方法
方法是在对象上执行的动作
方法以函数定义被存储在属性中
方法是作为属性来存储的函数
3.this 关键词
在函数定义中，this 引用该函数的“拥有者”
this.firstName 的意思是 this 对象的 firstName 属性
4.对象定义
创建一个 JavaScript 对象：
var person = {
myName:"songlin",
age:19,
eyeColor:"black"，
};
5.访问对象属性
对象名.属性名或者对象名["属性名"]
如：
person.myName ;
person["myName"] ;
6.访问对象方法
对象名.方法名()
如：
name = person.fullName();
十、函数
1.什么是函数
函数可以理解为，封装好的代码块，有独立的作用域，在某代码调用它时被执行
2.函数声明、调用
通过 function 关键词进行定义，其后是函数名和括号 () 括号里里面放形参数，括号号后面{ }，{ }里面放的就是要执行的代码。
然后就是函数的调用，函数名加括号，调用时，括号里面放实参数；
function fn(形参){
//要执行的代码
}
fu(实参);
3.函数表达式
var x = function (a, b) {return a * b};
4.函数传参
- 形参：形式上的参数——给函数声明一个参数；
- 实参：实际的参数——在函数调用时给形参赋的值
- JavaScript 函数定义不会为参数规定数据类型；不会对所传递的参数实行类型检查；不会检查所接收参数的数量
- 如果调用参数时省略了参数（少于被声明的数量），则丢失的值被设置为：undefined
十一、作用域
数据起作用的范围（某条数据可以在什么范围内使用）
作用域的分类：
- 全局作用域：通过var或function声明在全局（声明在任意函数之外和代码块之外）中的数据，在全局的任意地方都可以调用或修改（即全局变量）和在window下的属性
- 局部作用域：函数作用域：声明在函数内部的某个数据（var，function，参数）,就只能在函数内部使用（函数的局部作用域）；块级作用域（ES6新增）
十二、预编译
1.JS运动过程：
- 语法分析
- 预编译
- 解释执行
2.预编译的作用：
- 函数声明整体提升，即写出一个函数声明，不管写在哪里，系统总会将其提升到逻辑最前面。
- 变量声明提升
3.预编译四部曲（函数执行的前一刻）：
- 创建AO对象（Activation Object）（执行上下文）；
- 找函数形参和函数内变量声明，将形参名和变量名作为AO对象的属性名，值为undefined；
- 将实参值和形参统一，实参值赋给形参；
- 在函数体里面找函数声明，值赋予函数体。