• 2022/09/16、17 day05/06：HTML和CSS

    文章目录

    今日内容

    1. JavaScript基础
    2. JavaScript高级

    JavaScript是一门语言，需要学习两天。

    JavaScript简介

    JavaScript是什么

    • 概念：一门客户端脚本语言。

      • 运行在客户端浏览器中。每一个浏览器都有JavaScript的解析引擎。
      • 脚本语言：不需要编译，直接就可以被浏览器解析执行了。

    • 功能：

      • 可以增强用户和html页面的交互过程，可以来控制html元素，让页面有一些动态的效果，增强用户的体验

    JavaScript发展史

    • JavaScript发展史：

      1. 1992年，Nombase公司，来发出第一门客户端脚本语言，专门用于表单校验。命名为：C–。后来更名为ScriptEase
      2. 1995年，Netscacpe（网景）公司，开发了一门客户端脚本语言：LiveScript。后来，请来了SUN公司的专家，修改LiveScript，命名为JavaScript（java语言非常火，当时想要借助热点，所以命名，所以java语言与JavaScript并没有任何关系）
      3. 1996年，微软抄袭JavaScript开发出JScript（与JavaScript几乎一模一样，只有细微差别）
      4. 1997年，ECMA（欧洲计算机制造商协会），ECMAScript，就是所有客户端脚本语言的标准。

    • JavaScript = ECMAScript + JavaScript自己特有的东西（BOM+DOM）

      1. ECMAScript
      2. BOM
      3. DIM

    ECMAScript

    • ECMAScript：客户端脚本语言的标准

      1. 基本语法：

        1. 与html的结合方式
          1. 内部JS：
            • 定义

    代码1：数据类型，变量

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>变量title>

<script>
  /*定义变量*/
/*  var a = 'a';
  alert(a);
  a = 123;
  alert(a);
  a = '当前网站有毒！请放心使用！';
  alert(a);*/

  //定义number类型的变量
  var num = 1;
  var num2 = 1.2;
  var num3 = NaN;
  //输出到页面上
  document.write(num + "
    "    );
  document.write(num2 + "
    "    );
  document.write(num3 + "
    "    );

  //定义String类型
  var str = '哈喽！'
  var str2 = "情爱的"
  document.write(str + "
    "    );
  document.write(str2+ "
    "    );

  //定义布尔类型
  var flag = true;
  var flag2 = false;
  document.write(flag + "
    "    );
  document.write(flag2 + "
    "    );

  //定义null
  var obj = null;
  var obj2 = undefined;
  var obj3 ;
  document.write(obj + "
    "    );
  document.write(obj2 + "
    "    );
  document.write(obj3 + "
    "    );




    script>

head>
<body>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54

    代码2：变量_typeof

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>变量title>

<script>
  /*定义变量*/
/*  var a = 'a';
  alert(a);
  a = 123;
  alert(a);
  a = '当前网站有毒！请放心使用！';
  alert(a);*/

  //定义number类型的变量
  var num = 1;
  var num2 = 1.2;
  var num3 = NaN;
  //输出到页面上
  document.write(num + "----" + typeof(num)+ "
    "    );
  document.write(num2 + "----" + typeof(num2) + "
    "    );
  document.write(num3 + "----" + typeof(num3) + "
    "    );

  //定义String类型
  var str = '哈喽！'
  var str2 = "情爱的"
  document.write(str + "----" + typeof(str) + "
    "    );
  document.write(str2 + "----" + typeof(str2) + "
    "    );

  //定义布尔类型
  var flag = true;
  var flag2 = false;
  document.write(flag + "----" + typeof(flag) + "
    "    );
  document.write(flag2  + "----" + typeof(flag2) + "
    "    );

  //定义null
  var obj = null;
  var obj2 = undefined;
  var obj3 ;
  document.write(obj  + "----" + typeof(obj) + "
    "    );
  document.write(obj2 + "----" + typeof(obj2) + "
    "    );
  document.write(obj3 + "----" + typeof(obj3) + "
    "    );




    script>

head>
<body>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54

    代码3：一元运算符

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一元运算符title>
    <script>
            /* 1. 一元运算符：只有一个运算数的运算符。
                * ++ -- ， +(正好)
                    * ++ --； 自增 自减
                        * ++/-- 在前：先加1(减1) 再运算
                        * ++/-- 在后：先运算，后加1(减1) */

    var num = 3;
    var a = ++num;
    document.write(num);//4
    document.write(a);//4
    document.write("
    "    );



   var b = +"123abc";
   document.write(typeof (b));
   document.write(b + 1 );
   document.write("
    "    );

   var flag = +true;
   var f2 = +false;
   document.write(typeof (flag) + "
    "    );//number
   document.write(flag + "
    "    );//1
   document.write(f2 + "
    "    );//0


        script>
head>
<body>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38

    代码4：算数运算符

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>算数运算符title>
    <script>
        var a = 3;
        var b = 4;
        document.write(a+b +"
    "    );//7
        document.write(a-b +"
    "    );//-1
        document.write(a*b +"
    "    );//12
        document.write(a/b +"
    "    );//0.75  number可以代表小数
        document.write(a%b +"
    "    );//3



        script>
head>
<body>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

    代码5：比较运算符

    **DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>比较运算符title>
    <script>

        /*
        比较运算符：

         */
        document.write((3 > 4) + "
    "    );
        document.write(('abc' > 'acd') + "
    "    );

        document.write(("123" == 123) + "
    "    );
        document.write(("123" === 123) + "
    "    );

        script>
head>
<body>

body>
html>2022/09/16、17 day05/06：HTML和CSS**

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23

    代码6：逻辑运算符

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>逻辑运算符title>
    <script>

        /*
        逻辑运算符：

         */

        var flag = true;
        document.write(flag + "
    "    );//true
        document.write(!flag + "
    "    );//false
        document.write(false&&flag + "
    "    );//false
        document.write("
    "    );
        document.write(flag||false + "
    "    );//true
        document.write("
    "    );
        document.write("
    "    );

        //number转boolean
        var num = 3;
        var num2 = 0;
        var num3 = NaN;
        document.write(!!num + "
    "    );//true
        document.write(!!num2 + "
    "    );//false
        document.write(!!num3 + "
    "    );//false
        document.write("
    "    );



        //string转boolean
        var str = "";
        var str2 = "abc";
        var str3 = "NaN";
        document.write(!!str + "
    "    );//false
        document.write(!!str2 + "
    "    );//true
        document.write(!!str3 + "
    "    );//true
        document.write("
    "    );

        //null & undefined转boolean
        var obj = null;
        var obj2;
        document.write(!!obj + "
    "    );//false
        document.write(!!obj2 + "
    "    );//true
        document.write("
    "    );

        //对象转boolean
        var date = new Date();
        document.write(!!date + "
    "    );//true
        document.write("
    "    );


        obj = "123";
        if(obj != null && obj.length > 0){ alert(123);}//防止空指针异常
        //JS中可以这样定义，来简化书写
        if(obj){alert("abc");}//防止空指针异常，可以这么优化：

        script>
head>
<body>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65

    代码7：JS特殊语法

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>特殊语法title>
  <script>

      //1. 语句以;结尾，入股一行只有一条语句则;可以省略，但是不建议。
      /*var a = 3;
      alert(a);*/


      /*
        2.变量的定义使用var关键字，也可以不使用
           * 用：定义的变量是局部变量。
           * 不用：定义的变量是全局变量。(不建议使用）【作用范围不一样】
       */
      /*b = 4;
      alert(b);*/

      function fun(){
          b = 4 ;

      }

      fun();
      alert(b);




  script>
head>
<body>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37

    代码8：流程控制语句-Switch

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Switch语句title>
  <script>

    var a = "abc";
    switch (a){
      case 1:
          alert("number"); break;
      case "abc":
        alert("string"); break;
      case true:
        alert("true");  break;
      case null:
        alert("null"); break;
      case undefined:
        alert("undefined"); break;
    }

  script>
head>
<body>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27

    代码9：流程控制语句–while

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>while语句title>
  <script>

      //1--100的和
      var sum = 0 ;
      var num = 1;

      while(num <=100){
          sum += num;
          num++;

      }
      alert(sum);

  script>
head>
<body>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24

    代码10：流程控制语句–for

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>for语句title>
  <script>

      var sum = 0 ;
      for(var i = 1; i<=100;i++){
          sum += i;
      }
      alert(sum);


  script>
head>
<body>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    代码11：练习：99乘法表

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>99乘法表title>
  <style>
    td{
      border: 1px solid;
    }
  style>
  <script>

    document.write("");//1. 完成基本的for循环嵌套，展示乘法表for(var i =1; i <=9; i++){
      document.write("");for(var j =1; j <= i; j++){
        document.write("");}/*//输出换行
      document.write("
    ")*/    

      document.write("");}//2. 完成表格嵌套
    document.write("
    

    
        
    
         ");
        //输出 1*1 = 1
        document.write(i + "*" + j + "=" + (i*j) + "   ");
        document.write("
      
      
    
    

    
    "    )

      script>
head>
<body>

body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
                                                                                     ——此文档为学习笔记！

    • 1
  • 相关阅读:
    AUTOCAD——坐标轴固定、CAD使用环形阵列绘制图形
    如何基于YAML设计接口自动化测试框架？看完秒会！
    Shopify Theme 开发 —— 性能优化
    【C++】Map、Set 模拟实现
    【scikit-learn基础】--『监督学习』之 岭回归
    tkinter: 变量类别
    数据库——数据库备份与恢复
    试论微积分基本定理
    华为OD机试 - 疫情扩散时间计算 - 矩阵（Java 2024 C卷 200分）
    易点易动RFID固定资产管理系统助力企业年终固定资产大盘点
  • 原文地址：https://blog.csdn.net/w2079930908/article/details/126911364