数据类型转换,JS操作HTML
数据类型转换
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的更多相关文章
- Util应用程序框架公共操作类(一):数据类型转换公共操作类(介绍篇)
本系列文章将介绍一些对初学者有帮助的辅助类,这些辅助类本身并没有什么稀奇之处,如何能发现需要封装它们可能更加重要,所谓授之以鱼不如授之以渔,掌握封装公共操作类的技巧才是关键,我会详细说明创建这些类的动 ...
- Util应用程序框架公共操作类(三):数据类型转换公共操作类(扩展篇)
上一篇以TDD方式介绍了数据类型转换公共操作类的开发,并提供了单元测试和实现代码,本文将演示通过扩展方法来增强公共操作类,以便调用时更加简化. 下面以字符串转换为List<Guid>为例进 ...
- Util应用程序框架公共操作类(二):数据类型转换公共操作类(源码篇)
上一篇介绍了数据类型转换的一些情况,可以看出,如果不进行封装,有可能导致比较混乱的代码.本文通过TDD方式把数据类型转换公共操作类开发出来,并提供源码下载. 我们在 应用程序框架实战十一:创建VS解决 ...
- (2017.10.16) javascript 数据类型转换与操作
javascript 有 5 种基本数据类型:undefined.null.Boolean.String.Number,还有1 种较复杂的数据类型 Object:各种类型之间可以相互转换,其中有些有趣 ...
- JSON格式数据的js操作
第一种方式: 使用js函数eval(); testJson=eval(testJson);是错误的转换方式. 正确的转换方式需要加(): testJson = eval("(" + ...
- JS 数据类型转换
JS 数据类型转换 方法主要有三种 转换函数.强制类型转换.利用js变量弱类型转换. 1. 转换函数: js提供了parseInt()和parseFloat()两个转换函数.前者把值转换成整数,后者把 ...
- JS数据类型转换
JS 数据类型转换 方法主要有三种 转换函数.强制类型转换.利用js变量弱类型转换. 1. 转换函数: js提供了parseInt()和parseFloat()两个转换函数.前者把值转换成整数,后者把 ...
- {}+[] = ? 和 []+{} = ? 浅谈JS数据类型转换
参加公司技术嘉年华第一季(前端.服务端)的间隙,陈导问了我一个问题:{}+[] 和 []+{}两个表达式的值分别是什么?根据我的理解我觉得结果应该都是"[object Object]&quo ...
- JS的数据类型转换
JS 数据类型转换 方法主要有三种 转换函数.强制类型转换.利用js变量弱类型转换. 1. 转换函数: js提供了parseInt()和parseFloat()两个转换函数.前者把值转换成整数,后者把 ...
随机推荐
- Eureka搭建
Eureka搭建 一.Eureka基本框架搭建 pom.xml文件配置:主要是引入Eureka所依赖的jar包 <?xml version="1.0" encoding=&q ...
- Gitlab自动触发Jenkins构建项目
Gitlab自动触发Jenkins构建项目 一.前提 Gitlab已安装配置好. Jenkins已安装Gitlab plugin. 二.配置jenkins中Job 1.勾选触发器下的gitlab触发器 ...
- 并查集——poj2524(入门)
传送门:Ubiquitous Religions 许多次WA,贴上错的代码随时警示 简单没多加修饰的并查集 [WA1] #include <iostream> #include <c ...
- 【转】H5 - HTML5新增标签
下面分别是传统的div+css的页面布局方式 下面是HTML5布局方式: 是不是精简了很多呢 现在来说说图片中出现的标签: 结构标签:(块状元素) 有意义的div artical 标记定义一篇文章 ...
- 在使用easyUI时,js,css样式都加载了 但是图标加载不了
可能的问题:web.xml 配置了这些 <servlet-mapping> <servlet-name>default</servlet-name> <url ...
- union的代码有点难理解额
union跟位域都可以节省内存,而且union在某些地方还能起到更好看的效果? 比如: struct Matrix { union { struct { float _f11, _f12, _f13, ...
- 一个python游戏源码
#finalPyPong.py import pygame,sys class MyBallClass(pygame.sprite.Sprite): def __init__(self,image_f ...
- 【bzoj4516】[Sdoi2016]生成魔咒 后缀数组+倍增RMQ+STL-set
题目描述 魔咒串由许多魔咒字符组成,魔咒字符可以用数字表示.例如可以将魔咒字符 1.2 拼凑起来形成一个魔咒串 [1,2].一个魔咒串 S 的非空字串被称为魔咒串 S 的生成魔咒. 例如 S=[1,2 ...
- BZOJ4361 isn(动态规划+树状数组+容斥原理)
首先dp出长度为i的不下降子序列个数,显然这可以树状数组做到O(n2logn). 考虑最后剩下的序列是什么,如果不管是否合法只是将序列删至只剩i个数,那么方案数显然是f[i]*(n-i)!.如果不合法 ...
- 近期对于windows服务的理解
1.APP.config的作用 在开发环境下时,根目录下的APP.config里面会填写一些参数之类的.当生成之后,这些参数将会被自动生成在*.exe文件目录中.如图: 其中,.exe文件为Win ...