数据类型转换

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. python之*args和**kwargs参数，以及迭代器

    *args让函数可以接受不限制多个位置参数,**kwargs让函数可以接受不限制多个关键字参数,用法如图 2.迭代器总结

  2. APP与智能手表是如何通信的【本文摘抄自深圳尚锐科技】

    APP与智能手表是如何通信的 1. Android 与服务器的通信方式主要有两种,一种是http 通信 ,一种是socket 通信. 两者的最大差异在于,http连接使用的是“请求—响应方式”,即在请 ...

  3. Hadoop世界中的HelloWorld之WordCount具体分析

    MapReduce 应用举例:单词计数 WorldCount可以说是MapReduce中的helloworld了,下面来看看hadoop中的例子worldcount对其进行的处理过程,也能对mapre ...

  4. golang and intellij

    有一个项目,混合了java和go,需要在intellij中安装go的插件. OK,网上的信息简直混乱不堪,两个流派,一个流派就是装插件,一个流派就是编译插件,各种折腾,还是安装不了,谁知柳暗花明又一村 ...

  5. ArcGis下的叠加分析

     1矢量与矢量叠加的话就用ToolBox里有Overlay: 2如果是矢量和栅格叠加的话用Spatial analysis模块中的 zonal statistics: 3还有就是栅格与栅格的叠加S ...

  6. BZOJ4415 SHOI2013发牌（线段树）

    似乎是noip2017d2t3的一个部分分.用splay的话当然非常裸,但说不定会被卡常.可以发现序列中数的(环上)相对位置是不变的,考虑造一棵权值线段树维护权值区间内还有多少个数留在序列中,每次在线 ...

  7. poj 2226 Muddy Fields (二分匹配)

    Muddy Fields Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 7340   Accepted: 2715 Desc ...

  8. 【题解】ZJOI2008骑士

    树型打牌:洛谷P2607 这道题目一开始没有想到解法,只是想到没有上司的舞会,觉得十分的类似呀. 之后发现:n个点,n条边,只要删去一条边,就变成了和上题一模一样的做法. 那么考虑删去的这条边,实际上 ...

  9. Eclipse来push，fetch，rebase代码

    如何与项目里的其他人一起合作项目,提交代码并更新呢?这里提出我比最近用到的两种工具:一种是Eclipse,另外一个是SourceTree.个人推荐从事Java开发的话,可以用Eclipse.当然,还有 ...

  10. rsync 同步

    1./usr/bin/rsync -vzrtopg --progress  --include "weibo-service-server" --exclude "/*& ...