1.概述

js：脚本语言，用来解释和说明一门语言
作用：用来给html网页增加动态功能，定义网页的行为。
html：静态页面 css：样式表 js：脚本语言

2.入门程序

1.所有的js都必须写在script标签中
2.script标签可以定义在html的任何位置
3.console.log(“内容”)；在控制台打印

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.     </head>
  7.     <body>
  8.     </body>
  10.     <!-- 
  11.         1. 所有的js都必须写在script标签中
  12.         2. script标签可以定义在html中的任何位置
  13.         3. console.log("内容");   在控制台打印
  14.     -->
  15.     <script type="text/javascript">
  16.         //在控制台打印
  17.         console.log("hello js!");
  18.     </script>
  21. </html>

3.变量

在js中定义变量使用var关键字

  1. var 变量名;
  2. var 变量名 = 值;

命名规则：和Java命名规则相同。
无论任何数据类型，都是用var来定义

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.     </head>
  7.     <body>
  8.     </body>
  10.     <script type="text/javascript">
  11.     /* 
  12.         变量的定义
  13.             var 变量名;
  14.             var 变量名 = 值;
  16.                 1. 变量名命名规则和java中一模一样。
  17.                 2. 无论任何数据类型，都是var来定义
  19.      */
  20.         var name = "jackma";
  21.         var age = 18;
  22.         var isBoss = false;
  24.     </script>
  26. </html>

4.数据类型

  • number
    • 整数，小数
  • boolean
  • string
    • 在js中只有字符串，没有字符
    • 在js中，单引号和双引号都表示字符串
  • undefined
    • 当一个变量未被初始化时，他的值为undefined
  • null
  • Function 函数类型
  • object 对象类型

注意：在js中可以使用typeof运算符检测一个变量的数据类型
使用方式：typeof(表达式)或typeof 变量名

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.     </head>
  7.     <body>
  8.     </body>
  9.         <script type="text/javascript">
  10.             /* 
  11.                 数据类型
  12.                     java   
  13.                         整数  byte short int long
  14.                         小数  float double
  15.                         布尔  boolean
  16.                         字符  char
  17.                     js
  18.                         number      整数,小数
  19.                         boolean     布尔    false true
  20.                         string        字符串    没有字符
  22.                         undefined   未定义 
  25.                 typeof 变量名   获取数据类型
  26.              */
  28.             var age = 18;
  29.             var price = 18.8;
  31.             var isOk = true;
  33.             var name = 'jackma';
  35.             var flag;
  37.       var a = null;
  39.             console.log(typeof age);
  40.             console.log(typeof price); //number
  42.             console.log(typeof isOk); //boolean
  44.             console.log(typeof name);  //string
  46.             console.log(typeof flag); //undefined
  50.         </script>
  51. </html>

4.1类型转换

  • number转string：3 + “”
  • number转boolean：在js中，变量的值为0，null，undefined则为false，不为0则代表true

  • string转number：

    • parseInt,parseFloat
    • 乘以1即可

      5.运算符

  • 算数运算符

          • / %

注意：进行算数运算时
整数除以整数若无法除尽则得到的结果为小数
整数与小数的运算结果为小数

  • 关系运算符

    • < >= <= != ==

注意：==只会比较变量的值，不会比较变量的数据类型
===既会比较变量的值，又会比较变量的数据类型

  • 赋值运算符
    • += -= ++ — =
  • 逻辑运算符
    • 且 或 非

  • 三目运算符

    • 和Java中一样

      1. <!DOCTYPE html>
      2. <html>
      3. <head>
      4.    <meta charset="utf-8">
      5.    <title></title>
      6. </head>
      7. <body>
      8. </body>
      9. <script type="text/javascript">
      10.    /*
      11.        运算:
      12.            1. 算数运算
      13.                + - * / %
      14.            2. 关系运算   : boolean类型数据
      15.                >  <  >= <= == !=
      16.            3. 逻辑运算
      17.            4. 三元表达式
      18.     */
      20.    /*
      21.        1.算数运算
      22.            整数除以整数若无法除尽则得到的结果为小数
      23.            整数与小数的运算结果为小数
      24.     */
      25.    var a1 = 5;
      26.    var b1 = 2;
      27.    var r1 = a1/b1; //2.5
      28.    console.log(r1);
      30.    /* 
      31.        2.关系运算
      32.        == 只比较值，不比较数据类型
      33.            只要值相等则结果就为true
      34.        === 既比较值，又比较数据类型
      35.            只有值和数据类型都相等，结果才为true
      36.     */
      37.    var a2 = '12';
      38.    var b2 = 12;
      39.    var r2 = a2 == b2;
      40.    console.log(r2);
      41.    var r3 = a2 === b2;
      42.    console.log(r3);
      44.    /* 
      45.        3.逻辑运算：且，或，非
      46.     */
      47.    var a3 = true;
      48.    var b3 = false;
      49.    var r4 = a3&&b3;
      50.    console.log(r4)
      51.    var r5 = !b3;
      52.    console.log(r5)
      54.    /*
      55.        4.三元表达式
      56.     */
      57.    var score = 80;
      58.    var result = score>60?"及格":"不及格";
      59.     console.log(result);
      60. </script>
      61. </html>

      6.分支结构-if

  • 和java语言基本一致

  • 语法：

    1. if(条件){
    2. ...
    3. }else{
    4. ...
    5. }

    注意：条件中可以使用的数据类型
    1. boolean
    true
    false
    2. number
    0 false
    其他 true
    3. string
    null/“” false
    其他 true
    4. undefined false
    5.括号中直接写未定义的字母则会报错

    1. <!DOCTYPE html>
    2. <html>
    3.   <head>
    4.       <meta charset="utf-8">
    5.       <title></title>
    6.   </head>
    7.   <body>
    8.   </body>
    9.   <script type="text/javascript">
    10.       /*
    11.           分支结构
    12.           if
    13.           if - else
    14.           if - else if
    15.           if - else if - else
    16.        */
    18.       /* 
    19.           90-100  优秀
    20.           80 - 90 良
    21.           60 - 80 及格
    22.           0 - 60 不及格
    23.        */
    24.       var score = 80;
    25.       if(score >= 90){
    26.           console.log("优秀")
    27.       }else if(score >= 80){
    28.           console.log("良")
    29.       }else if(score >= 60){
    30.           console.log("及格")
    31.       }else {
    32.           console.log("不及格")
    33.       }
    35.       var a = 3;
    36.       if(a){
    37.           console.log(1);
    38.       }else{
    39.           console.log(2);
    40.       }
    41.   </script>
    42. </html>

    ```html <!DOCTYPE html> 

    1.   <meta charset="utf-8">
    2.   <title></title>

  1. <a name="KLUCq"></a>
  2. # 7.分支结构-switch
  3. ![image.png](https://cdn.nlark.com/yuque/0/2022/png/27062448/1657111763750-b74ac3a5-c39b-44bd-8347-13a38a854b36.png#clientId=uacb5a287-9167-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=239&id=u5ded3175&margin=%5Bobject%20Object%5D&name=image.png&originHeight=299&originWidth=313&originalType=binary&ratio=1&rotation=0&showTitle=false&size=26795&status=done&style=none&taskId=u113a6916-9235-4e90-a9f3-55622aa35b1&title=&width=250.4)
  4. <a name="c2DHN"></a>
  5. # 8.循环结构
  7. - while
  8. - do-while
  9. - for
  11. 使用与java中基本一致<br />![image.png](https://cdn.nlark.com/yuque/0/2022/png/27062448/1657111832521-1f0ce055-b0eb-4496-b6d8-ddae07ad3a70.png#clientId=uacb5a287-9167-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=70&id=u1d73f85b&margin=%5Bobject%20Object%5D&name=image.png&originHeight=88&originWidth=315&originalType=binary&ratio=1&rotation=0&showTitle=false&size=18396&status=done&style=none&taskId=u9df07ef2-79b4-43b0-963c-b421c1f6341&title=&width=252)
  12. ```html
  13. <!DOCTYPE html>
  14. <html>
  15.     <head>
  16.         <meta charset="utf-8">
  17.         <title></title>
  18.     </head>
  19.     <body>
  20.     </body>
  21.     <script type="text/javascript">
  22.         /*
  23.             循环
  24.                 while
  25.                 do-while
  26.                 for
  27.          */
  28.         var n = 1;
  29.         var sum = 0;
  30.         while(n<=100){
  31.             sum += n;
  32.             n++;
  33.         }
  34.         console.log(sum)
  36.     //----------------------------------
  37.         var n1 = 1;
  38.         var sum1 = 0;
  39.         do{
  40.             sum1 += n1;
  41.             n1++
  42.         }while(n1<=100);
  43.         console.log(sum1);
  45.     //-----------------------------------
  46.         var sum2 = 0;
  47.         for (var i = 0; i <= 100; i++) {
  48.             sum += i;
  49.         }
  50.         console.log(sum2);
  51.     </script>
  52. </html>