数据类型转换,JS操作HTML
数据类型转换1.自动转换(在某种运算环境下)Number环境String环境Boolean环境2.强制类型转换Number()字符串:纯数字和空字符转为正常数字,其他NaN布尔值:ture=1,false=0var str = "abc"console.log(typeof(str));var num = Number(str);console.log(num);console.log(typeof(num));console.log("")/* 最终输出stringNaNnumber*/String()原样输出var num=108.1;console.log(typeof(num));var str=String(num);console.log(str);console.log(typeof(str));console.log("")/*浏览器最终输出number108.1string*/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的区别:一数字开头的字符串,不会转化为NaNvar v="abc123";console.log(typeof(v));var n=parseInt(v);console.log(n);console.log(typeof(n));console.log("");/*stringNaNnumber*/parseFloat()转换为小数或整数与Number的区别:一数字开头的字符串,不会转换为NaNvar v="123.14abc";console.log(typeof(v));var n=parseFloat(v);console.log(n);console.log(typeof(n));console.log("")/*string123.14number*/JS操作 HTML1.事件onclick2.函数声明函数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(){//获取两个inputvar 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
