数据类型转换

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. Leetcode 3. Longest Substring Without Repeating Characters (Medium)

    Description Given a string, find the length of the longest substring without repeating characters. E ...

  2. 【Linux】Linux修改openfile和max user processes？

    #当时测试虚机为centos7.4版本: # 在/etc/security/limits.conf文件末尾添加如下命令: *     soft     nproc   1314 *     hard  ...

  3. 【PHP】- session_cache_limiter(private,must-revalidate)是什么意思

    session_cache_limiter(private,must-revalidate)是什么意思 表义一: 指定会话页面所使用的缓冲控制方法: 当session_cache_limiter('p ...

  4. 在submit_bio处使用stapn

    想着在submit_bio的地方,发现在guru模式下,stap是经常性地把内核整挂呀,不得已,也没有发现stap什么比较好的调试方法,所以索性直接使用stap的语法了,但是发现有问题呢,有的时候bv ...

  5. SQL Server 使用分区函数实现查询优化

    在项目中遇到一个需求,需要在商家收藏信息中,获取到该商家发布的最新一条商品的发布时间,需求很简单,SQL语句也不复杂, select T_UserCollectMerchant.CollectID,T ...

  6. 【题解】SDOI2014数数

    真的很开心呢,总算是有一道完完全全由自己做出来的题目啦~ 这一道题目洛谷P3311和另一道JSOI文本生成器的题目是十分相像的,dp方面几乎相同.只是<=n的约束,让这道题目必须结合数位dp的方 ...

  7. [bzoj5321] [Jxoi2017]加法

    Description 可怜有一个长度为 n 的正整数序列 A,但是她觉得 A 中的数字太小了,这让她很不开心. 于是她选择了 m 个区间 [li, ri] 和两个正整数 a, k.她打算从这 m 个 ...

  8. GDI绘图中的映射模式CDC::SetMapMode()

    原文链接:http://blog.csdn.net/charlessimonyi/article/details/8264572 在GDI绘图前,一般要设置映射模式.映射模式是什么呢?它是逻辑长度单位 ...

  9. HDU 3446 有贪心思想的01背包

    Proud Merchants Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/65536 K (Java/Others) ...

  10. [ST表/贪心] NOI2010 超级钢琴

    [NOI2010]超级钢琴 题目描述 小Z是一个小有名气的钢琴家,最近C博士送给了小Z一架超级钢琴,小Z希望能够用这架钢琴创作出世界上最美妙的音乐. 这架超级钢琴可以弹奏出n个音符,编号为1至n.第i ...