数据类型转换,JS操作HTML
数据类型转换
1.自动转换(在某种运算环境下)
- Number环境
- String环境
- Boolean环境
2.强制类型转换
-
Number()
-
字符串:纯数字和空字符转为正常数字,其他NaN
-
布尔值:ture=1,false=0
var str = "abc" console.log(typeof(str)); var num = Number(str); console.log(num); console.log(typeof(num)); console.log("") /* 最终输出 string NaN number*/ -
String()
-
原样输出
var num=108.1; console.log(typeof(num)); var str=String(num); console.log(str); console.log(typeof(str)); console.log("") /*浏览器最终输出 number 108.1 string*/ -
Boolean()
-
转化为false:数字0,空字符串,null和underfined
-
转化为true:值表示有东西
var v=100; console.log(typeof(v)); var b=Boolean(v); console.log(b); console.log(typeof(b)); console.log(""); // number // true // boolean // -
parseInt()
-
转化为整数
-
与Number的区别:一数字开头的字符串,不会转化为NaN
var v="abc123"; console.log(typeof(v)); var n=parseInt(v); console.log(n); console.log(typeof(n)); console.log(""); /*string NaN number */ -
parseFloat()
-
转换为小数或整数
-
与Number的区别:一数字开头的字符串,不会转换为NaN
var v="123.14abc"; console.log(typeof(v)); var n=parseFloat(v); console.log(n); console.log(typeof(n)); console.log("") /*string 123.14 number */
JS操作 HTML
1.事件
- onclick
2.函数
-
声明函数
function 函数名(){ 代码; } -
调用函数
函数名()
3.获取元素
- document.getElementById(" ")
- js代码写在html元素里面
JS操作html元素的属性以及css数据
-
元素对象.属性名
-
元素对象.style.属性名
-
css属性名用小驼峰命名法.只有写在元素style中的css属性,才可以被获取
-
innerHTML属性 获取或设置双标签内的内容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>简易 加法计算器</title> <style> input,button{ box-sizing:border-box; width:300px; padding:10px; font-size:16px; line-height:16px; border:1px solid #ccc; } button{ background:#f5f5f5; } #resBox{ box-sizing:border-box; width:300px; height:200px; padding:20px; border:1px solid #ccc; } </style> </head> <body> <table> <tr> <td>加数1</td> <td><input type="text" id="num1"></td> </tr> <tr> <td>加数2</td> <td><input type="text" id="num2"></td> </tr> <tr> <td></td> <td> <button onclick="add()">加</button> </td> </tr> <tr> <td></td> <td> <div id="resBox"></div> </td> </tr> </table> <script> function add(){ //获取两个input var num1Input = document.getElementById("num1"); var num2Input = document.getElementById("num2"); //获取两个input中的输入值 并进行强制转换 var num1Value = Number(num1Input.value); var num2Value = Number(num2Input.value); //对加数1 进行判断 if (isNaN(num1Value)){ alert("请在第一个加数输入正确的数字"); return; //结束函数 } //对加数2进行判断 if (isNaN(num1Value)){ alert("请在第二个加数输入正确的数字"); return;//结束函数 } //执行加法 var res = num1Value + num2Value; //把结果输出到resBox中 var resBox = document.getElementById("resBox"); resBox.innerHTML = res; } </script> </body> </html>
表达式
- 简单表达式:变量,直接量
- 复杂表达式:运算符与简单表达式的组合
- 函数调用表达式
运算符
1.算术运算符
- 加号运算符 +
- 减号运算符 -
- 乘号运算符 *
- 除号运算符 /
- 取余运算符(取模) %
- 负数运算符 -
- 整数运算 +
- 递增运算符 ++
- 递减运算符 --
2.比较运算符
- 相等运算符 ==
- 不等运算符 !=
- 全等运算符 ===
- 不全等运算符 !==
- 小于运算符 <
- 小于等于运算符 <=
- 大于运算符 >
- 大于等于运算符 >=
- in运算符
3.位运算符
- 按位与 &
- 按位或 |
- 按位非 ~
- 按位异或 ^
- 左移
- 右移
4.赋值运算符
- =
- +=
- -=
- *=
- /=
- %=
5.其他运算符
- 字符串连接符 +
,运算符- typeof 运算符
- 比较运算符 表达式 ? 表达式1 : 表达式2
