数据类型转换

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 680.验证回文字符串

    验证回文字符串 给定一个非空字符串 s,最多删除一个字符.判断是否能成为回文字符串. 示例 1: 输入: "aba" 输出: True 示例 2: 输入: "abca&q ...

  2. Python——数据类型之set

    本篇主要内容 • set集合的特点 • set集合的建立 • set集合的17个内置函数 • set集合的数学运算符号 1.set集合类型的特点. 1.无序 2.不同元素 3.元素必须不可变.(数字, ...

  3. ios UI自动化测试学习笔记

    一.一些注意事项: 1.做自动化测试时注意如果是真机话首先要设置不锁屏. 2.自动化测试过程中如果程序后台或崩溃了.脚本运行将会暂停,直到程序再次回到前台. 3.必须明确指定关闭自动测试,测试完成或中 ...

  4. Football Games(思维题）

    Problem Description A mysterious country will hold a football world championships---Abnormal Cup, at ...

  5. 安徽师大附中%你赛day6 T3 Hamsters [POI2010]CHO-Hamsters 解题报告

    [POI2010]CHO-Hamsters 题意: 给出n个互不包含的字符串,要求你求出一个最短的字符串S,使得这n个字符串在S中总共至少出现m次,问S最短是多少? 范围: \(1 \le n \le ...

  6. 用伪类实现一个div的宽度和高度是固定百分比

    遇到一个题目:一个div宽度是固定百分比的情况下,如何设置高度是宽度的80% 看到题目的第一反应是用js控制,获取到div的宽度之后再用宽度的80%来设置div的高度,但是如何在不用js的情况下,只用 ...

  7. 【ZJ选讲·BZOJ 5073】

    小A的咒语 给出两个字符串A,B (len<=105) 现在可以把A串拆为任意段,然后取出不超过 x 段,按在A串中的前后顺序拼接起来 问是否可以拼出B串. [题解]       ①如果遇 ...

  8. 一些奇怪的JavaScript试题

    JavaScript有很多地方和我们熟知的C.Java等的编程习惯不同,这些不同会产生很多让人意想不到的事情.前段时间在知乎有人发了写Javascrtip试题,觉得挺好玩的,这里跟大家分享一下. 01 ...

  9. istringstream()函数的用法

    istringstream()函数的用法 头文件:#include 功能:将一个含有多个空格的字符串分割开来 eg:

  10. codeforces902C. Hashing Trees

    https://codeforces.com/contest/902/problem/C 题意: 给你树的深度和树的每个节点的深度,问你是否有重构,如果有重构输出两个不同的结构 题解: 如果相邻节点的 ...