JavaScript 是互联网上最流行的脚本语言,这门语言可用于 HTML 和 web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

JavaScript 是脚本语言

JavaScript 是一种轻量级的编程语言。

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。

JavaScript 很容易学习。


一、JS的基本语法与结构

1.1 JavaScript 用法


HTML 中的脚本必须位于 <script></script> 标签之间。

脚本可被放置在 HTML 页面的 <body><head> 部分中。

1.2 JavaScript 输出

JavaScript 没有任何打印或者输出的函数。

JavaScript 可以通过不同的方式来输出数据:

  • 使用 window.alert() 弹出警告框。
  • 使用 document.write() 方法将内容写到 HTML 文档中。
  • 使用 innerHTML 写入到 HTML 元素。
  • 使用 console.log() 写入到浏览器的控制台。

document.getElementById("demo") 是使用 id 属性来查找 HTML 元素的 JavaScript 代码 。该方法是 HTML DOM 中定义的。

innerHTML = "Paragraph changed." 是用于修改元素的 HTML 内容(innerHTML)的 JavaScript 代码。

1.3 JavaScript基本语法

JavaScript 是一个程序语言。语法规则定义了语言结构。

1. JavaScript 字面量

  • 数字(Number)字面量 可以是整数或者是小数,或者是科学计数(e):
  • 字符串(String)字面量 可以使用单引号或双引号 :"John Doe" 'John Doe'
  • 数组(Array)字面量 定义一个数组:[40, 100, 1, 5, 25, 10]
  • 对象(Object)字面量 定义一个对象:{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}
  • 函数(Function)字面量 定义一个函数:function myFunction(a, b) { return a * b;}

2. JavaScript 变量

在编程语言中,变量用于存储数据值。

JavaScript 使用关键字 var 来定义变量, 使用等号来为变量赋值:

var x, length

x = 5

length = 6

3.JavaScript 操作符

JavaScript使用 算术运算符 来计算值: (5 + 6) * 10

JavaScript使用赋值运算符给变量赋值

x = 5
y = 6
z = (x + y) * 10

4.JavaScript 关键词

JavaScript 语句通常以关键词为开头。 var 关键词告诉浏览器创建一个新的变量:

var x = 5 + 6;
var y = x * 10;

5.JavaScript 数据类型

JavaScript 有多种数据类型:数字,字符串,数组,对象等等:

var length = 16;                                  // Number 通过数字字面量赋值
var points = x * 10;                              // Number 通过表达式字面量赋值
var lastName = "Johnson";                         // String 通过字符串字面量赋值
var cars = ["Saab", "Volvo", "BMW"];              // Array  通过数组字面量赋值
var person = {firstName:"John", lastName:"Doe"};  // Object 通过对象字面量赋值

6.JavaScript 函数

JavaScript 语句可以写在函数内,函数可以重复引用:引用一个函数 = 调用函数(执行函数内的语句)。

function myFunction(a, b) {
    return a * b;                                // 返回 a 乘于 b 的结果
}
function calc() {
            var n = 1;
            for (let t = 9; t >= 1; t--) {
                n = (n+1)*2;
            }
            console.log(n);
            document.getElementById("result").innerHTML ="一共有"+ n +"个桃子";
        }

1.4 JavaScript 语句

JavaScript 语句是发给浏览器的命令。

这些命令的作用是告诉浏览器要做的事情。

下面的 JavaScript 语句向 id="demo" 的 HTML 元素输出文本 "Hello Dolly" :

实例

document.getElementById("demo").innerHTML = "你好 Dolly.";

1. JavaScript 语句标识符

JavaScript 语句通常以一个 语句标识符 为开始,并执行该语句。

语句标识符是保留关键字不能作为变量名使用。下表列出了 JavaScript 语句标识符 (关键字) :

语句描述
break用于跳出循环。
catch语句块,在 try 语句块执行出错时执行 catch 语句块。
continue跳过循环中的一个迭代。
do ... while执行一个语句块,在条件语句为 true 时继续执行该语句块。
for在条件语句为 true 时,可以将代码块执行指定的次数。
for ... in用于遍历数组或者对象的属性(对数组或者对象的属性进行循环操作)。
function定义一个函数
if ... else用于基于不同的条件来执行不同的动作。
return退出函数
switch用于基于不同的条件来执行不同的动作。
throw抛出(生成)错误 。
try实现错误处理,与 catch 一同使用。
var声明一个变量。
while当条件语句为 true 时,执行语句块。

1.5 JavaScript 变量

1.声明(创建) JavaScript 变量

var carname;

carname="Volvo";

var carname="Volvo";

var lastname="Doe", age=30, job="carpenter";

<p id="demo"></p>
var carname="Volvo";
document.getElementById("demo").innerHTML=carname;

1.6 JavaScript 比较和逻辑运算符

比较和逻辑运算符用于测试 true 或者 false

1. 比较运算符

运算符描述
==判断
===绝对等于(值和类型均相等)
!=不等于
!==不绝对等于(值和类型有一个不相等,或两个都不相等)
>大于
<小于
>=大于或等于
<=小于或等于
=赋值

2.逻辑运算符

逻辑运算符用于测定变量或值之间的逻辑。

给定 x=6 以及 y=3,下表解释了逻辑运算符:

  • && and与
  • || or或
  • ! not非

二、JavaScript 流程语句

2.1 if…else 语句

  • if 语句 - 只有当指定条件为 true 时,使用该语句来执行代码
  • if...else 语句 - 当条件为 true 时执行代码,当条件为 false 时执行其他代码
  • JavaScript三目运算 - 当条件为true 时执行代码,当条件为 false 时执行其他代码
  • if...else if....else 语句- 使用该语句来选择多个代码块之一来执行

1. 语法

if (condition){       
    当条件为 true 时执行的代码
}
if (condition){       
    当条件为 true 时执行的代码      
}else{        
    当条件不为 true 时执行的代码        
}
if (condition1){        
    当条件 1 为 true 时执行的代码
}else if (condition2){        
    当条件 2 为 true 时执行的代码
}else{        
    当条件 1 和 条件 2 都不为 true 时执行的代码
}

2. 实例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>分数页面优化输出</title>
    </head>
    <body>
        <form action="" method="post">
            <!-- 1、设置页面 -->
            <input type="text" id="score" placeholder="请输入你的分数" />
            <!-- 2、设置事件驱动提交按钮 -->
            <input type="button" name="anniu" value="领取奖励" onclick="jiangli()" />
            <!-- js与dom交互 -->
            <div id="msg"></div>
        </form>
    </body>
    <script type="text/javascript">
        // 3、自定义函数,函数声明
        function jiangli() {
            // div中msg初始化
            document.getElementById("msg").innerHTML = "";
            // 4、输入框 得到页面上文本框text的score中的输入的值
            let a = document.getElementById("score").value;
            // 5、类型转换
            a = parseFloat(a);
            // 6、控制输入数字为1-100;
            if (!(a >= 0 && a <= 100)) {
                document.getElementById("msg").innerHTML = "请输入0-100范围内的分数!";
                return;
            }
            // 7、分数a的条件判断
            let msg = ""
            if (a >= 90 && a <= 100) {
                msg = "奖励两根雪糕!";
            } else if (a >= 80) {
                msg = "奖励一根冰棒!";
            } else if (a >= 70) {
                msg = "奖励女子单打!";
            } else if (a >= 60) {
                msg = "奖励男子单打!";
            } else if(a >= 0) {
                msg = "奖励男女组合双打!";
            }
            document.getElementById("msg").innerHTML = msg;
        }
    </script>
</html>

2.2 switch case 语句

1. 语法

<script type="text/javascript">
        switch (n) {
            case 1:
                执行代码块 1
                break;
                
            case 2:
                执行代码块 2
                break;
            default:
                n 与 case 1 和 case 2 不同时执行的代码
        }
    </script>

2. 实例

<script type="text/javascript">
        // 小括号内是一个变量或表达式
        let a = "A";
        switch (a) {
            // 用a和case后面的每个值进行一次匹配
            case 'A':
                // hello =>执行的代码块
                console.log('A')
                break; // break跳出
            case 'B':
                // hello =>执行的代码块
                console.log('B')
                break; // break跳出
            case 'C':
                // hello =>执行的代码块
                console.log('C')
                break; // break跳出
            default: //上面所有的case都不匹配,走default的代码块
                console.log('default')
                break;
        }
    </script>

2.3 while 循环

while 循环会在指定条件为真时循环执行代码块。

先判断条件,再执行循环体

1. 语法

while (条件)
   {
  需要执行的代码
   }

2. 实例

<script type="text/javascript">
        // 自定义变量
        function calc() {
            let i = 101;
            
            let str ="";
            // 循环条件
            while (i <= 199) {
                // 条件判断,满足则输出结果
                if (i % 3 == 1 && i % 4 == 2 && i % 5 == 3) {
                    console.log("人数可能为" + i + "人");
                    str = str +i+" "; 
                }
                // i自增
                i++;
            }
            document.getElementById("result").innerHTML = str;
        }
    </script>

//--------------------------------------------------------------------------------

<script type="text/javascript">
        // 循环结构常见要素:循环变量;循环条件;
        // while循环
        let i = 1;    //循环变量
        while(i<=100){    //循环条件;一定在某一刻为false
            console.log("helloword" + i)
            i++;    //循环变量要变化,目的是为了在某一刻循环条件为false;
            // 循环内部,通过特定的条件判断来执行跳出循环操作
            break;
        }    
    </script>

//--------------------------------------------------------------------------------

<script type="text/javascript">
        function calc() {
            // 获取文本框中输入的值;
            let num = document.getElementById("num").value;
            num = parseInt(num);
            let i = 1; //循环变量
            let sum = 0; //定义一个变量和sum,初始值为0;
            while (i <= num) { //循环条件;一定在某一刻为false
                // 累加
                sum = sum + i; // sum+ = i;
                i++;
            }
            document.getElementById("result").innerHTML = sum;
        }
    </script>
// 1 <= 4 判断完了  再++ 2
// 2 <= 4 判断完了  再++ 3
// 3 <= 4 判断完了  再++ 4
// 4 <= 4 判断完了  再++ 5
// 5 <= 4 判断完了  再++ 6
<script type="text/javascript">
        let i = 1;
        while(i++<=4);
        console.log("i"+i);
    </script>

i++   //先引用后自增
++i      //先自增后引用

2.4 do/while 循环

先执行一次,再判断。当程序执行到 while 循环时 , 会首先判断小括号里的值 ,如果值:

为假 :结束while语句 , 程序继续向下走

为真 :会把while 循环里大括号里的所有内容执行一次 , 全部执行完毕之后 ,会再度来到条件处

判断小括号里的值 , 如果值条件一直为true ,且没有 break return , 那么循环会一直循环下去 (死循环)

1. 语法

 do   {  需要执行的代码   } while (循环条件);

2. 实例

let i =1; 
do
   {
  console.log("i"+i);
   }
 while (i--<=0);

2.5 for 循环

循环可以将代码块执行指定的次数。

先判断条件,再执行循环体

1.语法

for (语句 1; 语句 2; 语句 3)        
  {        
  被执行的代码块        
  }

2.实例

<script type="text/javascript">
            let sum = 0;
            // 循环条件,一定要在某一刻为false
            for (let i = 0; i<= 100;i++) {
                if (i%3 == 0) {
                    console.log("i = " + i);
                    // 累加求和
                    sum = sum + i;
                }
                // 累加
            }
            console.log("sum = " + sum);
        </script>

//--------------------------------------------------------------------------------
<script type="text/javascript">
        function calc() {
            // 获取文本框中输入的值;
            let num = document.getElementById("num").value;
            num = parseInt(num);
            let sum = 0; //定义一个变量和sum,初始值为0;
            for (let i = 1;i <= num;i++) { //循环条件;一定在某一刻为false
                // 累加
                sum = sum + i; // sum+ = i;
            }
            document.getElementById("result").innerHTML = sum;
        }
    </script>

//--------------------------------------------------------------------------------
<!-- 操场100多人,三人一组多1人,四人一组多2人,五人一组多3人 -->
    <script type="text/javascript">
        // 自定义变量
        function calc() {
            let str ="";
            // 循环条件
            for (i = 101;i <= 199;i++) {
                // 条件判断,满足则输出结果
                if (i % 3 == 1 && i % 4 == 2 && i % 5 == 3) {
                    console.log("人数可能为" + i + "人");
                    str = str +i+" "; 
                }
            }
            document.getElementById("result").innerHTML = str;
        }
    </script>

//--------------------------------------------------------------------------------
<script type="text/javascript">
        // 自定义函数
        function calc() {
            // 定义变量
            let h = 0.1;  //纸张高度
            let c = 0;    //折纸次数
            let height = 8848000;    //珠峰高度
            // 循环结构
            for(;h <= height;){
                //折纸一次
                h = h * 2;
                //折纸次数自增
                c++;
                console.log("第"+c+"次折纸"+"高度为"+h+"mm");
            }
            // 循环结束
            console.log("折纸"+c+"次后"+"高度大于8848000mm");
            document.getElementById("result").innerHTML ="折纸"+c+"次后"+"高度大于8848000mm";
        }
    </script>

2.5 Break 和 Continue关键字

break 语句可用于跳出循环。

continue 结束档次循环,尝试进行下一次循环。语句跳出循环后,会继续执行该循环之后的代码(如果有的话)

1.Break 语句

<script type="text/javascript">
for (i=0;i<10;i++)
{
    if (i==3){
        break;
    }
    x=x + "The number is " + i + "<br>";
}
    </script>

2.Continue 语句

<script type = "text/javascript" >
            for (i = 0; i <= 10; i++) {
                if (i == 3) continue;
                x = x + "The number is " + i + "<br>";
            }
    </script>

2.6 嵌套循环

1. for套for循环

<script type="text/javascript">
        // 外循环,外面的循环先执行
        for (let i = 0; i <=6; i++) {
            // 当外循环= 0
            // 内循环 j=0 循环到6
            for (let j = 0; j < 6; j++) {
                console.log(j);
            }
        }
    </script>

for循环嵌套实例

<script type="text/javascript">
        // 我国古代数学家张丘建在《算经》一书中提出的数学问题:
        // 鸡翁一值钱五,鸡母一值钱三,鸡雏三值钱一。
        // 百钱买百鸡,问鸡翁、鸡母、鸡雏各几何?
        // 100元 全部拿去买公鸡 最少买0只,最多买20只;
        // 100元 全部拿去买母鸡 最少买0只,最多买33只;
        // 100元 全部拿去买小鸡 最少买0只,最多买100只;
        // 1、公鸡数量
        for (let i = 0; i < 20; i++) {
            // 2、母鸡数量
            for (let j = 0; j < 33; j++) {
                // 3、小鸡数量
                let k;
                // 4、数量与总钱数条件判断
                if ((i + j + k == 100) && (i * 5 + j * 3 + k / 3 == 100)) {
                    console.log("公鸡买" + i + "只" + "母鸡买" + j + "只" + "小鸡买" + k + "只");
                }
            }
        }
    </script>

公鸡买0只母鸡买25只小鸡买75只
公鸡买4只母鸡买18只小鸡买78只
公鸡买8只母鸡买11只小鸡买81只
公鸡买12只母鸡买4只小鸡买84只

<script type="text/javascript">
        // 100元换钱
        // 50元 全部拿去换 最少0,最多2;
        // 20元 全部拿去换 最少0,最多5;
        // 10元 全部拿去换 最少0,最多10;
        for (let i = 0; i <= 2; i++) {
            for (let j = 0; j <= 5; j++) {
                // 4、张数条件判断
                for (let k = 0; k <= 10; k++) {
                    if (i * 50 + j * 20 + k * 10 == 100) {
                        console.log("50元换" + i + "张;" + "20元换" + j + "张;" + "10元换" + k + "张");
                    }
                }
            }
        }
    </script>

50元换0张;20元换0张;10元换10张
50元换0张;20元换1张;10元换8张
50元换0张;20元换2张;10元换6张
50元换0张;20元换3张;10元换4张
50元换0张;20元换4张;10元换2张
50元换0张;20元换5张;10元换0张
50元换1张;20元换0张;10元换5张
50元换1张;20元换1张;10元换3张
50元换1张;20元换2张;10元换1张
50元换2张;20元换0张;10元换0张

2.7 打印图像

外循环打印行,内循环打印列

<script type="text/javascript">
        // 外循环打印行
        for (let i = 1; i <= 10; i++) {
            let star = " ";
            // 内循环打印每行的列(*号的个数)
            for (let j = 1; j <= i; j++) {
                // log每次输出都换一行
                // 每次打印之前先凭借好*字符串,再每一行集中打印一下
                star = star + "*"
            }
            console.log(star);
        }
    </script>

三、JavaScript 函数

​ 在JavaScript中,函数即对象,可以随意地被程序操控,函数可以嵌套在其他函数中定义,这样可以访问它们被定义时所处的作用域中的任何变量。

1、定义函数 function jiangli(){ }

2、调用函数 事件=函数名() 对象名.事件=函数 函数直接项目调用 函数自调用—递归调用

3.1 定义函数

JavaScript 函数语法

function functionname(){
    执行代码
}

function functionname(参数){
    执行代码
    return;   //返回值
}
  • 无参数,无返回值
  • 无参数,有返回值
  • 有参数,无返回值
  • 有参数,有返回值 (常用)
<script type="text/javascript">
            // 3、自定义函数,函数声明
            function jiangli(){
                document.getElementById("msg").innerHTML = "";
                // 4、输入框 得到页面上文本框text的score中的输入的值
                let a = document.getElementById("score").value;
                // 5、类型转换
                a = parseFloat(a);
                
                // 6、控制输入数字为1-100;
                if(!(a>=0 && a<=100)){
                    document.getElementById("msg").innerHTML = "输入的范围应该在0-100之间!";
                    return;
                }
                let msg = "";
                // 7、分数a的条件判断
                if (a >= 90 && a <= 100) {
                    msg = "奖励两根雪糕!";
                } else if (a >= 80) {
                    msg = "奖励一根冰棒!";
                } else if (a >= 70) {
                    msg = "奖励女子单打!";
                } else if (a >= 60) {
                    msg = "奖励男子单打!";
                } else if (a >= 0) {
                    msg = "奖励男女组合双打!";
                }
                // 得到页面上div中msg的值
                document.getElementById("msg").innerHTML = msg;
            }
        </script>

3.2 调用函数

1.事件 = 函数名()

function fun01(){
    
}

2.对象名.事件=函数

window.onload = fun02();

3. 函数直接项目调用

function fun02(){
    fun01();
}

4. 函数自调用—递归调用

<input type="button" value="立即组成" onclick="fun03()" />

function fun03(){
    fun03();
}
function fun03(){
    console.log("fun03")
    if(.....){                // 必须保证不能无限制的进行自我调用
       fun03();
       }
}
function fun04(参数){    //写在小括号内部的就是参数,参数就是这个函数执行的条件;
                        //函数要完成这个特定的功能,参数是必须的,否则函数将无法执行;
}

注意:

  • 写在小括号内部的就是参数,参数就是这个函数执行的条件;
  • 函数要完成这个特定的功能,参数是必须的,否则函数将无法执行;
// 典型案例
function fun04(选择商品,付款){     //参数
    .....
    将商品从出货口出来
    //返回值
    return 矿泉水
}
function fun05(n){
    if(n==1);{
        return 1;
    }
    return fun05(n-1)+n;
}
function fun06(n){
    let result = fun05(n);
    console.log("fun==>"+result);
}

四、JavaScript 数组

数组对象的作用是:使用单独的变量名来存储一系列的值。

4.1 创建数组

<script type="text/javascript">
            // 定义数组
            let array01 = ['apple','banana'];
            // 访问数组元素
            console.log(array01);
            // 下标访问
            console.log(array01[0]+";"+array01[1]);
        </script>
// new 一个数组
<script type="text/javascript">
            let array01 = new Array('a','b','c');
// 遍历数组
            array01.forEach(function (item){
                console.log(item);
            })
        </script>
// new 一个数组
<script type="text/javascript">            
            let array02 = new Array(3);
            console.log(array02.length);
// 遍历数组
            array02.forEach(function (item){
                console.log("==>"+item);
            })
        </script>
let array03 = Array.of(1, 2.3, 4, 5)
            array04.forEach(function(item) {
                console.log("==>" + item);
            })

["apple", "banana"]

apple;banana

4.2 遍历数组

1. forEach遍历数组

<script type="text/javascript">
            // 定义数组
            let array01 = ['apple','banana'];    
            // forEach遍历数组
            array01.forEach(function(item,index){
                console.log(item+";"+index);
            })
        </script>

apple;0
banana;1

2. for遍历数组

<script type="text/javascript">
            // 定义数组
            let array01 = ['apple','banana'];
            // for遍历数组
            for(let i = 0; i < array01.length; i++){
                console.log(array01[i]+";"+i);
            }
        </script>

apple;0
banana;1

4.3 数组操作

  • 添加元素到数组的末尾
var newLength = fruits.push('Orange');
// newLength:3; fruits: ["Apple", "Banana", "Orange"]
  • 添加元素到数组的头部
var newLength = fruits.unshift('Strawberry') // add to the front
// ["Strawberry", "Banana"];
  • 删除数组末尾的元素
var last = fruits.pop(); // remove Orange (from the end)
// last: "Orange"; fruits: ["Apple", "Banana"];
  • 删除数组最前面(头部)的元素
var first = fruits.shift(); // remove Apple from the front
// first: "Apple"; fruits: ["Banana"];

1. 删除首位和末尾实例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <form action="" method="post">
            <input type="text" id="number" placeholder="请输入一个数字" />
            <input type="button" value="添加" onclick="addMumber()" />
            <input type="button" value="删除数组第一个元素" onclick="removeElement('first')" />
            <input type="button" value="删除数组最后一个元素" onclick="removeElement('last')" />
            <div id="result"></div>
        </form>
        <script type="text/javascript">
            // 1、定义一个数组
            let array = [];
            // 2、自定义函数addMumber()
            function addMumber() {
                // 3、获取用户text中输入的数值并字符强转
                let number = parseInt(document.getElementById("number").value);
                // 4、先判断当前要添加的值和数组中的元素相比是否重复
                // indexOf 查找我们的数组中是否包含某个元素,如果包含返回特定的索引,不包含返回-1;
                if (array.indexOf(number) != -1) {
                    alert("重复了!");
                    return;
                }
                // 7、添加后清空rusult页面的值;
                document.getElementById("result").innerHTML = " ";
                // 5、如果不重复将text中的值添加到数组
                array.push(number);
                // 6、将数组元素遍历并显示在<div id="result">中
                array.forEach(function(item) {
                    console.log(item);
                    document.getElementById("result").innerHTML += item + "<br />"
                })
            }

            function removeElement(pos) {
                if (array.length > 0) {
                    if (pos == "first") {
                        let f = array.shift();
                        console.log("f" + f);
                    } else if (pos == "last") {
                        let p = array.pop();
                        console.log("p" + p);
                    }
                    console.log(array);
                    document.getElementById("result").innerHTML = " ";

                    // 将数组元素遍历并显示在div中
                    array.forEach(function(item) {
                        console.log(item);
                        document.getElementById("result").innerHTML += item + "<br />"
                    })
                } else {
                    alert("数组中无元素!");
                }
            }
        </script>
    </body>
</html>

2. 找出某个元素在数组中的索引

fruits.push('Mango');
// ["Strawberry", "Banana", "Mango"]
var pos = fruits.indexOf('Banana');
// 1
<script type="text/javascript">
            // 1、定义一个数组
            let array = [];
            // 2、自定义函数addMumber()
            function addMumber() {
                // 3、获取用户text中输入的数值并字符强转
                let number = parseInt(document.getElementById("number").value);
                // 4、先判断当前要添加的值和数组中的元素相比是否重复
                // indexOf 查找我们的数组中是否包含某个元素,如果包含返回特定的索引,不包含返回-1;
                if (array.indexOf(number) != -1) {
                    alert("重复了!");
                    return;
                }
                // 7、添加后清空rusult页面的值;
                document.getElementById("result").innerHTML = " ";
                // 5、如果不重复将text中的值添加到数组
                array.push(number);
                // 6、将数组元素遍历并显示在<div id="result">中
                array.forEach(function(item) {
                    console.log(item);
                    document.getElementById("result").innerHTML += item + "<br />"
                })
            }
        </script>

3. 找出数组中最大元素和最小元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <form action="" method="post">
            <input type="text" id="number" placeholder="请输入一个数字" />
            <input type="button" value="添加" onclick="addMumber()" />
            <input type="button" value="删除数组第一个元素" onclick="removeElement('first')" />
            <input type="button" value="删除数组最后一个元素" onclick="removeElement('last')" />
            <input type="button" value="最大值" onclick="showMax()" />
            <input type="button" value="最小值" onclick="showMin()" />
            <div id="result"></div>
        </form>
        <script type="text/javascript">
            // 1、定义一个数组
            let array = [];
            // 2、自定义函数addMumber()
            function addMumber() {
                // 3、获取用户text中输入的数值并字符强转
                let number = parseInt(document.getElementById("number").value);
                // 4、先判断当前要添加的值和数组中的元素相比是否重复
                // indexOf 查找我们的数组中是否包含某个元素,如果包含返回特定的索引,不包含返回-1;
                if (array.indexOf(number) != -1) {
                    alert("重复了!");
                    return;
                }
                // 7、添加后清空rusult页面的值;
                document.getElementById("result").innerHTML = " ";
                // 5、如果不重复将text中的值添加到数组
                array.push(number);
                // 6、将数组元素遍历并显示在<div id="result">中
                array.forEach(function(item) {
                    console.log(item);
                    document.getElementById("result").innerHTML += item + "<br />"
                })
            }

            function removeElement(pos) {
                if (array.length > 0) {
                    if (pos == "first") {
                        let f = array.shift();
                        console.log("f" + f);
                    } else if (pos == "last") {
                        let p = array.pop();
                        console.log("p" + p);
                    }
                    console.log(array);
                    document.getElementById("result").innerHTML = " ";

                    // 将数组元素遍历并显示在div中
                    array.forEach(function(item) {
                        console.log(item);
                        document.getElementById("result").innerHTML += item + "<br />"
                    })
                } else {
                    alert("数组中无元素!");
                }
            }

            function showMax() {
                // 获取array中的最大值
                // 假设数组中第一个为最大值,将最大值存入自定义max中
                let max = array[0];
                // 遍历比较后面所有数组元素;
                // 如果max < array [i] ,将array [i] == max;
                for (let i = 1; i < array.length; i++) {
                    if (max < array[i]) {
                        max = array[i];
                    }
                    document.getElementById("result").innerHTML = ("数组中最大值为:" + max);
                }
            }

            function showMin() {
                // 获取array中的最大值
                // 假设数组中第一个为最大值,将最大值存入自定义max中
                let min = array[0];
                // 遍历比较后面所有数组元素;
                // 如果min > array [i] ,将array [i] = min;
                for (let i = 1; i < array.length; i++) {
                    if (min > array[i]) {
                        min = array[i];
                    }
                    document.getElementById("result").innerHTML = ("数组中最小值为:" + min);
                }
            }
        </script>
    </body>
</html>

4. 将数字插入数组中且不能有重复数字

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <form action="" method="post">
            <input type="text" id="number" placeholder="请输入一个数字" />
            <input type="button" value="添加" onclick="addMumber()" />
            <div id="result"></div>
        </form>
    </body>

    <script type="text/javascript">
        // 1、定义一个数组
        let array = [];
        // 2、自定义函数addMumber()
        function addMumber() {
            // 3、获取用户text中输入的数值并字符强转
            let number = parseInt(document.getElementById("number").value);
            // 4、先判断当前要添加的值和数组中的元素相比是否重复
            for (let i = 0; i < array.length; i++) {
                if (array[i] == number) {
                    alert("重复了!");
                    return;
                }
            }
            // 7、添加后清空rusult页面的值;
            document.getElementById("result").innerHTML = " ";
            // 5、如果不重复将text中的值添加到数组
            array.push(number);
            // 6、将数组元素遍历并显示在<div id="result">中
            array.forEach(function(item,index) {
                console.log(item,index);
                document.getElementById("result").innerHTML += item+index + "<br/>";
            })
        }
    </script>

</html>

五、JavaScript 对象

5.1 Date

创建一个 JavaScript Date 实例,该实例呈现时间中的某个时刻。Date 对象则基于 Unix Time Stamp

即自1970年1月1日(UTC)起经过的毫秒数。

1. 常见对象

const date1 = new Date('December 17, 1995 03:24:00');
// Sun Dec 17 1995 03:24:00 GMT...

const date2 = new Date('1995-12-17T03:24:00');
// Sun Dec 17 1995 03:24:00 GMT...

console.log(date1 === date2);
// expected output: false;

console.log(date1 - date2);
// expected output: 0

2. 定时器

setInterval(function() {
                // 设置img的src是数组中的某个元素
                document.getElementById("pic").src = arraypic[index];
                
                //如果已经是最后一张了,index变成0; 
                if (index == 3) {
                    index = 0;
                } else {
                    index++;
                }
            }, 2000); //每隔2秒执行一次函数

3. 轮播图小练习

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
        </style>

    </head>
    <body>
        <div id="mog">
            <!-- 默认图片 -->
            <img src="img/01.jpg" id="pic">
        </div>


        <script type="text/javascript">
            // 数组定义,存储图片路径
            let arraypic = ['img/01.jpg', 'img/02.jpg', 'img/03.jpg', 'img/04.jpg'];

            // 定义索引,从1开始
            let index = 1;
            setInterval(function() {
                // 设置img的src是数组中的某个元素
                document.getElementById("pic").src = arraypic[index];

                //如果已经是最后一张了,index变成0; 
                if (index == 3) {
                    index = 0;
                } else {
                    index++;
                }
            }, 2000); //每隔2秒执行一次函数
        </script>
    </body>
</html>

注、其他知识点汇总

  1. inputnameid的区别:ID就像是一个人的身份证号码,而Name就像是他的名字,ID显然是唯一的,而Name是可以重复的。
  • id:作为标签的唯一标识。一般用于css和js中引用,
  • name:用于表单提交,只有加了name属性的标签元素才会提交到服务器
  1. document.getElementById("demo") 是使用 id 属性来查找 HTML 元素的 JavaScript 代码 。使用 document.write() 方法将内容写到 HTML 文档中。
  2. eval(num1+op+num2) 计算函数
  3. placeholder:框内提示语
  4. function calc(){ } :自定义函数声明
  5. onclick = "calc()" 事件驱动—单击事件
  6. onchange = "showFPA()" 事件驱动—选择事件
  7. let var 定义变量
  8. promot 弹窗输入,是用于显示提示对话框
  9. console.log(); 控制台输出
  10. a = parseFloat(a) 强转为数值类型
  11. alert("请输入0-100范围内的分数!") 浏览器弹窗提示框
  12. if...else if 多条件判断,某一个区间范围的值
  13. swich-case 多重条件,某个值是否相等
  14. 循环结构体三要素:循环变量;循环条件;变量要变化
  15. sum = sum+i; sum+ = i;
  16. 循环次数固定用for循环,循环次数不固定用while循环;
  17. let c 只能在局部变量内使用
  18. var c 可在外部使用
  19. 循环嵌套时,循环次数多的放在内循环,循环次数少的放在外循环。
  20. a = a+1 => a += 1
  21. str += j + "x" + i + "=" + (i * j) + "&nbsp;&nbsp;&nbsp";

JavaScript 思维导图

最后修改:2021 年 07 月 28 日 04 : 05 PM
如果觉得我的文章对你有用,请随意赞赏