web前端-4.JavaScript

4.1.JavaScript介绍

4.1.1.前端三层

HTML 结构层 写网页结构 身体
CSS 样式层 写网页样式 衣服
JavaScript 行为层 写网页特效 行为

4.1.2.JavaScript发展史

1）1995 网景联合sun 发布JavaScript 布兰登艾奇（js之父）
2）2011 ECMAScript5 使用最普遍的一个版本

4.1.3.JavaScript 组成部分

1）ECMAScript 核心js js的基础语法、变量、数据类型、运算符、分支结构、循环结构、函数、对象、数组等
2）DOM 文档对象模型
3）BOM 浏览器对象模型
ECMA：欧洲制造商协会

4.1.4.HTML中引入JavaScript的方式

• 1）内部方式

	<script>
        js代码
    < /script>

<script type="text/javascript">< /script>						//  type属性可以省略

可以写在任意位置
推荐写在body结束标签之前
一个页面可以有多个script

• 2）外部方式

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

可以写在任意位置
推荐写在head中
一个页面可以有多个script

• 3）注意

两种引入方式不能共用一个script标签
如果共用，外部样式生效

• 4)JS的应用方式

1.将JS代码嵌入到开始标签中，通常结合事件
2.在HTML文档中嵌入script标签，在script标签间写JS代码，script的位置通常在被操作元素的后面，如果要放在前面，可以结合window.onload使用
3.将JS代码写在一个独立的js文件中，文件的后缀为.js，然后使用script的src属性将js文件加载到当前页面

4.1.5.JavaScript的输出方式

1）输出到控制台
console.log();
2）输出到网页
document.write();
输出到页面的内容在script后面
3）弹出警告框
window.alert();
简写：alert();
注意：alert会阻止页面程序的得执行 以上都是顺序执行，由上往下，由左往右
4）写入到 HTML 元素：innerHTML属性
1.用于获取标签内的文本内容
var spanid=document.getElementById("spanid");
alert(spanid.innerHTML);//直接获取属性
2.向标签内设置新的内容，可以是html代码
var divid=document.getElementById("divid");
divid.innerHTML="<li>haha</li>";

4.1.6.js调试

打开控制台：ctrl+shift+J
控制台报错：
1）错误类型
2）错误原因
3）错误位置

4.1.7.多个script报错

一个script报错，对其他script不会影响
同一script内，错误之前不会受影响，错误及错误之后能执行

4.1.8.js的注释

1）HTML <!-- 注释的内容 -->
2）CSS /* 注释的内容 * /
3）JavaScript
①单行注释
//注释的内容
②多行注释
/* 注释的内容 * /

注意：注释之间不能相互嵌套

4.1.9.JavaScript的语法

1）JavaScript区分大小写（大小写敏感）
2）js语句以分号或者换行结尾
3）推荐一行只写一条语句，并且以分号结尾
4）js不识别多余的空格

4.2.变量

1）定义

值可以改变的量称为变量
字面量：程序中的固定的值，如10,20
变量：内存中开辟出来的用来存储数据的存储空间

2）作用

存储数据的容器

3）声明变量

var 变量名; let 变量名称；
例如：var x;
let和var的区别：
let定义的变量必须是在定义之后使用，不可以在定义之前使用
let定义的变量只能在块级作用域下面使用

4）变量赋值 =

变量名 = 值;
=:赋值
等号右面的值赋给等号左边
例如：x = 5

5）变量的初始化

声明变量的同时给变量赋值，称为变量的初始化
例如：var x = 5;

6）一条语句可以声明多个变量，用逗号隔开

例如：
var x,y,z;//声明变量没有赋值
var x = 5,y = 6,z= x + y;//声明变量的同时赋值

7)声明变量，没有赋值，返回undefined（未定义）

var x;//undefined

8）没有声明，直接调用，报错

console.log(b);//报错

9)重新赋值，后面的值会替换前面的值

var x = 5;
console.log(x);//5
x = 100;//重新赋值
console.log(x);//100

10）重新声明变量，js的值不会丢失

var x = 5;
var x;//重新声明
console.log(x);//5

11)声明提升、赋值留在原地

声明提升到所有代码最上面，赋值留在原地
console.log(x);//undefined
var x = 100;
等价于：
var x;
console.log(x);//undefined
x = 100;
注意：声明变量写在所有代码最上面

12）不写var的情况

x = 5;//没用var声明 是全局变量；
给window对象添加的一个属性
console.log(x);//5

var y = 5;
console.log(y);//5

13)变量的命名规则

①变量名区分大小写 a和A是两个变量
②可以包含数字、字母、下划线、$
③不能以数字开头
④不能是JavaScript的关键字和保留字
⑤见名知意，起有意义的名字
⑥多个单词建议驼峰命名法
大驼峰 每个单词首字母大写 UserName
小驼峰 第一个单词首字母小写，后面单词首字母大写 userName

4.3.数据类型

1、定义

数据类型就是声明变量的类型

2、六大数据类型

1）基础数据类型 5个
number 数字类型
string 字符串类型
boolean 布尔类型，包含true和false
undefined 未定义类型
null 空类型
2）引用数据类型 1个
object 对象类型

3、数据类型
1）number 数字类型

包含了所有的数字（正负、整数、小数、极大极小）、Infinite、NaN（not a number）

2）string 字符串类型

引号包含的任意内容
单双引号都可以
注意：引号之间相互嵌套时，单引号内嵌套双引号，双引号内嵌套单引号
’ " " ’ , " ‘’ "

3）boolean 布尔类型

包含true和false
真 假
对 错

4）undefined 未定义类型

声明变量没有赋值，默认为undefined

注意：
①undefined一般不主动去赋值 var x;//undefined
②undefined表示数据类型不确定

5）null 空类型

表示数据类型确定为对象
作用：主动用来释放对象
注意：typeof时返回object

6）object 对象类型

大括号包含的键值对
多个键值对之间用逗号隔开
最后一个键值对后面不能加逗号
键值对由键名和键值组成
键名和键值用冒号隔开
例子：
var girlFriend = {
girlFriendName:‘迪丽热巴’,
age:18
};

4、判断数据类型

typeof 变量名
返回5个值：number string boolean undefined object

5、js拥有动态的数据类型

var x;
console.log(typeof x);//undefined
x = 5;//重新赋值
console.log(typeof x);//number
x = ‘5’;//重新赋值
console.log(typeof x);//string

6、数据类型相互转换

1）string类型转换为number
①转换为整数
parseInt()
只取整数部分，不会四舍五入
如果string转换不了为number，返回NaN
②转换为小数
parseFloat()
只取识别一个小数点，不会四舍五入
如果string转换不了为number，返回NaN
2）number类型转换为string 将一个数字，与一个空字符串进行连字符运算，那么就是自动转为字符串了。
var a=123; var b=a+""; console.log(b);//123 console.log(typeof b);//string

4.4.运算符

1、算数运算符

+(加) -(减) *(乘) /(除) %(模，取余) ++（自增） --（自减）

%：取余，判断奇偶数、判断倍数

+ - * / %:

number类型：全是算数运算，返回number类型
string类型：- * / %:转换为number类型进行计算，如果不能转换，返回NaN

+遇到字符串，直接进行字符串拼接，返回string类型
++：自增 相当于自己+1 例如：i++ 相当于 i = i + 1;
–：自减 相当于自己-1 例如：i-- 相当于 i = i - 1;

++i:前++ i++:后++
1）对于变量自己本身来说，前++和后++ 没有区别，自己本身都+1,变量的值已经发生改变
2）前++ 先执行+1，再赋值
后++ 先赋值，再执行+1

2、比较运算符
只能比较两个值，返回布尔值

>  <  >=  <=  ==  !=  ===  !==
>=:大于或者等于
<=:小于或者等于

==：等于  只判断数值     5 == '5'//true
===：全等、绝对等于  即判断数值，又判断数据类型    5 === '5' //false

!=:不等于  ==  取反
!==:不全等  === 取反

console.log(undefined == null);//true
console.log(undefined === null);//false

console.log(NaN == NaN);//false
console.log(NaN != NaN);//true

3、赋值运算符

=      等号右侧的值赋给等号左侧  
x = y:把y赋值给x    
+=     x+=y  相当于  x = x + y    
-=     x-=y  相当于  x = x - y    
*=     x*=y  相当于  x = x * y
/=     x/=y  相当于  x = x / y 
%=   	x%=y  相当于  x = x % y

4、逻辑运算符

链接多个表单式，返回布尔类型
&&:逻辑与 并且
所有表单式都为true，最后结果为true，只要有一个为false，最后结果为false
||：逻辑或 或者
只要有一个为true，结果就为true，所有表达式都为false，结果才为false
!：逻辑非 取反
逻辑与的优先级大于逻辑或

5、自增练习

 ++    
 -- 
 && 
 ||
==
===
!=
!==
>=
<=

var a = b = c = d = e = f = 1;
alert(a++);//1
alert(++b); //2
alert(++c);//2
alert(d++);//1
alert(++e);//2
alert(++f);//2

var x = 1;
console.log(x++);//1   x=2  y = x++;
console.log(x++);//2   x = 3 y = x++;
console.log(++x);//4   x = 4
console.log(++x);//5   x = 5

4.5.分支结构

程序 = 数据 + 算法
数据：变量、数组、对象
算法：分支结构、循环结构

1、if语句 单分支结构

if(条件){
   
满足条件执行的语句
}
**一件事情，满足就执行，不满足什么也不做**

2、if else 语句 双分支结构

if(条件){
   
满足条件执行的语句
}else{
   
不满足条件执行的语句
}
**一件事情，满足就执行if里面的语句，不满足就执行else里面的语句
只能二选一执行**

3、else if语句 多分支结构

if(条件){
   
满足当前条件执行的语句
}else if(条件){
   
满足当前条件执行的语句
}else if(条件){
   
满足当前条件执行的语句
}else{
   
以上条件都不满足执行的语句
}
**else可以省略
多件事情，满足就执行对应的代码
多选一执行，上面的条件一旦满足，就不往下执行**

4、动态输入框
prompt(‘提示’,默认值) 默认值可以省略
注意：prompt返回string类型

/*判断是否可以结婚	结婚条件	男  >= 22
女  >= 20*/
var age = prompt('请输入你的年龄');
var sex = prompt('请输入你的性别');
if((sex == '男' || sex == '女') && (age > 0 && age < 150)){