JS-1~25

Hello

• alert("hello")浏览器弹出一个对话框
• document.write("hello")输出文档在浏览器页面
• console.log("hello")输出文档在控制台（为开发者后期调试等准备）

代码：

<script>
console.log("...")在使用时有两种写法
方法一：
console.log(a, b)
//在以后使用中常用，可以简化代码
方法二：
console.log(a)
console.log(a)
</script>

书写位置

• 位置分为：行内式（不推荐）、内嵌式、外链式（推荐）

代码：

行内式：
    <button onclick="alert('hello world')">点我</button>
    <a href="javascript:alert('hello world')">点我</a>
内嵌式：
    <script>
        alert("hello world")

        document.write("hello world")

        console.log("hello world")
    </script>
外链式：
    <script src="js/hello.js">
    </script>
    

注：

• 在双引号里嵌套代码用单引号
• script标签既可以放在head中也可以放在body中，但在body中最好写在最后，防止代码卡住
• 当使用外链式时，其script标签中的代码将会被忽略

注释与规范

• 注释：
  1、//文本单行注释（ctrl+/）
  2、/*文本*/多行注释（alt+shift+a）
• JS代码中无需加分号（;），但可加可不加，单行多代码中需要加，多行单代码则无需加

变量

语法：var 变量名 = 值

代码：

<script>
多种定义方式
var x (1.定义变量不赋值)
var y = 2000  (2.定义变量赋值)
var z,m,n
var a=1,b=2,c=3
</script>

变量命名规则和规范

• 规则（必须遵守）：
  1、一个变量名称可以由 数字、字母、英文下划线（_）、美元符号（$） 组成
  2、严格区分大小写
  3、不能由数字开头
  4、不能是保留字或者关键字
  5、不要出现空格
• 规范（建议遵守）：
  1、变量名尽量有意义（语义化）
  2、遵循驼峰命名规则，由多个单词组成的时候，从第二个单词开始首字母大写
  3、不要使用中文

注：

一些情况下，不加双引号属于变量，反之则是字符或字符串，详见下

数据类型

分为基本数据类型和复杂数据类型

• 基本类型
  1、Number：
  18 ,12.5(浮点数)，2e3（2*10^3），十六进制（前加0x，范围：1-9 ,a,b,c,d,e,f），八进制（前加0），二进制（前加0b），NaN
  2、String：
  字符串类型（加引号，单引号双引号不限制）
  如：var str = "kerwin"
  3、Boolean：
  true（真，对应1），false（假，对应0）
  4、Undefined：
  undefined（声明了，但是未赋值）
  5、Null：
  null（无，对应0）
  6、Symbol
• 复杂类型（未来会学）

注：

• Undefined和Null的区别在于Null是一开始就确定未来存放的变量是对象类型，而Undefined对于存储类型是真的不清楚时使用的
• NaN即为not a number

检测数据类型

使用typeof关键字来进行判断

代码：

<script>
        var a = 100
        方法一：
        console.log(typeof a) //转成数值 
        方法二：
        console.log(typeof(a))      
              
        console.log(typeof a + 100 )//number100
        console.log(typeof(a +100) )//number
</script>

注：

检测结果一定是字符串（string类型 ）

数据类型转换

1. 转数值

• Number(变量)：
  可以把一个变量强制转换成数值类型
  可以转换小数，会保留小数
  可以转换布尔值
  遇到不可转换的都会返回 NaN
• parseInt(变量)：
  从第一位开始检查，是数字就转换，知道一个不是数字的内容
  开头就不是数字，那么直接返回NaN
  不认识小数点，只能保留整数
• parseFloat(变量)：
  从第一位开始检查，是数字就转换，知道一个不是数字的内容
  开头就不是数字，那么直接返回NaN
  认识一次小数点
• 除了加法以外的数学运算（非加号）：
  运算符两边都是可运算数字才行
  如果运算符任何一遍不是一个可运算数字，那么就会返回NaN
  加法不可以用

代码：

<script>
//Number方法：
var a = "abc"
var b = Number(a) // NaN not a number
console.log( typeof a, typeof b)

//非加号方法： -0 /1 *1
var a = "100"
var b = a*1
console.log(b)

//数据类型转换示例：
var a = "abc"
var b = Number(a) // NaN(not a number)
console.log(a, typeof b)

var a = false  
var b = Number(a) // 1(true) ,  0(false) 
console.log(a, b)

var a = null 
var b = Number(a) // 0 
console.log(a,b) 

var a
var b = Number(a) // NaN
console.log(a,b) 
       
var a = "123abc" 
var b = Number(a) // NaN
console.log(a,b) 
        
var a = "123abc" 
var b = parseInt(a) // 123
console.log(a,b) 

var a = "123.56abc" 
var b = parseInt(a) // 123
console.log(a,b) 

//四种方法无最好，适合最好，比如：
var a = "1.25rem"
var b = parseFloat(a)// 此时用parseFloat就最为合适
console.log(a,b)
</script>

2. 转字符串

• 变量.toString()：
  有一些数据类型不能使用 tostring（） 方法，比如 undefined 和 null
• String(变量)：
  所有数据类型都可以
• 使用加法运算：
  在JS里面， + 有两个含义：
  1、字符串拼接：只要＋任意一边是字符串，就会进行字符串拼接
  2、加法运算：只有田两边都是数字的时候，才会进行数学运算

代码：

<script>
//String() .所有类型都能转成字符串
var a = 100
var b = String(a)
console.log(a,b)

//toString
var a = true
var b = a.toString()
console.log(a,b)

//+拼接一个空的字符串
var a = 100
var b = a+""
console.log(a,b)
</script>

3. 转布尔

Boolean(变量)：
在JS中，只有空字符串（ ""和’’ 双引号和单引号都行）、0、null、underfined、NaN,这些是false，其余都是true

代码：

<script>
// 0 , "", undefined , null, NaN
var a = ""
var b = Boolean(a)
console.log(a,b)
</script>

注：

在空字符串中不要打空格，一旦有空格就是true了（非空字符串为真）

运算符

1. 数学运算符

• +：
  只有符号两边都是数字的时候才会进行加法运算
  只要符号任意一边是字符串类型，就会进行字符串拼接
• -：
  会执行减法运算
  会自动把两边都转换成数字进行运算
• *：
  会执行乘法运算
  会自动把两边都转换成数字进行运算
• /：
  会执行除法运算
  会自动把两边都转换成数字进行运算
• %：
  会执行取余运算
  会自动把两边都转换成数字进行运算

代码：

<script>
// + - * /  % 取余 
var a = 10
var b = 3
console.log(a%b)

// 将1000分钟转变成几小时几分钟        
var a = 1000
var b = parseInt(a/60) // 10：20
var c = a%60
console.log(b+":"+c)

// 练习：
console.log("1"+"2"*3+4)// 11
console.log("1"+"2"*3+4)// 164
</script>

注：

• 布尔在运算时会转变成数字
• parseInt可以用于取整

2. 赋值运算符

• =：
  就是把 = 右边的赋值给等号左边的变量名
• += -= *= /= %=

代码：

<script>
// 交换两个数(常规思路，取中间变量)
var m = 5
var n = 6
var c 
c = m
m = n
n = c
console.log(m,n)

// += -= *= /= %= (含义相同)
var number = 5
number+=1 // 等价于number = number+1
console.log(number)
</script>

3. 比较运算符

• ==：
  比较符号两边的值是否相等，不管数据类型
  1 == ‘1’
  两个值是一样的，所以得到true
• ===：
  比较符号两边的值和数据类型是否都相等
  1 === ‘1’
  两个值虽然一样，但是因为数据类型不一样，所以得到false
• !=：
  比较符号两边的值是否不等
  1！ = ‘1’
  因为两边的值是相等的，所以比较他们不等的时候得到false
• !==：
  比较符号两边的数据类型和值是否不等
  1! == ‘1’
  因为两边的数据类型确实不一样，所以得到true
• >= <= > <：
  和数学判断一样

代码：

<script>
// 强制转换的小例子
var age =  "22"
console.log(parseInt(age)===22)
</script>

4. 逻辑运算符

• &&：
  进行与/且的运算
  符号左边必须为true并且右边也是true，才会返回true
  只要有一边不是true，那么就会返回false
  true && true 结果是true
  true && false 结果是false
  false && true 结果是false
  false && false 结果是false
• ||：
  进行或的运算
  符号的左边为 true 或者右边为 true，都会返回 true
  只有两边都是false的时候才会返回false
  true II true 结果是true
  true ll false 结果是true
  false I| true 结果是true
  false || false 结果是false
• !：
  进行非/取反运算
  本身是true的，会变成false
  本身是false的，会变成true
  !true 结果是false
  !false 结果是true

代码：

<script>
/*
特殊：
    1. !!a  ==>转换成布尔值 
    2. && || 短路用法
*/

var  x = "1111" // 转换成布尔值
console.log(!!x)

var y = null
console.log(y && y.toString()) // 与短路
console.log(11111)
//短路用法：如果y是真，则往后执行，若为假则不往
//后执行(往后执行的内容即为y.toString()，或同样
//理解，相反即可)

var z = "赵钱孙李"// 或短路
document.write(z || "这个家伙很赖，什么也没有留下")
</script>

5. 自增自减运算符

• ++：
  进行自增运算
  分成两种，前置++和后置++
  1、前置++，会先把值自动+1，再返回。
  var a=10；
  console.log(++a);
  // 会返回 11，并且把 a 的值变成 11
  2、后置++，会先把值返回，再自动+1。
  var a= 10；
  console.log(a++);
  // 会返回 10，然后把 a 的值变成 11
• --：
  进行自减运算
  分成两种，前置–和后置–
  和++运算符道理一样

代码：

<script>
var n = 10
var res = ++n + n++ + ++n// 13 35
console.log(n,res)
//在代码运算中数值是随着代码执行变化的，二
//行n就是随着代码而变化

var m = 10
var res = m++ + --m + m-- + ++m// 10 40
console.log(m,res)
</script>

三元运算符（三目运算符）

语法： 条件？条件为 true 的时候执行：条件为 false 的时候执行
例子：
var age = 18;
age >= 18 ？ alert（‘已经成年’）： alert（‘没有成年’）

注：

想让代码成为一个整体可以用小括号括起

条件分支语句—if

1. if 语句

• 语法： if(条件){要执行的代码}
• 通过（）里面的条件是否成立来决定{}里面的代码是否执行
• 通过 if 条件来决定，执行哪一个{} 里面的代码，两个{}内的代码一定有一个会执行

2. if else 语句

• 语法： if(条件){条件为 true 的时候执行 } else{ 条件为 false 的时候执行 }

3. if else if… 语句

语法： if(条件1){条件1为 true 的时候执行}else if(条件2){条件2为 true 的时候执行}

• 可以通过 if 和 else if 来设置多个条件进行判断
• 会从头开始依次判断条件
  1、如果第一个条件为 true 了，那么就会执行后面的 {}里面的内容
  2、如果第一个条件为false，那么就会判断第二个条件，依次类推
• 多个{}，只会有一个被执行，一旦有一个条件为true了，后面的就不在判断了

4. if else if…else 语句

和之前的 if else if …基本一致，只不过是在所有条件都不满足的时候，执行最后 else 后面的{}

代码：

<script>
var sum = 190
var youhuisum 
if(sum>200){
youhuisum = sum-10
}
else{
youhuisum = sum
}
console.log(sum,youhuisum)

var sum = 46
var youhuisum 
if (sum>200) {
youhuisum = sum-10
console.log(1111)
} 
else if (sum>100 ){
youhuisum = sum-5
} 
else if (sum >50 ){
youhuisum = sum-3
} 
else {
youhuisum = sum
}
console.log(sum,youhuisum)    
</script>

条件分支语句—switch

• 语法：见代码
• 是对于某一个变量的判断，要判断某一个变量等于某一个值得时候使用

代码：

<script>
// 语法：
switch（要判断的变量）{
case 情况1：
  情况1要执行的代码
  break 
case 情况2：
  情况2要执行的代码
  break 
case 情况3：
  情况3要执行的代码
  break 
default:
上述情况都不满足的时候执行的代码
}

/*
注意：
1. === (case的值与输入值必须相同)
2. 不要比较运算符
3. break；必须写
*/
</script>

循环—while

• 语法：while(条件){满足条件就执行 }
• 当条件满足时就执行代码，一旦不满足了就不执行。因为满足条件就执行，所以我们写的时候一定要注意，就是设定一个边界值，不然就一直循环下去

代码：

<script>
// 语法：
var num = 0; // 初始化条件
while (num < 10){ // 条件判断
console.log('当前的 num 的值是' + num) // 要执行的代码
num = num + 1 // 自身改变
</script>

注：

• 循环结构，就是根据某些给出的条件，重复的执行同一段代码
• 循环必须要有某些固定的内容组成
  1、初始化
  2、条件判断
  3、要执行的代码
  4、自身改变
• 调试过程中截断的也叫断点
  自身改变也叫步长