数据类型转换,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
数据类型转换,JS操作HTML的更多相关文章
- Util应用程序框架公共操作类(一):数据类型转换公共操作类(介绍篇)
本系列文章将介绍一些对初学者有帮助的辅助类,这些辅助类本身并没有什么稀奇之处,如何能发现需要封装它们可能更加重要,所谓授之以鱼不如授之以渔,掌握封装公共操作类的技巧才是关键,我会详细说明创建这些类的动 ...
- Util应用程序框架公共操作类(三):数据类型转换公共操作类(扩展篇)
上一篇以TDD方式介绍了数据类型转换公共操作类的开发,并提供了单元测试和实现代码,本文将演示通过扩展方法来增强公共操作类,以便调用时更加简化. 下面以字符串转换为List<Guid>为例进 ...
- Util应用程序框架公共操作类(二):数据类型转换公共操作类(源码篇)
上一篇介绍了数据类型转换的一些情况,可以看出,如果不进行封装,有可能导致比较混乱的代码.本文通过TDD方式把数据类型转换公共操作类开发出来,并提供源码下载. 我们在 应用程序框架实战十一:创建VS解决 ...
- (2017.10.16) javascript 数据类型转换与操作
javascript 有 5 种基本数据类型:undefined.null.Boolean.String.Number,还有1 种较复杂的数据类型 Object:各种类型之间可以相互转换,其中有些有趣 ...
- JSON格式数据的js操作
第一种方式: 使用js函数eval(); testJson=eval(testJson);是错误的转换方式. 正确的转换方式需要加(): testJson = eval("(" + ...
- JS 数据类型转换
JS 数据类型转换 方法主要有三种 转换函数.强制类型转换.利用js变量弱类型转换. 1. 转换函数: js提供了parseInt()和parseFloat()两个转换函数.前者把值转换成整数,后者把 ...
- JS数据类型转换
JS 数据类型转换 方法主要有三种 转换函数.强制类型转换.利用js变量弱类型转换. 1. 转换函数: js提供了parseInt()和parseFloat()两个转换函数.前者把值转换成整数,后者把 ...
- {}+[] = ? 和 []+{} = ? 浅谈JS数据类型转换
参加公司技术嘉年华第一季(前端.服务端)的间隙,陈导问了我一个问题:{}+[] 和 []+{}两个表达式的值分别是什么?根据我的理解我觉得结果应该都是"[object Object]&quo ...
- JS的数据类型转换
JS 数据类型转换 方法主要有三种 转换函数.强制类型转换.利用js变量弱类型转换. 1. 转换函数: js提供了parseInt()和parseFloat()两个转换函数.前者把值转换成整数,后者把 ...
随机推荐
- DFS(4)——hdu1010Tempter of the Bone
一.题目回顾 题目链接:Tempter of the Bone Problem Description The doggie found a bone in an ancient maze, whic ...
- Log4Net讲解
声明:本文内容主要译自Nauman Leghari的Using log4net,亦加入了个人的一点心得(节3.1.4). 1 简介 1.1 Log4net的优点: ...
- thymeleaf 布局layout
以前写过一篇使用thymeleaf实现div中加载html 大部分内容都没问题,只是部分知识已经过时了. 重新记录: 依赖依然是 <dependency> <groupId>n ...
- [洛谷P3382]【模板】三分法
题目大意:给出一个$N$次函数,保证在范围$[l,r]$内存在一点x,使得$[l,x]$上单调增,$[x,r]$上单调减.试求出$x$的值. 题解:求导,就变成了求零点,二分答案即可 卡点:无 C++ ...
- 【bzoj2141】排队 [国家集训队2011]排队(魏铭) 树套树 线段树套替罪羊树
这个题就是动态偏序对,每次操作做两个删除两个插入就好了. #include<cstdio> #include<iostream> #include<cstring> ...
- How to reclaim space in InnoDB when innodb_file_per_table is ON
When innodb_file_per_table is OFF and all data is going to be stored in ibdata files. If you drop so ...
- 安卓titlebar的组合控件使用
http://blog.csdn.net/itachi85/article/details/51435187
- sql异常-The used SELECT statements have a different number of columns
两个或多个select查询进行union时,查询的列不对应.两个select进行union时,两个select的查询出的列必须相对应.
- js 内置对象属性及方法
1.Date 属性(1): constructor 所建立对象的函数参考 prototype 能够为对象加入的属性和方法 方法(43): getDay() 返回一周 ...
- JS中二维数组的声明
var myarr=new Array(); //先声明一维 for(var i=0;i<2;i++){ //一维长度为2 myarr[i]=new Array(); //再声明二维 for(v ...