数据类型转换

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的更多相关文章

  1. Util应用程序框架公共操作类（一）:数据类型转换公共操作类（介绍篇）

    本系列文章将介绍一些对初学者有帮助的辅助类,这些辅助类本身并没有什么稀奇之处,如何能发现需要封装它们可能更加重要,所谓授之以鱼不如授之以渔,掌握封装公共操作类的技巧才是关键,我会详细说明创建这些类的动 ...

  2. Util应用程序框架公共操作类(三):数据类型转换公共操作类（扩展篇）

    上一篇以TDD方式介绍了数据类型转换公共操作类的开发,并提供了单元测试和实现代码,本文将演示通过扩展方法来增强公共操作类,以便调用时更加简化. 下面以字符串转换为List<Guid>为例进 ...

  3. Util应用程序框架公共操作类(二):数据类型转换公共操作类（源码篇）

    上一篇介绍了数据类型转换的一些情况,可以看出,如果不进行封装,有可能导致比较混乱的代码.本文通过TDD方式把数据类型转换公共操作类开发出来,并提供源码下载. 我们在 应用程序框架实战十一:创建VS解决 ...

  4. (2017.10.16) javascript 数据类型转换与操作

    javascript 有 5 种基本数据类型:undefined.null.Boolean.String.Number,还有1 种较复杂的数据类型 Object:各种类型之间可以相互转换,其中有些有趣 ...

  5. JSON格式数据的js操作

    第一种方式: 使用js函数eval(); testJson=eval(testJson);是错误的转换方式. 正确的转换方式需要加(): testJson = eval("(" + ...

  6. JS 数据类型转换

    JS 数据类型转换 方法主要有三种 转换函数.强制类型转换.利用js变量弱类型转换. 1. 转换函数: js提供了parseInt()和parseFloat()两个转换函数.前者把值转换成整数,后者把 ...

  7. JS数据类型转换

    JS 数据类型转换 方法主要有三种 转换函数.强制类型转换.利用js变量弱类型转换. 1. 转换函数: js提供了parseInt()和parseFloat()两个转换函数.前者把值转换成整数,后者把 ...

  8. {}+[] = ? 和 []+{} = ? 浅谈JS数据类型转换

    参加公司技术嘉年华第一季(前端.服务端)的间隙,陈导问了我一个问题:{}+[] 和 []+{}两个表达式的值分别是什么?根据我的理解我觉得结果应该都是"[object Object]&quo ...

  9. JS的数据类型转换

    JS 数据类型转换 方法主要有三种 转换函数.强制类型转换.利用js变量弱类型转换. 1. 转换函数: js提供了parseInt()和parseFloat()两个转换函数.前者把值转换成整数,后者把 ...

随机推荐

  1. DFS（4）——hdu1010Tempter of the Bone

    一.题目回顾 题目链接:Tempter of the Bone Problem Description The doggie found a bone in an ancient maze, whic ...

  2. Log4Net讲解

    声明:本文内容主要译自Nauman Leghari的Using log4net,亦加入了个人的一点心得(节3.1.4). 1           简介 1.1          Log4net的优点: ...

  3. thymeleaf 布局layout

    以前写过一篇使用thymeleaf实现div中加载html 大部分内容都没问题,只是部分知识已经过时了. 重新记录: 依赖依然是 <dependency> <groupId>n ...

  4. [洛谷P3382]【模板】三分法

    题目大意:给出一个$N$次函数,保证在范围$[l,r]$内存在一点x,使得$[l,x]$上单调增,$[x,r]$上单调减.试求出$x$的值. 题解:求导,就变成了求零点,二分答案即可 卡点:无 C++ ...

  5. 【bzoj2141】排队 [国家集训队2011]排队(魏铭) 树套树 线段树套替罪羊树

    这个题就是动态偏序对,每次操作做两个删除两个插入就好了. #include<cstdio> #include<iostream> #include<cstring> ...

  6. 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 ...

  7. 安卓titlebar的组合控件使用

    http://blog.csdn.net/itachi85/article/details/51435187

  8. sql异常-The used SELECT statements have a different number of columns

    两个或多个select查询进行union时,查询的列不对应.两个select进行union时,两个select的查询出的列必须相对应.

  9. js 内置对象属性及方法

    1.Date 属性(1): constructor      所建立对象的函数参考 prototype       能够为对象加入的属性和方法 方法(43): getDay()        返回一周 ...

  10. JS中二维数组的声明

    var myarr=new Array(); //先声明一维 for(var i=0;i<2;i++){ //一维长度为2 myarr[i]=new Array(); //再声明二维 for(v ...