• 周五. 9月 30th, 2022

5G编程聚合网

5G时代下一个聚合的编程学习网

热门标签

JavaScript基础-2(JS操作HTML、运算符)

admin

11月 28, 2021

数据类型转换

1.自动转换(在某种运算环境下)

  • Number环境
  • String环境
  • Boolean环境

2.强制类型转换

  • Number()

    • 字符串: 纯数字字符和空字符转为正常数字,其他NaN

    • 布尔值: ture:1 false:0

       var str="abc";
       console.log(typeof(str));
       var num=Number(str);
      
  • String()

    • 原样输出
  • Boolean()

    • 转换为false: 数字0, 空字符串, null 和 undefined
    • 转换为true: 值表示有东西
  • parseInt()

    • 转换为整数
    • 与Number的区别: 一数字开头的字符串, 不会转换为NaN
  • parseFloat()

    • 转换为小数或整数

    • 与Number的区别: 一数字开头的字符串, 不会转换为NaN

       var v = "123.14abc";
       console.log(typeof(v));
       var n = parseFloat(v);
       console.log(n);//输出为123.14
      

JS操作 HTML

1. 事件

  • onclick

2.函数

  • 声明函数

      function 函数名(){
      	代码;
      }
    
  • 调用函数

      函数名()
    

3.获取元素

  • document.getElementById("id名")
  • js代码写在 html元素的后面

4.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;
      					300px;
      					padding:10px;
      					font-size:16px;
      					line-height: 16px;
      					border:1px solid #ccc;
      				}
      			button{
      					background:#f5f5f5;
      				}
      			#resBox{
      					box-sizing: border-box;
      					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>
    
      			//JS对HTML的操作
      			<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(num2Value)) {
      						alert("请在第二个加数输入正确的数字");
      						return;  //结束函数
      					}
      			
      		
      					//执行相加
      					var res = num1Value + num2Value;
      		
      					//把结果输出到 resBox中
      					var resBox = document.getElementById("resBox");
      					resBox.innerHTML = res;
      				}
      			</script>
      </body>
      </html>
    

表达式

  • 简单表达式; 变量、直接量
  • 复杂表达式; 运算符与简单表达式的组合
  • 函数调用表达式

运算符

1.算术运算符

  • 加号运算符 +
  • 减号运算符 –
  • 乘号运算符 *
  • 除号运算符 /
  • 取余运算符(取模) %
  • 负数运算符 –
  • 正数运算符 +
  • 递增运算符 ++
  • 递减运算符 —

2.比较运算符

  • 相等运算符 ==
  • 不等运算符 !=
  • 全等运算符 ===
  • 不全等运运算符 !==
  • 小于运算符 <
  • 小于等于运算符 <=
  • 大于运算符 >
  • 大于等于运算符 >=
  • in运算符

3.逻辑运算符

  • 逻辑与 (并且) &&
  • 逻辑或 (或者) ||
  • 逻辑非 !

4.位运算符

  • 按位与 &
  • 按位或 |
  • 按位非 ~
  • 按位异或 ^
  • 左移 <<
  • 右移 >>

5.赋值运算符

  • =
  • +=
  • -=
  • *=
  • /=
  • %=

6.其他运算符

  • 字符串连接符 +
  • ,运算符
  • typeof 运算符
  • 比较运算符 表达式 ? 表达式1 : 表达式2

发表回复

您的电子邮箱地址不会被公开。