【Web前端】10.0 JavaScript（一）——入门

作者: bobokaka | 来源:发表于2020-02-19 17:43 被阅读0次

1.0 假设已经学会了HTML和CSS

话说回来，HTML和CSS也太简单了吧。（手动狗头）

JavaScript由浏览器来解释执行。

HTML决定了页面的框架

CSS：用来美化页面

JavaScript：提供用户的交互

2.0 什么是JavaScript

JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。

一门客户端脚本语言

运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎

脚本语言：不需要编译，直接就可以被浏览器解析执行了

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

3.0 JavaScript发展史

    1. 1992年，Nombase公司，开发出第一门客户端脚本语言，专门用于表单的校验。命名为 ： C--    ，后来更名为：ScriptEase
    2. 1995年，Netscape(网景)公司，开发了一门客户端脚本语言：LiveScript。后来，请来SUN公司的专家，修改LiveScript，命名为JavaScript
    3. 1996年，微软抄袭JavaScript开发出JScript语言
    4. 1997年，ECMA(欧洲计算机制造商协会)，制定出客户端脚本语言的标准：ECMAScript，就是统一了所有客户端脚本语言的编码方式。

4.0 JavaScript组成

JavaScript = ECMAScript + JavaScript自己特有的东西(BOM+DOM)

JavaScript的核心是ECMAScript：描述了该语言的语法和基本对象。

DOM（文档对象模型）：描述了处理网页内容的方法和接口，也就是作用于管理页面。

BOM（浏览器对象模型）：描述了与浏览器进行交互的方法和接口，前进、后退、页面刷新、地址栏、历史记录、屏幕宽高等。

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

4.1 基本语法

            1. 与html结合方式
                1. 内部JS：
                    * 定义<script>，标签体内容就是js代码
                2. 外部JS：
                    * 定义<script>，通过src属性引入外部的js文件
    
                * 注意：
                    1. <script>可以定义在html页面的任何地方。但是定义的位置会影响执行顺序。
                    2. <script>可以定义多个。

            2. 注释
                1. 单行注释：//注释内容
                2. 多行注释：/*注释内容*/

            3. 数据类型
                1. 原始数据类型(基本数据类型)
                    1. number：数字。 整数/小数/NaN  (not a number 一个不是数字的数字类型)
                    2. string：字符串。 字符串  "abc" "a" 'abc'
                    3. boolean: true和false
                    4. null：一个对象为空的占位符
                    5. undefined：未定义。如果一个变量没有给初始化值，则会被默认赋值为undefined
                    
                2. 引用数据类型：对象

            4. 变量
                * 变量：一小块存储数据的内存空间
                * Java语言是强类型语言，而JavaScript是弱类型语言。
                    * 强类型：在开辟变量存储空间时，定义了空间将来存储的数据的数据类型。只能存储固定类型的数据
                    * 弱类型：在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放任意类型的数据。
                * 语法：
                    * var 变量名 = 初始化值;
                
                * typeof运算符：获取变量的类型。
                    * 注：null运算后得到的是object

            5. 运算符
                1. 一元运算符：只有一个运算数的运算符
                    ++，-- ， +(正号)  
                    * ++ --: 自增(自减)
                        * ++(--) 在前，先自增(自减)，再运算
                        * ++(--) 在后，先运算，再自增(自减)
                    * +(-)：正负号
                    * 注意：在JS中，如果运算数不是运算符所要求的类型，那么js引擎会自动的将运算数进行类型转换
                        * 其他类型转number：
                            * string转number：按照字面值转换。如果字面值不是数字，则转为NaN（不是数字的数字）
                            * boolean转number：true转为1，false转为0
                2. 算数运算符（和java一样）
                    + - * / % ...
    
                3. 赋值运算符（和java一样）
                    = += -+....
    
                4. 比较运算符
                    > < >= <= == ===(全等于)
                    * 比较方式
                      1. 类型相同：直接比较
                          * 字符串：按照字典顺序比较。按位逐一比较，直到得出大小为止。
                      2. 类型不同：先进行类型转换，再比较
                          * ===：全等于。在比较之前，先判断类型，如果类型不一样，则直接返回false

                5. 逻辑运算符
                    &&   ||    !
                    * 其他类型转boolean：
                       1. number：0或NaN为假，其他为真
                       2. string：除了空字符串("")，其他都是true
                       3. null&undefined:都是false
                       4. 对象：所有对象都为true
                
                6. 三元运算符
                    ? : 表达式
                    var a = 3;
                    var b = 4;
            
                    var c = a > b ? 1:0;
                    * 语法：
                        * 表达式? 值1:值2;
                        * 判断表达式的值，如果是true则取值1，如果是false则取值2；

            6. 流程控制语句（和Java一模一样）
                1. if...else...
                2. switch:
                    * 在java中，switch语句可以接受的数据类型： byte int shor char,枚举(1.5) ,String(1.7)
                        * switch(变量):
                            case 值:
                    * 在JS中,switch语句可以接受任意的原始数据类型
                3. while
                4. do...while
                5. for

            7. JS特殊语法：
                1. 语句以;结尾，如果一行只有一条语句则 ;可以省略 (不建议)
                2. 变量的定义使用var关键字，也可以不使用
                    * 用： 定义的变量是局部变量
                    * 不用：定义的变量是全局变量(不建议)

4.3 基本语法的代码演示

关于数据类型，这里用到一个类似于System.out.print();的JavaScript语句document.write( );

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
        // alert("hello world!")
        var num = 1;
        var num2 = 1.2;
        var num3 = NaN;

        document.write(num + "<br/>");
        document.write(num2 + "<br/>");
        document.write(num3 + "<br/>");

        var str = "abc";
        var str2 = 'edf';

        document.write(str + "<br/>");
        document.write(str2 + "<br/>");

        var flag = true;
        var obj = null;
        var obj2 = undefined;
        var obj3;
        document.write(flag + "<br/>");
        document.write(obj + "<br/>");
        document.write(obj2 + "<br/>");
        document.write(obj3 + "<br/>");
    </script>
</head>
<body>

</body>
</html>

输出：

image.png

学习一个新的运算法：typeo运算符
typeof 运算符：有一个参数，即要检查的变量或值。例如：

var sTemp = "test string";
alert (typeof sTemp);    //输出 "string"
alert (typeof 86);    //输出 "number"

对变量或值调用 typeof 运算符将返回下列值之一：

undefined - 如果变量是 Undefined 类型的
boolean - 如果变量是 Boolean 类型的
number - 如果变量是 Number 类型的
string - 如果变量是 String 类型的
object - 如果变量是一种引用类型或 Null 类型的

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            /*弱变量类型*/
            var i =1;
            var j = "zhangsan";
            document.write(j +"---"+typeof (j)+"<br/>");
            alert(typeof i);
            alert(typeof j);
        </script>
    </head>
    <body>
    </body>
</html>

关于流程控制语句，如下注释掉的代码都可以运行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>控制语句</title>
    <script>
        // var a = 1;
        // var a = true;
        // var a = null;
        // var a = undefined;
        // var a = 1;
        // var a = 1;
        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~100的和

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>控制语句</title>
    <script>
        var sum = 0;
        var num = 1;
        while (num <= 100) {
            sum += num;
            num++;
        }
        alert(sum);
    </script>
</head>
<body>

</body>
</html>

image.png

JavaScript的运算符和语句

和Java一样。
JavaScript有个特别的：
=== 全等号，类型和数值必须全部相等
null是Object类型，这是JavaScript的一个bug，但是一直没有修复。
字符串进行数字运算，字符串就会转成NaN，再进行运算；NaN进行运算，结果都是NaN，这是NaN存在的意义。

打印99乘法表

要求效果图如下：

image.png

开始编写：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>控制语句</title>
    <script>
        for (var i= 1 ;i<=9;i++) {
            for (var j= 1 ;j<=i;j++) {
                //输出到页面
                document.write(i+"*"+j+"="+(i*j)+"&nbsp;&nbsp;&nbsp;")
            }
            //输出换行
            document.write("<br/>");
        }
    </script>

</head>
<body>

</body>
</html>

执行：

image.png

但是做到这里，项目看上去非常简陋，而且还是没有达到我们想要的效果，继续编写：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>控制语句</title>

    <script>
        //border:边框 align:位置，设置居中
        document.write(("<table border='1' align='center'>"));

        for (var i= 1 ;i<=9;i++) {
            document.write(("<tr>"));
            for (var j= 1 ;j<=i;j++) {
                document.write(("<td>"));
                //输出到页面
                document.write(i+" * "+j+" = "+(i*j)+"&nbsp;&nbsp;&nbsp;")
                document.write(("</td>"));
            }
            // //输出换行
            // document.write("<br/>");
            document.write(("</tr>"));
        }
        //完成表格嵌套
        document.write(("</table>"));

    </script>

</head>
<body>

</body>
</html>

执行：

image.png

效果已经出来了，但是我们看到，最外层有一个边框，不是我们想要的，这时候光靠HTML不足以达到效果，需要配合CSS来完成界面美化：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>控制语句</title>
    <style>
        td{
            border: 1px solid;
        }
    </style>
    <script>
        //border:边框 align:位置，设置居中
        document.write(("<table align='center'>"));

        for (var i= 1 ;i<=9;i++) {
            document.write(("<tr>"));
            for (var j= 1 ;j<=i;j++) {
                document.write(("<td>"));
                //输出到页面
                document.write(i+" * "+j+" = "+(i*j)+"&nbsp;&nbsp;&nbsp;")
                document.write(("</td>"));
            }
            // //输出换行
            // document.write("<br/>");
            document.write(("</tr>"));
        }
        //完成表格嵌套
        document.write(("</table>"));

    </script>

</head>
<body>

</body>
</html>

执行：

image.png

5.0 基本对象

5.1 Function：函数(方法)对象

使用案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Function对象</title>
    <script>
        /**
         * Function:函数（方法）对象
         * 1.创建
         * *    1. var fun = new Function(形式参数列表,方法体)（别这么用）
         * *    2. function 方法名称(形式参数列表){
         * *            方法体
         * *    }
         * *    3. var 方法名 = function(形式参数列表){
         * *            方法体
         * *    }
         * 2.方法
         * 3.属性
         * *    length:属性，代表形参的个数
         * 4.特点
         * *    1.方法定义时，形参的类型不用写,返回值类型也不用写
         * *    2.方法是一个对象，如果定义名称相同的方法，会覆盖。
         * *    3.在JS中，方法的调用只与方法的名称有关，和参数列表无关
         * *    4.在方法生命中有一个隐藏的内置对象（数组），arguments,封装所有的实际参数。
         * 5.调用
         * *    方法名称(实际参数列表)
         *
         */
            //1.创建方式1(见一见就好，别用,逻辑上很难理解)
            // var fun1 = new Function("a","b","alert(a);");
            // //调用方法
            // fun1(3,4);

            //2.创建方式2
            //方法定义时，形参的类型不用写
            // function  fun2(a,b) {
            //     alert(a+b);
            // }
            //
            // fun2(a,b);

        var fun3 = function (a, b) {
                alert(a + b);
            }
            fun3(3,4);


    </script>
</head>
<body>

</body>
</html>

我们主要用方法中后两种（第2种和第3种创建方式）。

第1种是对象，为什么后两种明明是函数的模板，怎么会是对象呢？

对象都有属性，这里介绍一种Function的属性：

 length:属性，代表形参的个数

可以测试知道，fun1 fun2 fun3都有length属性。甚至你还可以这样：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Function对象</title>
    <script>
        var fun3 = function (a, b) {
                alert(a + b);
            }

        fun3 = function (a, b) {
            alert(a - b);
        }
        fun3(3,4);

    </script>
</head>
<body>

</body>
</html>

执行不仅不会报错，而且结果是-1，后面的会把前面的方法覆盖掉。

一种重要的特性

 function fun2(a, b) {
            alert(a + b);
        }

        // fun2(a,b);
        //方法的调用
        fun2(1);

执行：

image.png

不报错，因为b是undefined。也可以传3个参数，但是第三个无效。

arguments：一种重要的特点，隐藏的内置对象（数组），封装所有的实际参数。

比如，求2个数的和。

 //求两个数的和
        function add(a, b) {
            return a + b;
        }
 var sum = add(1, 2);
        alert(sum);

如果实现任何两个数的和，java中想到传一个数组，同样JavaScript也有arguments：
先测试一下这个对象。

  //求任意个数的和
        function add() {
            alert(arguments[0]);
            alert(arguments[1]);
        }

        var sum = add(1, 2);
        alert(sum);

用arguments计算任意个数之和：

        function add() {
            var sum = 0;
            for (var i = 0; i < arguments.length; i++) {
                sum += arguments[i];
            }
            return sum;
        }

        var sum = add(1, 2, 3, 4);
        alert(sum);

总结Function有四个特性：

Function:函数（方法）对象

特点

1.方法定义时，形参的类型不用写,返回值类型也不用写

2.方法是一个对象，如果定义名称相同的方法，会覆盖。

3.在JS中，方法的调用只与方法的名称有关，和参数列表无关

4.在方法生命中有一个隐藏的内置对象（数组），arguments,封装所有的实际参数。

5.2 Array对象

    2. Array:数组对象
            1. 创建：
                1. var arr = new Array(元素列表);
                2. var arr = new Array(默认长度);
                3. var arr = [元素列表];
            2. 方法
                join(参数):将数组中的元素按照指定的分隔符拼接为字符串
                push()  向数组的末尾添加一个或更多元素，并返回新的长度。
            3. 属性
                length:数组的长度
            4. 特点：
                1. JS中，数组元素的类型可变的。
                2. JS中，数组长度可变的。

创建

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Array对象</title>

    <script>
        //1.创建方式1
        var arr1 = new Array(1, 2, 3);
        var arr2 = new Array(5);
        var arr3 = [1, 2, 3, 4];

        var arr4 = new Array();

        document.write(arr1 + "<br>");
        document.write(arr2 + "<br>");
        document.write(arr3 + "<br>");
        document.write(arr4 + "<br>");
    </script>
</head>
<body>

</body>
</html>

运行：

image.png

元素的类型可变

   var arr = [1,"abc",true];
   document.write(arr +"<br>");

6.0 JavaScript的输出

总共4种：

alert() 直接弹框

document.write() 向页面输出

console.log() 向控制台输出

innerHTML: 向页面输出

6.0 JavaScript常见声明

JS声明变量:

    var 变量的名称 = 变量的值

JS声明函数:

    var 函数的名称 = function(){ 

    }

    function 函数的名称(){

    }

7.0 JavaScript的开发步骤

确定事件

通常事件都会出发一个函数

函数里面通常都会去操作页面元素,做一些交互

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        
        <script>
            function dianji(){
                alert("打不开，是病毒。");
            }
        </script>
    </head>
    <body>
        <input type="button" value="坦克世界"  onclick="dianji()"/>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>

        <script>
            function dianji(){
                var div1 = document.getElementById("div1");
                var div2 = document.getElementById("div2");
                div1.innerHTML = "<font color='red'>就是打不开坦克世界</font>";
                div2.innerText = "<font color='red'>就是打不开坦克世界</font>";
            }
        </script>
    </head>
    <body>
        <input type="button" value="坦克世界" onclick="dianji()" />
        <div id="div1">这里的内容一会要被替换掉。</div>
        <div id="div2">这里的内容一会要被替换掉。</div>
    </body>
</html>

特殊事件：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>

        <script>
            function checkForm(){
                
                return false;
            }
        </script>
    </head>
    <body>
        <form action="../index.html" onsubmit="return tcheckForm()">
            用户名：<input type="text" /><br />
            <input type="submit" value="提交" />
        </form>
    </body>
</html>

语法中的特例：这里的表单中的提交方法，必须有个return。
完整版本。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>来个标题</title>

    <script>
        function checkForm() {
            //获取用户输入的内容
            var input1 = document.getElementById("username");
            // alert(input1.value);
            var uvalue = input1.value;
            if (uvalue.length <= 6) {
                return true;
            } else {
                alert("对不起，用户名太短啦！");
            }
            return false;
        }
    </script>

</head>

<body>
    <form action="JS入门案例.html" onsubmit="return checkForm()">
        用户名：<input type="text" id="username" /><br />
        <input type="submit" value="提交" />
    </form>
</body>

</html>

8.0 邮箱验证

使用一个test方法，用于验证匹配正则表达式是否符合。

if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/.test(uEmail)){
                    alert("对不起,邮箱不合法");
                    return false;
                }

END

【Web前端】10.0 JavaScript（一）——入门

1.0 假设已经学会了HTML和CSS

2.0 什么是JavaScript

3.0 JavaScript发展史

4.0 JavaScript组成

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

4.1 基本语法

4.3 基本语法的代码演示

计算1~100的和

JavaScript的运算符和语句

打印99乘法表

5.0 基本对象

5.1 Function：函数(方法)对象

第1种是对象，为什么后两种明明是函数的模板，怎么会是对象呢？

arguments：一种重要的特点，隐藏的内置对象（数组），封装所有的实际参数。

5.2 Array对象

创建

元素的类型可变

6.0 JavaScript的输出

6.0 JavaScript常见声明

7.0 JavaScript的开发步骤

8.0 邮箱验证

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读