数据类型转换,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;
  		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>


  <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