JavaScript 笔记

一、数据基本类型

①typeof

检测变量中储存的数据的具体类型

②Number

数值类型，包括：整数，小数(浮点数)，负数，八进制，十六进制

③string

字符串类型，使用引号引起来的数据，单/双都可以

字符串.length：获取当前字符串的长度

字符串.charAt(下标)：在字符串中获取对应的下标，下标从零开始

④Boolean

布尔类型，只用真和假，即true，false，。

非0即真，非空即真：0为假(false) 其他数字为真(true)，空字符串为假，其他为真

⑤null

空值 也是一种值 输出类型为Object类型 (null)

⑥undefined

undefined类型，未定义 表示什么都没有

二、类型转换

①转换为数值类型

固定转换语法

 var res = Number(dat)  //转换成数值
 ​
 var res1 = parseInt(dat)  //转换成整数
 var res2 = parseFloat(dat) //转换成浮点数

 // 1-1 数值转换 
 var n1 = 12; // 数值 
 var n2 = 3.14; // 数值 
 var n3 = "16"; // 字符串 
 var n4 = "50ABC";// 字符串 
 var n5 = "a100abc";// 字符串 
 ​
 //Number()
 var n1 = 12; // 数值 
 var x1 = Number(n1) 
 console.log(n1, typeof(n1)) // 12 number 
 console.log(x1, typeof(x1)) // 12 number 
 ​
 var n2 = 3.14; // 数值
 var x2 = Number(n2) 
 console.log(n2,typeof(n2)) // 3.14 number 
 console.log(x2, typeof(x2)) // 3.14 number
 ​
 var n3 = "16"; // 字符串
 var x3 = c 
 console.log(n3, typeof(n3)) // 16 string 
 console.log(x3, typeof(x3)) // 16 number 
 ​
 var n4 = "50ABC";// 字符串
 var x4 = Number(n4) 
 console.log(n4, typeof(n4)) // 50ABC string 
 console.log(x4, typeof(x4)) // NaN number 
 ​
 var n5 = "a100abc";// 字符串
 var x5 = Number(n5) 
 console.log(n5, typeof(n5)) // a100abc string 
 console.log(x5, typeof(x5)) // NaN number 
 ​
 //parseInt()
 var n1 = 12; // 数值
 var x1 = parseInt(n1) 
 console.log(n1, typeof(n1)) // 12 number 
 console.log(x1, typeof(x1)) // 12 number 
 ​
 var n2 = 3.14; // 数值
 var x2 = parseInt(n2) 
 console.log(n2, typeof(n2)) // 3.14 number 
 console.log(x2, typeof(x2)) // 3 number  直接删除小数部分
 ​
 var n3 = "16"; // 字符串
 var x3 = parseInt(n3) 
 console.log(n3, typeof(n3)) // 16 string 
 console.log(x3, typeof(x3)) // 16 number 
 ​
 var n4 = "50ABC";// 字符串
 var x4 = parseInt(n4) 
 console.log(n4, typeof(n4)) // 50ABC string 
 console.log(x4, typeof(x4)) // 50 number 
 ​
 var n5 = "a100abc";// 字符串
 var x5 = parseInt(n5) 
 console.log(n5, typeof(n5)) // a100abc string 
 console.log(x5, typeof(x5)) // NaN number 
 ​
 // parseFloat(...)
 var n1 = 12; // 数值 
 var n2 = 3.14; // 数值 
 var n3 = "16"; // 字符串 
 var n4 = "50ABC"; // 字符串 
 var n5 = "a100abc"; // 字符串 
 ​
 var x1 = parseFloat(n1)
 console.log(x1,typeof(x1));          //12 'number'
 ​
 var x2 = parseFloat(n2)
 console.log(x2,typeof(x2));         //3.14 'number'
 ​
 var x3 = parseFloat(n3)
 console.log(x3,typeof(x3));         //16 'number'
 ​
 var x4 = parseFloat(n4)
 console.log(x4,typeof(x4));         //50 'number'
 ​
 var x5 = parseFloat(n5)
 console.log(x5,typeof(x5));         //NaN 'number'

②转换成字符串类型

 var res = String(dat)    //转换成字符串数据
 var res = dat.toString() //转换成字符串形式
 var res = dat + ""       //转换成字符串形式

③转换成布尔类型

 var res = Boolean(dat)

④null和undefined类型

 //null -> string
 var x = null
 var res = String(x)               //"null"
 var res1 = x + ""                 //"null"
 var res2 = x.toString()           //ERROR错误   ！！
 ​
 //undefined -> String
 var x2 = undefined
 var res3 = String(x2)              //"undefined"
 var res4 = x2 + ""                 //"undefined"
 var res5 = x2.toString()           //ERROR错误   ！！
 ​
 //null -> number
 var res6 = Number(x)               // 0  !!
 var res7 = pareInt(x)              //NaN
 var res8 = parseFloat(x)           //NaN
 ​
 //undefined -> nuber
 var res9 = Number(x2)              //NaN
 var res10 = pareInt(x2)            //NaN
 var res11 = parseFloat(x2)         //NaN
 ​
 // null|undefined -> Boolean 
 var res41 = Boolean(x) // false 
 var res42 = Boolean(x2) // false

三、类型的隐式转换

JavaScript语法中，某些代码执行时，会在底层自动完成数据类型的转换， 不需要开发人员干预！这样的转换方式称为类型隐式转换

①isNaN

作用：判断一个数据dat是否 不是一个数字；底层执行了Number这样的类型转换

 isNaN:is not a number 是否 不是一个数字
 ​
 var nx1 = "12a"
 console.log(isNaN(nx1))   //true 不是一个数字
 ​
 var nx2 = "12"
 console.log(isNaN(nx2))   //fales 是一个数字
 ​

②toFixed(dat)

作用：将一个数值类型的数据，指定保留小数位数后转换成字符串(底层转换)

 var pi = 3.1415926
 pi.toFixed(2)     //"3.14"
 pi.toFixed(6)     //"3.141593"

小数位数保留时，转换成字符串，字符串可以获取长度，将数值转换成字符串，然后通过字符串长度处理，截取等操作完成保留小数位数，最后输出字符串

四、运算符

(1)运算符概述

①什么是运算符

让多个数据参与运算的符号，称为运算符

算术运算符

符号	描述	示例
+	加法	var r = 12 + 49
-	减法	var r = 68 - 54
*	乘法	var r = 18999 * 3
/	除法	var r = 89 / 15.5
%	取余数	var r = 10 % 3
--、++	自减、自增	var num = 10; num++; num--

 <script>
 // 想要一个变量自己加1
 var a = 1
 a = a + 1 // a = 1 + 1 a = 2
 console.log(a)
 // 递增(递减)运算符 ++a 必须配合变量使用 先自加 后返回值
 // 前置递增 ++写在变量前面
 var b = 10
 ++b //b = b + 1 
 console.log(b)
 //3、
 var c = 1
 console.log(++c + 10) //12
 ​
 // 后置 前置后置单独用 效果一样 后置：先返回原值再自加
 var d = 1
 d++
 var e = 1
 console.log(e++ + 1)
 </script>

赋值运算符

符号	描述	示例
=	给变量中存储数据	var name = 'offcn'
-=	扩展的减法运算	var price = 12.99 price -= 2 等价于： price = price - 2
+=	扩展的加法运算	name += 'web' name = name + 'web'
*=	扩展的乘法运算	...
/=	扩展的除法运算	...

比较运算符 | 关系运算符

逻辑运算符：多个条件并且、或者、取反的操作

运算符的隐式转换

 // 运算符两侧数据类型一致，不会有类型转换
 var res = 10 + 20 
 console.log(res)            // 30 number 
 var res2 = "hello" + "javascript" 
 console.log(res2)           // hellojavascript string
 // 执行一些运算时，如果符号两侧的数据的类型不一致，可能会引发数据类型隐 式转换
 ​
 // 算数运算符 
 var res3 = 10 + "10"        // 1010  拼接
 var res4 = 10 - "10"        // 0 类型转换 转换成数值
 var res5 = 10 * "10"        // 100 类型转换 转换成数值
 ​
 // 比较运算符 
 var res6 = 10 >= "10"       // true 类型转换
 ​

代码中的类型转换，如果不确定我们要操作的数据的具体类型，建议手工指定数据类型

(强制转换)，不要依赖语法中提供更多隐式转换！

• 一个开发人员需要关注的技术、业务非常多，不可能随时记住每一种隐式转换情况

• 隐式类型转换的场景非常多，很多时候都是为了方便开发，可以使用一些常见的隐式转换！

三目运算符

运算符中的一种特殊运算符，可以添加简单的条件，通过条件的判断输出最终的结果

语法格式：条件 ? 条件为true执行的代码 : 条件为false执行的代码

 var n = 20 
 n > 18 ? "成年" : "未成年"     //"成年" 
 n = 16 
 n > 18 ? "成年" : "未成年"     //"未成年

 // 判断用户输入的账号，长度是否5~11位 
 var account = "admin"
 account.length>=5&&account.length<=11 ? "合法账号": "非法账号，长度不满足" // "合法账号" 
 account= "damu" // "damu"
 account.length>=5&&account.length<=11 ? "合法账号": "非法账号，长 度不满足" //"非法账号，长度不满足" 
 ​
 // 判断用户输入的是否都是数字
 var phone = "18625372606"
 isNaN(phone)                     // false 
 !isNaN(phone)?"合法手机":"非法手机" // "合法手机" 
 var phone = "1862537260a" !isNaN(phone)?"合法手机":"非法手机" // "非法手机"

注意事项：随着表达式的增加，一行代码中可能包含多个运算符号，先执行什么运算，再执行什么运算就存在一定的规律：运算的优先级(类似先乘除后加减)，非常遗憾的是优先级不好记忆！

实际项目开发时，建议使用圆括号(小括号)将优先运算的表达式包裹起来强制提高优先级，确定运算顺序！

 // 原始格式：思考 先执行&&运算？先执行比较运算？ 
 10 > 20 && 40 < 80 
 ​
 // 改进格式：使用小括号，将需要优先运算的表达式包裹起来，提高代码可读性 
 (10 > 20) && (40 < 80)

五、事件驱动

通过代码获取到了页面上的标签之后，就可以通过事件来操作标签，如鼠标点击、拖动....

事件的特点：表示了用户的一个操作行为、以标签属性的形式出现的、名称是以 on开头的

操作标签样式

 var ele = document.getElementById("id") 
 // 操作行内样式 
 // 获取 
 console.log(ele.style.fontSize) // 获取字体大小 
 // 设置 
 ele.style.fontSize = "18px" 
 // javscript中提供了 获取内嵌样式和外链样式的代码【考虑IE的兼容性】:了解 即可
 // IE 
 console.log(ele.currentStyle.fontSize) // 获取非行内样式：字 体大小 
 // 非IE 
 console.log(getComputedStyle(ele).fontSize) // 获取非行内样式：字 体大小

操作标签内容

 var ele = document.getElementById("id") 
 // 闭合标签 
 // 获取纯文本内容(不处理标签) 
 console.log(ele.innerText) 
 // 获取文本内容(处理标签) 
 console.log(ele.innerHTML) 
 // 设置 
 ele.innerText = "<h2>新的内容，标签当成普通文本</h2>" 
 ele.innerHTML = "<h2>新的内容，渲染成标签</h2>" 
 ​
 // 表单标签 
 // 获取 
 console.log(ele.value) 
 // 设置 
 ele.value = "值"