JavaScript 基础day1

JavaScript

1. js概述

1.1、浏览器端支持的三种语言

     HTML(标记语言)：用于标记页面的结构于内容

     css(样式语言)：用于美化页面

     JavaScript(逻辑语言)：为页面赋予行为动作(与用户进行交互)

1.2、Javascript的作用

• html引入js的初衷是解决表单验证问题
• 页面特效
• 动画效果百度地图
• 物联网
• 网页游戏
• 服务器端开发(Node.js)

1.3、Javasrcript的组成

• ECMAScript      语法规范
• BOM                  浏览器对象模型
• DOM                  文档对象模型

1.4、 Javascript的语法规则

• 严格区分大小写
• 每行只写一条语句 如果书写多条需要使用逗号分隔开
• 语句写完带分号结尾

1.5、Javascript的书写位置

• 外部引入
  
  将js单独保存在一个文件中。
  再使用script标签的src属性将其引入到当前文件。
  这种方式即为外部引入。
   

  <script src="引入外部的一个js文件"></script>

   

• 内部引入
  
  书写再script标签内部，这种方式即为内部引入。
   

  <script type="text/javascript">
  	书写在这里
  </script>

   

• 行内引入
  
  书写在html标签的属性事件中，这种方式即为行内引入。

  <div onxxxx="书写在这里"></div>

  一个script标签要么书写内部js代码，要么引入外部js代码，不可以同时进行。一个script标签如果用于书写内部js代码，那么不允许有src属性。`

1.5、JavaScript的注释

• 单行注释
  
  格式： 双斜杠
   

  //  注释内容   仅影响斜杠开始到结尾

  快捷键：CTRL + /

• 多行注释
   

  /*
  	...  
  	注释内容 
  	...
  */

  多行注释可以包含单行注释，但多行注释不能嵌套 

   

• 作用
  
  注释的内容并不会被js当作代码来执行。
  
  注释一般是针对当前代码进行的解释说明，增加程序的可读性，这样有利于其他人接受，或方便以后对代码进行备查。
   

2. 常用的输入与输出

 2.1、输入

• prompt('内容')
  
  弹出一个交互信息获取框，并显示提示信息。

  
   

• confirm('内容')
  
  弹出一个，确认交互对话框。仅需要用户进行确认或取消操作即可。
  

2.2、输出

• alert('内容')
  
  弹出一个提示信息框，这种方式主要是弹出提示信息给用户
   
• console.log('内容')
  
  在控制台输出信息，此种方式主要是给程序员使用
   
• document.write('内容')
  
  将内容输出到html的body标签内

3.变量

3.1、什么是变量

        变量的本质就是在内存中开辟一片空间用来存储数据（空间有一个标识(也就是变量的名字)）

3.2、声明变量

语法：let 变量名              //   声明一个变量

           let 变量名 = 值      //   声明一个变量同时赋值，称为 => 变量的初始化

同一个let变量只能声明一次

说明： = 符号在这里是赋值的作用

示例：

let a;		// 仅声明一个变量，以后再赋值
a = 200;	// 这是以后赋值的语句

let b = 100;	// 也可以声明同时赋值即为初始化

console.log(a,b)

3.3、访问变量

   将某个变量的值读取出来，进行显示或进行其他运算，这种操作行话称之为访问变量。

示例：

let a = 10;
// 显示
console.log(a)

// 读取现变量a的内容，计算后再显示其结果
console.log(a + 20)

3.4、修改变量的值

   对一个已经存在的变量重新赋值

示例：

let sex = '男'

// 再次赋值
sex = '女'

console.log(sex)

 3.5 变量的操作

3.5.1、变量的默认值

仅声明一个变量并没有赋值，此时变量的值为  undefined

3.5.2、使用变量赋值

let a = 200;
let b = a;
console.log(b)  //200

 说明：

           执行 let  a = 200时，先申请一个a空间，并保存200数据，执行let b = a时，  申请一个b空间， 发现=右侧并不是一个具体的数据，  而是一个变量，这时js会根据a变量找 

           到对应的空间，再将a空间中的数据复制一份到b空间中。 两个空间中保存的都是数据200，但是完全独立的并不是同一份。

 3.5.3、一次声明多个变量

let a,b,c
let a=10,b,c=30
let a=b=c=100

 

 3.5.4、交换两个变量的值

let a = 100
let b = 200
// 借助第2个变量
let temp = a
a = b
b = temp
console.log(a,b)

3.6、为什么要使用变量

1. 存储数据
   
   存储数据是为了计算
    
2. 方便复用 
   
   同一个数据在出现两次及以上时，我们就需要考虑将数据存储起来，通过变量来显示数据。
   
   这样的好处就是显示时一致，修改时同步。

3.7、变量的命名规则

官方规范

• 只能包含字母、数字、下划线、$   不能以数字开头
   
• 不能是js中的关键字和与保留字
  
  关键字就是被js赋予了特殊功能的单词

人为规范

• 变量名尽量见名知意
   
• 变量名过长 推荐使用驼峰命名

4.数据类型(简单数据类型)

4.1、 数据类型的分类

数据类型分为两大类，八小类：

基本数据类型

• number(数值)
• string(字符串)
• boolean(布尔类型)
• undefined(未定义类型)
• null(空类型)

复杂数据类型

• array(数组)
• object(对象)
• function(函数)

4.2、number数据类型

数值类型很简单，就是数字。

取值：

• 整数
• 小时(浮点数)
• 正数
• 负数 

示例：

let age = 20
let price = 98.23
let balance = -20000

 4.3、string数据类型

定义：

使用单引号或多引号括起来的一个或多个字符。

示例：

let uname = 'zhangsan'	//单引号定义字符串
let aword = "zhangsan"		// 双引号定义的字符串
let addredd = ''		// 空字符串

注意：

默认情况下单引号不能再包含单引号 

默认情况下双引号不能再包含双引号 

示例：

let aword = 'people became 'quite illogical'	// 报错
let awrod = "people became "quite illogical"	// 报错

 报错原因：

再js中单引号与双引号被赋予了特殊的功能，当遇到开始的前半个单引号时，js明确我们开始定义一个字符串了，它马上会找紧随其后的另一半，js马上找到中间的组成了一对，这样字符串的定义就结束了。但后面的代码语法不完全所以会报错。

双引号也是同样的道理  

解决办法：

引号嵌套  单包双  或  双包单

开发时建议使用单引号定义字符串

4.4、boolean布尔类型

布尔类型的值常用于表示现实中的"矛盾态"，相互对应的两种状态。常用在用于表示事务仅具有的两种状态。

例如：

• 成立、不成立
• 对、错
• 男、女

取值：布尔类型仅有两个取值  

• true 表示成立、对
• false 表示不成立、错

这两个是js关键词，所以不需要加引号

布尔类型的值很简单，主要是看使用者赋予它的意义。

// 表示对错
let isOk = true		// 表示对
isOk = false		// 表示错

// 表示性别
let sex = true		// 人为的赋予true的意义为男，也可以反过来
sex = false			// 为人的赋予false的意义为女，也可以反过来

// 表示方向			
let direct = true	// 代表箭头向下
direct = false		// 代表箭头向下

// 表示折叠
let collapse = true	// 代表折叠
collapse = false	// 代表展开

4.5、undefined未定义类型

undefined类型翻译为未定义类型，其取值只有1个

取值： undefined

示例：

仅声明变量(并没有赋值) 值为undefined

let a;
console.log(a)		// undefined

变量是存在的，但是没有值，为了表示严谨，所以js设计了这个值。  

 声明变量直接赋值为undefined

let a = undefined	
console.log(a)		// undefined

4.6、null 空类型

null也称之为空类型，其取值只有1个

取值：

null

示例：

声明变量直接赋值为null

let obj = null
console.log(null)

当再prompt()的弹框中，点击取消或关闭按钮时，返回值为null

let ret = prompt('输入年龄')
console.log(ret)   //点击取消或关闭时，返回值为Null

4.7、输出函数的返回值类型

4.7.1、prompt()

let uname = prompt('输入姓名')	// 输入 thinker
console.log(uname)		// 'thinker'

let age = prompt('输入年龄')	// 输入20
console.log(age)		// '20'

let ret = prompt('输入数据')	// 点击取消
console.log(ret)		// null

4.7.2、confirm()

let isOk = confirm('你确定要删除么')	// 点击确定
console.log(isOk)			// true

isOk = confirm('你确定删除么')		// 点击取消
console.log(isOk)			// false

5.运算符

5.1 赋值运算符

运算规则：将 =右侧的数据 赋值给 左侧的变量

注意： 要与上学期间学习的 = 功能区分开，这个 = 符号，在JS中仅有赋值功能，并没有判断功能

示例：

let a = 10
let b = prompt('输入您的数据')

5.2、算术运算符

5.2.1、加减乘除运算符

• +
• -
• *
• / 

 5.2.2、%(取模运算符或取余运算符)

求两个数相除得到的余数 常用于判断一个数是否是另一个数的整数倍。

例如： 判断一个数时奇数还是偶数

如果%2==0   就是偶数  否则就是奇数

示例：

let a = 7;
let b = 3
let ret = a%b
console.log(ret)   //1

5.3.3、++自增运算符

自增运算符的出现就是为了简化代码。在代码开发中，经常遇到将一个变量的值加1，再赋值给自己的操作。

示例：

let a = 0	// 声明一个变量a，并赋值为0
a = a + 1	// 在a原值上 加 1 再赋值给自己
console.log(a)//1


简化

let i=0
i++           //等效于  i=i+1
console.log(i) //1

 自增运算符又分为前自增与后自增

++a  在变量这前称之为前自增

a++  在变量之后称之为后自增

区别：

相同点：功能都是对变量的值进行加1，++在前与++在后，变量的值都会加1。

不同点：a++ 先用于原值进行运算 后加1      ++a  先加1  在运算   受影响是式子

示例：

let a = 0;
let b = 0;
++a
b++
console.log(a,b)	// 1 1

5.3.4、--自减运算符

 自减运算符的出现也是为了简化代码。在代码开发中，经常遇到将一个变量的值减1，再赋值给自己的操作。

示例：

let a = 2	// 声明一个变量a，并赋值为0
a = a - 1	// 在a原值上 减 1 再赋值给自己
console.log(a)



简化


let a = 2	
--a			// 等效于 	a=a-1
console.log(a)

 自减运算符又分为前自减与后自减

--a  在变量这前称之为前自减

a--  在变量之后称之为后自减

区别：

相同点：功能都是对变量的值进行减1，--在前与--在后，变量的值都会减1。

不同点：a-- 先用于原值进行运算 后减1      --a  先减1  在运算   受影响是式子

示例：

let a = 2;
let b = 2;
--a
b--
console.log(a,b)	// 1 1

5.3.5、自操作运算符

 自操作运算符，主要是用于对一个变量进行加、减、乘、除一个数再赋值给自己的操作，本质就是一种代码的简化，没什么复杂性可言。

 示例：

 let i = 10;
    i+=5 // 等效于 i = i + 5
    i-=5 // 等效于 i = i - 5
    i*=5 // 等效于 i = i * 5
    i/=5 // 等效于 i = i / 5
    i%=5 // 等效于 i = i % 5

注意：

自操作运算符的应用逻辑：一个变量要与其他数据进行 + - * / % 运算，结果再赋值给自己

自增与自减的操作数默认是1，而自操作运算符可以是任何一个数。都是对代码的简化

5.4 字符串运算符

5.4.1、+(字符串拼接)

运算规则  进行字符串拼接操作

示例：

let a = 'hello'
let b = ' world'
let ret = a + b
console.log(ret)	// hello world

 注意：

+ 即是数学运算符，又是字符串运算符，只要参与运算的两个操作数中有一个是字符串，就进行字符串拼接运算

let a = 10
let b = 20
let ret = a + b
console.log(ret)	// 30

let x = 10
let y = '20'
let str = x + y
console.log(str)	// 1020

 5.4.2、+=(字符串自操作)

运算规则  进行字符互传拼接操作

示例：

let a = 'hello'
a += ' w'
a += ' o'
a += ' r'
a += ' l'
a += ' d'
console.log(a)	// hello world

5.4.3、字符串与变量的拼接

 作用：

将一个字符串与变量的值进行拼接。拼接的情况有以下几种：

• 变量的值可能出现在字符串结尾或开头

• 变量的值可能出现在字符串中间

示例：

拼接到字符中间

let age = 20
// 需求：将age变量的值，放到字符串   '我今天 ？ 岁了' 这个字符串的？处输出
let ret1 = '我今天age岁了'			// 尝试是否可以，思考为什么
console.log(ret1)

let ret2 = '我今天' + age + '岁了'	// 
console.log(ret2)

 拼接到字符结尾或开头

let age = 20
let word = '我的年龄为'
let ret3 = wrold + age

5.5、比较运算符

==

作用：

用于判断两个变量的值是否相等，返回的结果永远是布尔类型

相等返回 布尔值：true

否则返回 布尔值：false

示例：

// 判断两个值是否相等
console.log( 10 == 10)		// true

// 判断两个变量的值是否相等
let a = 10
let b = 20
let c = 20
console.log(a == b)			// false
console.log(b == c)			// true

// 判断变量与值是否相等
let a = 10
let b = 20
console.log(a == 10)		// true
console.log(b == 10)		// false

比较的结果也可以保存在一个变量中，这个变量就等效于布尔值true或false

let a = 10
let b = 20
let c = 20

// 使用变量保存比较的结果
let ret1 = a == b
let ret2 = b == c

console.log(ret1)			// false
console.log(ret2)			// true

6.表达式

6.1、什么是表达式

 表达式就是由变量、数据、以及运算符组成的一个式子。换句话讲就是使用式子把一个条件表达出来。

示例：

需求1：张三与李四谁的年龄大

age1 > age2

需求2：微信余额是否可以支付午餐费用

wx > lanch

需求3：判断一个人是否成年

age >= 18

需求4：求购物车内的小计与总计

g1_price = 100; gl_num = 10; g1_sum = g1_price * gl_num

g2_price = 20; g2_num = 15 g2_sum = g2_price * g2_num

g1_sum + g2_sum;

6.2、运算符的优先级

数学运算符优先计算括号内 (数值运算符之间先乘除后加减)  比较运算符  赋值运算符

7.流程控制

7.1、流程控制分类

• 顺序分类
  
  程序自上而下的执行过程
  顺序结构时最简单的结构，按照代码的书写顺序来执行。
   
• 分支结构
  
  根据条件的成立与否将程序转向不同的代码块执行。
   
• 循环结构
  
  根据某一条件重复的执行一段代码。
   

 7.2、if分支_单分支

流程控制的学习需要从以下两点学习

• 语法记死
• 语法的执行逻辑
   

语法：

if(条件表达式){

//代码块

}

// ...if结构外，后面的语句...

执行逻辑：

 首先判断 条件表达式 是否成立？

 如果不成立执行if结构外，后面的语句。

 如果成立，则执行代码块。代码块执行完，再执行后面的语句

示例：

条件表达式 为 true(翻译为成立)

if(true){
    console.log('美国恶意阻拦')
}

console.log('中国崛起')

条件表达式 为 false(翻译为不成立)

if(false){
    console.log('美国恶意阻拦')
}

console.log('中国崛起')

条件表达式 还可以是一个变量

let age = prompt('输入年龄')
let ret = age >= 18

if(ret){
    console.log('可以交女朋友了')
}

注意： 

在JS中一切都要以作为表达式，具体的值、一个式子、一个变量...都 可以作为表达式。  

7.3、if分支_双分支

语法：

if(条件表达式 1){

//代码块1

}else if(条件表达式 2){

// 代码块2

}

// ... if结构外，后面的语句 ...

执行逻辑：

首先判断 条件表达式 1 是否成立？

如果成立，则执行代码块1。代码块1执行完后就结束整个if结构(不会再判断 条件表达式 2 ) 直接执行if结构外，后面的语句。

如果 条件表达式 1 不成立，则判断 条件表达式 2是否成立？如果成立，则执行代码块2。如果不成立，不结束整个if结构，继续执行if结构后面的语句。

7.4、if分支_多分支

语法：

if(条件表达式 1){

//代码块1

}else if(条件表达式 2){

// 代码块2

}else if(条件表达式 3){

// 代码块3

}else{

// 缺省语句块

}

// ... if结构外，后面的语句 ...

执行逻辑：

自上而下的判断条件表达式是否成立，当某个表达式成立时就执行对应的代码块，当某个代码块执行之比后，立即结构整个if结构，继续if结构外，后面的语句执行。

当所有的条件表达式都不成立时，执行缺省语句块。

else if结构可以有多个，else结构可以省略。

 7.5、if嵌套

一个if语句还可以包含另一个if语句，这种形式就是if嵌套

例子：应聘女友

由用户输入性别，与年龄，来判断是否合格。判断条件为性别为女，年龄大于等于18。

对于不满足的条件要给出错误提示。

全部满足时打印 "可以试着交往"字样

思路：

a.接收性别

b.接收年龄

c.使用if先判断性别

d.在判断性别的if内再使用if判断年龄

// 接收性别    
let sex = prompt('输入性别')
// 接收年龄
let age = prompt('输入年龄')

// 判断第1个条件
if(sex == '女'){
    // 在第1个条件满足时再判断第2个条件
    if(age >= 18){
        console.log('可以交往')
    }else{
        // 第2个条件不满足时的情况
        console.log('国法难容')
    }
}else{
    // 第1个不满足时的情况
    console.log('家法难容')
}

8.Math数学对象

8.1、Math对象

Math对象是JS为我们提供的一个辅助对象。

Math对象上有数学计算相关的数据以及计算方法。

辅助我们进行数学相关的运算，可以完成除加减乘除之外的复杂运算。

8.2、相关操作

8.2.1、获取圆周率

语法：

Math.PI

示例：

console.log(Math.PI)		//3.141592653589793

8.2.2、求绝对值

语法：

Math.abs()

示例：

let a = -10
console.log(Math.abs(a))		// -10

console.log(Math.abs(5-20))		// -15

8.2.3、求次方

语法：

Math.pow(m,n)

示例：

console.log(Math.pow(2,8))	// 256

8.2.4、求最大值

语法：

Math.max(v1,v2,v3...)
求多个数中的最大值

示例：

console.log(Math.max(10,5,9,20,4))	// 20

let a=10,b=5,c=9,d=20,e=4
console.log(Math.max(a,b,c,d,e))		// 20

8.2.5、求最小值

语法：

Math.min(v1,v2,v3...)
求多个数中的最小值

示例：

console.log(Math.min(10,5,9,20,4))	// 4

let a=10,b=5,c=9,d=20,e=4
console.log(Math.min(a,b,c,d,e))		// 4

8.2.6、向上取整

语法：

Math.ceil()
ceil是天花板的意思，对一个小数向上取整

示例：

console.log(Math.ceil(4.001))		// 5
console.log(Math.ceil(4))			// 4

8.2.7、向下取整

语法：

Math.floor()
floor是地板的意思，对一个小数向下取整

示例：

console.log(5.9999)		// 5
console.log(5)			// 5

8.2.8、取随机数

语法：

Math.random()
random是随机的意思，用于获取一个随机小数，包含0不包含1

示例：

console.log(Math.random())

m与n之间的随机整数​公式​

思路：

1. 求0至10之间的随机整数(包含0与10)
   
   实现：

   // 1. 求0至10之间的随机整数
   let rand1 = Math.random()			// 0.0000000000000000		0.9999999999999999
   let rand2 = Math.random()*10		// 0.0000000000000000		9.999999999999999
   let rand3 = Math.random()*(10+1)	//	0.0000000000000000		10.999999999999999
   // 向下取整
   let rand4 = Math.floor(Math.random()*(10+1))
   console.log(rand4)

    

2. 求0至18之间的随机整数(包含0与18)
   
   实现：

   // 2. 求0至18之间的随机整数
   let rand1 = Math.floor(Math.random()*(18+1))
   console.log(rand1)

    

3. 求m与n之间的随机整数(包含m与n)
   
   实现：

   // 3. 求m与n之间的随机整数，例如：m是50，n是80
   // 求0与n-m之间的随机整数
   let n_m = Math.floor(Math.random()*(80-50+1))
   let rand1 = n_m + 50
   console.log(rand1)
   
   // 一条语句
   let rand2 = Math.floor(Math.random()*(80-50+1))+50
   console.log(rand2)