数据类型转换

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. LightGBM的算法介绍

    LightGBM算法的特别之处 自从微软推出了LightGBM,其在工业界表现的越来越好,很多比赛的Top选手也掏出LightGBM上分.所以,本文介绍下LightGBM的特别之处. LightGBM ...

  2. 目标检测之Faster-RCNN的pytorch代码详解(模型训练篇)

    本文所用代码gayhub的地址:https://github.com/chenyuntc/simple-faster-rcnn-pytorch  (非本人所写,博文只是解释代码) 好长时间没有发博客了 ...

  3. ajax 异步刷新，需要填写的参数

    参数 options 类型:Object 可选.AJAX 请求设置.所有选项都是可选的. ******* async 类型:Boolean 默认值: true.默认设置下,所有请求均为异步请求.如果需 ...

  4. vue实战(一):利用vue与ajax实现增删改查

    vue实战(一):利用vue与ajax实现增删改查: <%@ page pageEncoding="UTF-8" language="java" %> ...

  5. MySQL 5.6查看数据库的大小

    1. use information_schema; 2. select concat(round(sum(data_length/1024/1024),2),'MB') as data from t ...

  6. Vue.js---组件

    详情点此连接(转载) 组件的创建和注册 vue.js的组件的使用有3个步骤:创建组件构造器.注册组件和使用组件. 1. 调用Vue.extend()方法创建组件构造器. 2. 调用Vue.compon ...

  7. [C/C++] C/C++中数字与字符串之间的转换

    在C中: 方法: 1.C标准库中的sprintf, sscanf 2.C标准库还提供了 atoi, atof, atol, atoll(C++11标准) 函数将字符串转换成int,double, lo ...

  8. javasisst & JAVA8

    今天在服务器上启动tomcat7的时候,提示如下异常: java.io.IOException: invalid constant type: 15 具体看是javasisst抛出来的. 系统运行环境 ...

  9. [poj] 2396 [zoj] 1994 budget || 有源汇的上下界可行流

    poj原题 zoj原题 //注意zoj最后一行不要多输出空行 现在要针对多赛区竞赛制定一个预算,该预算是一个行代表不同种类支出.列代表不同赛区支出的矩阵.组委会曾经开会讨论过各类支出的总和,以及各赛区 ...

  10. BZOJ 2226 [Spoj 5971] LCMSum | 数论拆式子

    题目: http://www.lydsy.com/JudgeOnline/problem.php?id=2226 题解: 题目要求的是Σn*i/gcd(i,n) i∈[1,n] 把n提出来变成Σi/g ...