JavaScript 高级使用运算符操作元素分支结构

最新推荐文章于 2024-06-14 10:11:23 发布

巜巜

最新推荐文章于 2024-06-14 10:11:23 发布

阅读量434

点赞数

分类专栏： JavaScript 高级开发文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_49739911/article/details/127004799

版权

JavaScript 高级开发专栏收录该内容

7 篇文章 0 订阅

订阅专栏

运算符

运算符，用于连接表达式中操作数，并对操作数执行运算。

var num = num1+num2，num1&&num2操作数，+运算符号，num1 + num2表达式

算数运算符

+ - * / 四则运算，% 取余求模（被2整除，为偶数）

自增与自减

var b = 3
var c = b++ //符号在后，先把b的值3赋值给c（先把b的值赋值给最终表达式），b再自增成4

var d = 3
var e = ++d //符号在前，d先自增成4，再将自增后的值赋值给e，
console.log(e, d)
var m1 = 7
var m2 = m1-- //m2 =7 m1 =6
var m3 = --m1 // m1= 5 m3= 5
console.log(m1, m2, m3)

比较运算符

== 等于，比较两个值是否相同
=== 全等于，不仅比较两个值是否相同，还会比较类型是否相等
!= 不等于，比较两个值是否不相同
!==不全等于，比较两个值不相同或者类型不相同

字符串进行比较

// 字符串之间的比较，将字符串转换为编码进行比较
console.log('3'.charCodeAt() > '10'.charCodeAt())

NaN和任何值进行比较，结果都会是false

逻辑运算符

&& 逻辑与，只有两个表达式结果都为true，最终结果就是true，否则false
|| 逻辑或，关联的两个表达式，其中一个表达式为true时，最终结果为true，否则为false

短路

表达式 1 && 表达式 2

表达式 1 || 表达式 2

赋值运算符

执行顺序，先执行运算，再执行赋值，如 a + = 5 == a = a+5

一目运算符，一个运算符连接一个表达式
二目运算符，一个运算符连接两个表达式
三目运算符，一个运算符连接三个表达式
1. 格式：表达式条件？表达式1 ：表达式2，表达式条件为真，取表达式1，否则取表达式2

操作网页元素

标签设置id属性，id不允许重复

给元素绑定点击事件，监听用户操作

//按钮绑定点击事件
btn.onclick = function () {

}
//输入框获得焦点事件
input.onfocus = function () {

}
//输入框失去焦点事件
input.onblur = function () {

}

简易计算器

  <body>
    数字1<input type="text" id="number1" /><br />
    数字2<input type="text" id="number2" /><br />
    <button id="btn">=</button><br>总和：<input type="text" id="totals">
    <!-- 获取用户输入的两个数字，把结果弹出 -->
    <script>
      btn.onclick = function () {
        var total = Number(number1.value) + Number(number2.value)
				totals.value = total  
      }
    </script>
  </body>

修改标签内容 //id.innerHTML = '修改后的内容'

修改css样式 //id.style.属性 = ‘属性值’（属性驼峰命名法）

流程控制

如果条件表达式中出现空字符串，需要执行if的语句块，对这个值进行取反

分支结构

if（）语句

if(条件表达式){
	语句块
}
// if() 语句块（推荐）

if else 语句

if(条件表达式){
	语句块 1，条件表达式结果为true执行
} else {
    语句块 2，条件表达式结果为false执行
}

else if 语句

 // 保存学生成绩score，输出评定结果 90-100 优秀 80-90 良好 70-80 中等 60-70 及格 <60 不及格 不在0-100之间，打印，成绩非法
      var score = 101
      if (score > 100 || score < 0) {
        console.log("非法成绩")
      } else if (score >= 90) {
        console.log("优秀")
      } else if (score >= 80) {
        console.log("良好")
      } else if (score >= 70) {
        console.log("中等")
      } else if (score >= 60) {
        console.log("及格")
      } else {
        console.log("不及格")
      }

switch-case 语句

一种特殊的多项分支语句，条件只能进行全等于比较，全等，执行对应case后的内容
break用于跳出switch循环，case没有加break，会发生穿透现象

 <h2>美食推荐</h2>
    <input type="text" id="city" placeholder="请输入目标城市" />
    <button id="btn">查看当地美食</button>
    <div id="box"></div>
    <script>
      // n值依次与case后的值作比较，相等执行对应case后面的语句
      // 如果执行的case后没有break，会发生穿透
      // 前面的所有case都没有匹配到，执行default默认选项
      // var citys = city.value
      btn.onclick = function () {
        switch (city.value) {
          case "北京":
            box.innerHTML = "烤鸭"
            break
          case "成都":
            box.innerHTML = "火锅"
            break
          case "东北":
            box.innerHTML = "大乱斗"
            break
          case "武汉":
            box.innerHTML = "热干面"
            break
          default:
            box.innerHTML = "牛肉面"
        }
      }
    </script>

循环结构

重复执行

循环条件，循环从哪里开始，循环到哪里结束

while(循环条件){
    循环体
}
break  用于强制结束循环

巜巜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 高级使用运算符操作元素分支结构

JavaScript 高级使用运算符操作元素分支结构
复制链接

扫一扫

专栏目录

JavaScript 高级使用 运算符 操作元素 分支结构

运算符

算数运算符

比较运算符

逻辑运算符

赋值运算符

操作网页元素

简易计算器

流程控制

分支结构

循环结构

“相关推荐”对你有帮助么？

JavaScript 高级使用运算符操作元素分支结构