数据类型转换
1.自动转换（在某种运算环境下）
- Number环境
- String环境
- Boolean环境
2.强制类型转换
-
Number()
-
字符串： 纯数字字符和空字符转为正常数字，其他NaN
-
布尔值： ture:1 false:0
var str="abc"; console.log(typeof(str)); var num=Number(str);
-
-
String()
- 原样输出
-
Boolean()
- 转换为false: 数字0, 空字符串， null 和 undefined
- 转换为true: 值表示有东西
-
parseInt()
- 转换为整数
- 与Number的区别： 一数字开头的字符串， 不会转换为NaN
-
parseFloat()
-
转换为小数或整数
-
与Number的区别： 一数字开头的字符串， 不会转换为NaN
var v = "123.14abc"; console.log(typeof(v)); var n = parseFloat(v); console.log(n);//输出为123.14
-
JS操作 HTML
1. 事件
- onclick
2.函数
-
声明函数
function 函数名(){ 代码; } -
调用函数
函数名()
3.获取元素
document.getElementById("id名")js代码写在 html元素的后面
4.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; 300px; padding:10px; font-size:16px; line-height: 16px; border:1px solid #ccc; } button{ background:#f5f5f5; } #resBox{ box-sizing: border-box; 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> //JS对HTML的操作 <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(num2Value)) { alert("请在第二个加数输入正确的数字"); return; //结束函数 } //执行相加 var res = num1Value + num2Value; //把结果输出到 resBox中 var resBox = document.getElementById("resBox"); resBox.innerHTML = res; } </script> </body> </html>
表达式
- 简单表达式； 变量、直接量
- 复杂表达式； 运算符与简单表达式的组合
- 函数调用表达式
运算符
1.算术运算符
- 加号运算符 +
- 减号运算符 -
- 乘号运算符 *
- 除号运算符 /
- 取余运算符(取模) %
- 负数运算符 -
- 正数运算符 +
- 递增运算符 ++
- 递减运算符 --
2.比较运算符
- 相等运算符 ==
- 不等运算符 !=
- 全等运算符 ===
- 不全等运运算符 !==
- 小于运算符 <
- 小于等于运算符 <=
- 大于运算符 >
- 大于等于运算符 >=
- in运算符
3.逻辑运算符
- 逻辑与 （并且） &&
- 逻辑或 (或者) ||
- 逻辑非 !
4.位运算符
- 按位与 &
- 按位或 |
- 按位非 ~
- 按位异或 ^
- 左移 <<
- 右移 >>
5.赋值运算符
- =
- +=
- -=
- *=
- /=
- %=
6.其他运算符
- 字符串连接符 +
- ,运算符
- typeof 运算符
- 比较运算符 表达式 ? 表达式1 ： 表达式2