前端实训-Day5 执行代码

最新推荐文章于 2024-08-08 23:04:40 发布

劫o梦

最新推荐文章于 2024-08-08 23:04:40 发布

阅读量81

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/m0_57826741/article/details/130921869

版权

01.html

      <!DOCTYPE html>
      <html lang="en">

      <head>
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Document</title>
          <script>
              // JavaScript = ECMAScript + DOM + BOM
              // ECMAScript : 简称es 变量、数据类型、运算符、流程控制、函数、对象
              // DOM : 操作网页的html元素
              // BOM : 操作浏览器的功能
          </script>
      </head>

      <body>
          <div id="i1">这是一个div</div>
          <script>
              console.log(document.getElementById('i1'))
              document.getElementById('i1').style.color = 'red'
              document.getElementById('i1').style.fontSize = '50px'
          </script>
      </body>

      </html>

02.html

      <!DOCTYPE html>
      <html lang="en">

      <head>
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Document</title>
          <script>
              // JavaScript 简称 js
              // js代码需要写在script标签中才能运行
              // 变量 : 用来存储数据的容器
              // var 变量名 = 值
              // var、name、id、class
              var a = 1
              var b = 2
              // 数据类型
              // 1.数值类型number
              var c = 1
              var d = 1.1
              // console.log()  在控制台打印输出变量的内容
              // 在浏览器f12,找到console或控制台
              console.log(c, d)
              // typeof 变量名 用来查看变量的类型
              console.log(typeof c)
              console.log('------')
              // 2.字符串类型string
              var e = 'hello'
              var f = "world"
              console.log(e, f)
              console.log(typeof e)
              console.log('------')
              // 3.布尔类型boolean
              var g = true
              var h = false
              console.log(g, h)
              console.log(typeof g)
              console.log('------')
              // 4.undefined类型
              // 如果声明了一个变量但是没有赋值
              // 那么这个变量的值就是undefined
              var i;
              console.log(i)
              console.log(typeof c)
          </script>
      </head>

      <body>

      </body>

      </html>

03.html

      <!DOCTYPE html>
      <html lang="en">

      <head>
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Document</title>
          <script>
              // 算术运算符
              var a = 1
              var b = 2
              var c = 1 + 2
              // + - * / %
              console.log(c)
              var d = 10
              var e = 3
              // % 取余数
              console.log(d % e)
              console.log('------')
              // ++ 自增1 在变量原来值的基础之上+1
              var f = 2
              f++
              console.log(f)
              console.log('------')
              var g = 2
              // 注意给等号左边赋值的时候
              //  赋的是等号右边表达式的值,而不是g的值
              // g++ 因为++写在后面
              //  会先把g的值取出来作为表达式的值
              //  g的值是2,所以表达式的值是2
              // 然后g在原来的基础上+1,g的值变成了3
              // 给等号左边赋值的是表达式的值,表达式的值是2
              // 所以h的值为2
              var h = g++
              console.log(g, h)
              console.log('------')
              // 注意给等号左边赋值的时候
              //  赋的是等号右边表达式的值,而不是i的值
              // ++i,因为++写在前面
              //  会先做自增 i的值变成了3
              // 然后把i的值作为表达式的值,表达式的值是3
              // 给等号左边赋值的是表达式的值
              var i = 2
              var j = ++i
              console.log(j, i)
              // 赋值运算符
              // =   +=   -=   *=   /=   %=
              var k = 1
              k += 10 // k = k + 10
              console.log(k)
              k -= 10 // k = k - 10
              console.log(k)
          </script>
      </head>

      <body>

      </body>

      </html>

04.html

      <!DOCTYPE html>
      <html lang="en">

      <head>
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Document</title>
          <script>
              // 比较运算符  结果是布尔型 true 或 false
              // > < >= <=      == != 
              var a = 1
              var b = 2
              console.log(a >= b)
              console.log(a <= b)
              console.log('-------')
              var c = 1
              var d = 1
              console.log(c == d)
              console.log(c != d)
              console.log('-------')
              // 逻辑运算符
              // && || !
              // ! 非
              console.log(!true)
              console.log(!false)
              console.log('-------')
              // && 与 两边都是true,结果才是true
              // 只要有一边是false,结果就是false
              console.log(1 == 1 && 2 == 2)
              console.log(1 == 2 && 2 == 2)
              console.log('-------')
              // || 或 两边只要有一边是true,结果就是true
              console.log(1 == 2 || 2 == 2)
              console.log('-------')
              // 三目运算符、三元运算符
              // 结果 = 表达式1 ? 表达式2 : 表达式3
              // 如果表达式1的值为true就返回表达式2的值
              // 如果表达式1的值为false就返回表达式3的值
              var e = 1 > 2 ? 100 : 200
              console.log(e)
          </script>
      </head>

      <body>

      </body>

      </html>

05.html

      <!DOCTYPE html>
      <html lang="en">

      <head>
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Document</title>
          <script>
              // 分支流程控制
              // if(表达式){
              //   代码块1
              // }else{
              //   代码块2
              // }
              // 如果表达式的值为true,就执行代码块1
              // 如果表达式的值为false,就执行代码块2
              var a = -1
              if (a > 0) {
                  console.log('a大于0')
              } else {
                  console.log('a不大于0')
              }
              console.log('-------')
              // switch 会拿着key和value进行比较
              //  如果key和value相等,就执行对应的代码块
              //  如果跟所有的value都不相等则执行default代码块
              // switch (key) {
              //   case value:
              //     代码块     
              //     break;
              //   case value:
              //     代码块     
              //     break;
              //   default:
              //     break;
              // }
              var b = 4
              switch (b) {
                  case 1:
                      console.log(1)
                      break;
                  case 2:
                      console.log(2)
                      break;
                  case 3:
                      console.log(3)
                      break;
                  default:
                      console.log('啥也不是')
                      break;
              }
          </script>
      </head>

      <body>

      </body>

      </html>

06.html 计算出 1 ~ 100 之间偶数的和，可以自己写一下

      <!DOCTYPE html>
      <html lang="en">

      <head>
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Document</title>
          <script>
              // 循环
              // for(初始化表达式;条件表达式;更新表达式){
              //    代码块
              // }
              // 先执行初始化表达式 , 只执行一次
              //  在执行条件表达式,如果为true,就执行代码块
              //    执行更新表达式
              //  再执行条件表达式,如果为true,就执行代码块
              //    执行更新表达式
              //  再执行条件表达式,如果为true,就执行代码块
              //    执行更新表达式

              // 条件表达式主要是用来控制什么时候结束循环
              //    条件表达式为false就结束循环
              for (var i = 0; i < 10; i++) {
                  // 字符串和变量可以通过+号拼接在一起
                  console.log('跑第' + i + '圈')
              }
              console.log('------')
              for (var i = 1; i <= 61; i++) {
                  console.log('第' + i + '位同学')
              }
              console.log('------')
              // 计算出 1 ~ 100 之间整数的和
              var sum = 0 // 用来保存和
              for (var i = 1; i <= 100; i++) {
                  sum = sum + i
              }
              console.log(sum)
              // 计算出 1 ~ 100 之间偶数的和
              var ou = 0; // 用来保存和

              for (var i = 1; i <= 100; i++) {
                  if (i % 2 === 0) { 
                    // 判断 i 是否为偶数
                      ou = ou + i;
                  }
              }

              console.log(ou);
          </script>
      </head>

      <body>

      </body>

      </html>

07.html

// 定义一个数组,保存自己小组成员的名字
// 循环输出每一个名字，自己写一下

      <!DOCTYPE html>
      <html lang="en">

      <head>
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Document</title>
          <script>
              // 数组:用来保存一组数据
              //          0    1    2
              var arr = ['a', 100, true]
              console.log(arr)
              // arr.length 数组的长度
              console.log(arr.length)
              // 取出数组的中的元素,通过下标取值
              console.log(arr[0])
              console.log(arr[1])
              console.log(arr[2])
              // 下标可以取值,也可以赋值,同时可以增加元素
              arr[0] = '张三'
              arr[3] = '李四'
              arr[4] = '王五'
              console.log(arr)
              console.log(arr.length)
              console.log('-------')
              for (var i = 0; i < arr.length; i++) {
                  console.log(i, arr[i])
              }
              // 定义一个数组,保存自己小组成员的名字
              // 循环输出每一个名字
          </script>
      </head>

      <body>

      </body>

      </html>

08.html // 练习 : 定义一个对象, 保存你们自己的信息，可以自己写一下

      <!DOCTYPE html>
      <html lang="en">

      <head>
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Document</title>
          <script>
              // 对象 用来保存一条数据
              var user = {
                  uname: 'tom',
                  age: 22,
                  sex: '男'
              }
              var phone = {
                  brand: '锤子',
                  color: '绿色',
                  price: 3700
              }
              console.log(user)
              // 通过属性名取值
              console.log(user.uname)
              // 通过属性名赋值
              user.uname = 'jerry'
              // 如果给一个不存在属性赋值,则会给对象增加一个属性
              user.salary = 10000000
              console.log(user)
              // 练习 : 定义一个对象, 保存你们自己的信息


              var myself = {
                  name: 'TXP',
                  age: 21,
                  sex: '男',
                  occupation: '硬件工程师',
                  hobby: ['打游戏', '看电影', '旅游'],
                  education: {
                      degree: '本科',
                      major: '通信工程',
                      school: 'ZD'
                  }
              }

              console.log(myself)
              console.log(myself.name)
              myself.name = 'TXP'
              myself.hobby.push('听音乐')
              console.log(myself)


          </script>
      </head>

      <body>

      </body>

      </html>

09.html

      <!DOCTYPE html>
      <html lang="en">

      <head>
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Document</title>
          <script>
              var userList = [{
                      uname: 'tom',
                      age: 2
                  },
                  {
                      uname: 'jerry',
                      age: 1
                  },
                  {
                      uname: 'spike',
                      age: 3
                  }
              ]
              for (var value of userList) {
                  console.log(value)
                  console.log(value.uname, value.age)
              }
          </script>
      </head>

      <body>

      </body>

      </html>

10.html

//写一个函数，传递半径，返回圆的面积

//var pi = 3.14，自己写一下

           <!DOCTYPE html>
      <html lang="en">

      <head>
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Document</title>
          <script>
              // 函数 : 将一段可重复利用的代码进行封装
              var arr = ['tom', 'jerry', 'spike']
              var user = ['张三', '李四', '王五']
              var userForeach = function () {
                  for (var key in user) {
                      console.log(key, user[key])
                  }
              }
              // userForeach 不加小括号只是保存的函数体
              console.log(userForeach)
              userForeach() // 函数名加小括号才是调用函数

              console.log('------')
              // function (形参) —> 用来接收实参传递过来的值
              var foreach = function (a) {
                  // a = 调用函数时传递过来的实参
                  console.log(a)
                  for (var key in a) {
                      console.log(key, a[key])
                  }
              }
              // 函数名(实参), 在调用时传入参数会被转到函数内部
              foreach(arr)
              foreach(user)
              console.log('------')
              //计算任意传递的两个数之间的所有数字和
              var sum = function (start, end) {
                  console.log(start, end)
                  var total = 0
                  for (var i = start; i <= end; i++) {
                      total += i
                  }
                  //console.log(total)
                  //return 返回值
                  return total
              }
              var s = sum(10, 99)
              console.log('s=' + s)
              sum(99, 200)
              //写一个函数，传递半径，返回圆的面积
              //var pi = 3.14
              var pi = 3.14
              var getCircleArea = function (radius) {
                  var area = pi * radius * radius
                  return area
              }
              var r = 2
              var circleArea = getCircleArea(r)
              console.log('半径为' + r + '的圆的面积为：' + circleArea)
          </script>
      </head>

      <body>

      </body>

      </html>

11.html

      <!DOCTYPE html>
      <html lang="en">

      <head>
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Document</title>
          <script>
              var foreach = function (arr) {
                  for (var key in arr) {
                      console.log(key, arr[key])
                  }
              }
              var join = function (arr, sep) {
                  var str = ''
                  for (var i = 0; i < arr.length; i++) {
                      if (i == arr.length - 1) {
                          str = str + arr[i]
                      } else {
                          str = str + arr[i] + sep
                      }
                  }
                  console.log(str)
              }
              var strArr = ['lr', 'fs', 'ms', 'sm', 'zs']
              join(strArr, '->') // lr->fs->ms->sm->zs
              var ArrayUtils = {
                  // 对象的属性值如果是一个函数,我们称之为方法
                  foreach: function (arr) {
                      for (var key in arr) {
                          console.log(key, arr[key])
                      }
                  },
                  join: function (arr, sep) {
                      var str = ''
                      for (var i = 0; i < arr.length; i++) {
                          if (i == arr.length - 1) {
                              str = str + arr[i]
                          } else {
                              str = str + arr[i] + sep
                          }
                      }
                      console.log(str)
                  },
                  findIndex: function (arr, num){
                    //如果循环结束还没有等num相等的值，返回-1
                    for (var i = 0; i < arr.length;i++){
                        console.log(arr[i])
                        if (arr[i] == num){
                            //return会终止循环
                            return  i
                        }
                    }
                    return -1
                  }
              }
              ArrayUtils.foreach(strArr)
              ArrayUtils.join(strArr, '->')
              //在ArrayUtils对象添加一个方法findIndex
              // 用来查找传入的数组是否包含指定的数字
              //  如果包含返回返回下标，如果不包含返回-1
              var numArr = [99, 76, 100, 38, 59]
              var index = ArrayUtils.findIndex(numArr, 110) // 2
              var index = ArrayUtils.findIndex(numArr, 100)
              console.log('---------------------')
              console.log('其下标是' + index)
          </script>
      </head>

      <body>

      </body>

      </html>

劫o梦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
前端实训-Day5 执行代码

// 数组:用来保存一组数据// 0 1 2// arr.length 数组的长度// 取出数组的中的元素,通过下标取值// 下标可以取值,也可以赋值,同时可以增加元素arr[0] = '张三'arr[3] = '李四'arr[4] = '王五'i++) {// 定义一个数组,保存自己小组成员的名字// 循环输出每一个名字
复制链接

扫一扫