程序员最近都爱上了这个网站  程序员们快来瞅瞅吧!  it98k网:it98k.com

本站消息

站长简介/公众号

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

前端学习笔记之——初探JavaScript

发布于2021-05-30 07:29     阅读(772)     评论(0)     点赞(11)     收藏(4)


初探 JavaScript

问题解决方法
定义文档内嵌脚本程序使用 script 元素
立即执行一条程序语句将语句直接放在 script 元素内
定义 JavaScript 函数使用 function 关键字
定义基本类型的变量使用 var 关键字,并以字面量表示其值
创建对象使用 new Object() 或对象字面值语法
给对象添加方法新建一个属性,然后将一个函数赋给它
获取或设置对象的属性值使用圆点或数组索引符号表示法
枚举对象中的属性使用 for…in 语句
给对象添加属性或方法将一个值赋给所需属性名
删除对象的一个属性使用 delete 关键字
判断对象是否具有某个属性使用 in 表达式
判断两个对象的值是否相等(不考虑类别差异)使用相等运算符 ==
判断两个对象是否类型和值都相等使用等同运算符 ===
显示类型转换使用 Number 或 String 函数
创建数组使用 new Array() 或数组字面值
读写数组内容使用索引符号表示法获取数组中指定位置元素的值或将新值赋给它
枚举数组内容使用 for 循环
处理错误使用 try… catch 语句
比较 null 和 underfined 值将值转换为 boolean 类型,或在需要同等对待 null 和 underfined 时使用相等运算符 ==,在要区别对待它们时使用恒等运算符 ===

1、准备使用 JavaScript

在 HTML 中定义脚本有几种方法可供选择。既可以定义内嵌脚本(脚本是 HTML 文档的一部分),也可以定义外部脚本(脚本包含在另一个文件中,通过一个 URL 引用)。这两种方法都要用到 script 元素。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
    </head>
    <body>
        <script type="text/javascript">
            document.writeln("Hello");
        </script>
    </body>
</html>

这段小脚本的作用是在文档中加入单词 Hello。script 元素位于文档中其他内容之后,这样一来在脚本执行之前浏览器就已经对其他元素进行了解析。


2、使用语句

JavaScript 的基本元素是语句。一条语句代表者一条命令,通常以分号(;)结尾。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
    </head>
    <body>
        <script type="text/javascript">
            document.writeln("This is a statement");
            document.writeln("This is also a statement");
        </script>
    </body>
</html>

浏览器依次执行每条语句。本例做的只是输出两条信息。结果如下:

This is a statement
This is also a statement

3、定义和使用函数

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
    </head>
    <body>
        <script type="text/javascript">

            function myFunc() {
                document.writeln("This is a statement");            
            };

            myFunc();
        </script>
    </body>
</html>

函数所含语句被包含在一对大括号({ 和 })之间,称为代码块。JavaScript 是区分大小写的,因此 function 这个关键字必须小写。

3.1、定义带参数的函数

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
    </head>
    <body>
        <script type="text/javascript">

            function myFunc(name, weather) {
                document.writeln("Hello " + name + ".");
                document.writeln("It is " + weather + " today");            
            };

            myFunc("Adam", "sunny");
        </script>
    </body>
</html>

定义函数的时候不必声明参数的数据类型。

如果提供的参数值更少,那么所有未提供值的参数的值均为 undefined。如果提供的参数值更多,那么多出的值会被忽略。其结果是,要想定义两个同名但参数数目不同的函数,然后让 JavaScript 根据调用函数时提供的参数值数目确定所调用的函数是不可能的。要是定义了两个同名函数,那么第二个定义将取代第一个。

3.2、定义会返回结果的函数

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
    </head>
    <body>
        <script type="text/javascript">

            function myFunc(name) {
                return ("Hello " + name + ".");
            };

            document.writeln(myFunc("Adam"));
        </script>
    </body>
</html>

定义这个函数时不用声明它的返回结果,也不用声明结果的数据类型。


4、使用变量和类型

定义变量要使用 var 关键字,在定义的同时还可以像在一条单独的语句中那样为其赋值。定义在函数中的变量称为局部变量只能在该函数范围内使用。直接在 script 元素中定义的变量称为全局变量可以在任何地方使用——包括在其他脚本中

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
    </head>
    <body>
        <script type="text/javascript">
            var myGlobalVar = "apples";

            function myFunc(name) {
                var myLocalVar = "sunny";
                return ("Hello " + name + ". Today is " + myLocalVar + ".");
            };
            document.writeln(myFunc("Adam"));
        </script>
        <script type="text/javascript">
            document.writeln("I like " + myGlobalVar);
        </script>
    </body>
</html>

输出如下:

Hello Adam. Today is sunny. I like apples

4.1、使用基本类型

JavaScript 定义了一小批基本类型,它们包括字符串类型数值类型布尔类型

4.1.1、字符串类型

String 类型的值可以用夹在一对双引号或单引号之间的一串字符表示,如下:

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
    </head>
    <body>
        <script type="text/javascript">        
            var firstString = "This is a string";
            var secondString = 'And so is this';
        </script>        
    </body>
</html>

4.1.2、布尔类型

boolean 类型有两个值:true 和 false。如下:

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
    </head>
    <body>
        <script type="text/javascript">        
            var firstBool = true;
            var secondBool = false;
        </script>        
    </body>
</html>

4.1.3、数值类型

整数和浮点数(也称为实数)都用 number 类型表示,如下:

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
    </head>
    <body>
        <script type="text/javascript">        
            var daysInWeek = 7;
            var pi = 3.14;
            var hexValue = 0xFFFF;
        </script>        
    </body>
</html>

定义 number 类型变量时不必言明所用的是哪种数值。

4.2、创建对象

JavaScript 支持对象的概念。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
    </head>
    <body>
        <script type="text/javascript">        
            var myData = new Object();
            myData.name = "Adam";
            myData.weather = "sunny";
            
            document.writeln("Hello " + myData.name + ". ");
            document.writeln("Today is " + myData.weather + ".");
        </script>        
    </body>
</html>

此例通过调用 new Object() 的方式创建了一个对象,然后将其赋给一个名为 myData 的变量。在此之后,即可像这样通过赋值的方式定义其属性:

myData.name = "Adam"

4.2.1、使用对象字面量

用对象字面量的方式可以一口气定义一个对象及其属性,如下:

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
    </head>
    <body>
        <script type="text/javascript">        
            var myData = {
                name: "Adam",
                weather: "sunny"
            };
            
            document.writeln("Hello " + myData.name + ". ");
            document.writeln("Today is " + myData.weather + ".");
        </script>        
    </body>
</html>

属性的名称和值之间用冒号(:)分隔而各个属性之间又以逗号(,)分隔

4.2.2、将函数用做方法

对象可以添加属性,也能添加函数。属于一个对象的函数称为其方法。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
    </head>
    <body>
        <script type="text/javascript">        
            var myData = {
                name: "Adam",
                weather: "sunny",
                printMessages: function() {
                    document.writeln("Hello " + this.name + ". ");
                    document.writeln("Today is " + this.weather + ".");        
                }
            };
            
            myData.printMessages();            
            
        </script>        
    </body>
</html>

注意,在方法内部使用对象属性时要用到 this 关键字。函数作为方法使用时,其所属对象会以关键字 this 的形式作为一个参数被传给它。

4.3、使用对象

4.3.1、读取和修改属性值

对象最显而易见的操作是读取或修改属性值。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
    </head>
    <body>
        <script type="text/javascript">        
            var myData = {
                name: "Adam",
                weather: "sunny",
            };
            
            myData.name = "Joe";
            myData["weather"] = "raining";
            
            document.writeln("Hello " + myData.name + ".");
            document.writeln("It is " + myData["weather"]);
            
        </script>        
    </body>
</html>

如上,两种方式修改属性值。因此可以如下的方式修改:

var myData = {
	name:"Adam",
	weather:"sunny",
};

var propName = "weather";
myData[propName] = "ranning";

在此基础上才能枚举对象属性。

4.3.2、枚举对象属性

要枚举对象属性可以使用 for…in 语句

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
    </head>
    <body>
        <script type="text/javascript">        
            var myData = {
                name: "Adam",
                weather: "sunny",
                printMessages: function() {
                    document.writeln("Hello " + this.name + ". ");
                    document.writeln("Today is " + this.weather + ".");        
                }
            };
            
            for (var prop in myData) {
                document.writeln("Name: " + prop + " Value: " + myData[prop]);
            }
                        
        </script>        
    </body>
</html>

4.3.3、增删属性和方法

就算是用对象字面值生成的对象,也可以为其定义新属性。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
    </head>
    <body>
        <script type="text/javascript">        
            var myData = {
                name: "Adam",
                weather: "sunny",
            };
            
            myData.dayOfWeek = "Monday";
        </script>        
    </body>
</html>

添加了一个名为 dayOfWeek 的新属性。这里使用的是圆点表示法,不过用类数组索引表示法也不是不可以。

通过将属性值设置为一个函数也能为对象添加新方法。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
    </head>
    <body>
        <script type="text/javascript">        
            var myData = {
                name: "Adam",
                weather: "sunny",
            };
            
            myData.sayHello = function() {
              document.writeln("Hello");  
            };
                    
        </script>        
    </body>
</html>

对象的属性和方法也可以用 delete 关键字删除。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
    </head>
    <body>
        <script type="text/javascript">        
            var myData = {
                name: "Adam",
                weather: "sunny",
            };
            
            myData.sayHello = function() {
              document.writeln("Hello");  
            };


            delete myData.name;
            delete myData["weather"];
            delete myData.sayHello;  
        </script>        
    </body>
</html>

4.3.4、判断对象是否具有某个属性

可以用 in 表达式判断对象是否具有某个属性

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
    </head>
    <body>
        <script type="text/javascript">        
            var myData = {
                name: "Adam",
                weather: "sunny",
            };

            var hasName = "name" in myData;
            var hasDate = "date" in myData;
            
            document.writeln("HasName: " + hasName);
            document.writeln("HasDate: " + hasDate);
                    
        </script>        
    </body>
</html>

5、使用 JavaScript 运算符

在这里插入图片描述

5.1、相等和等同运算符

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
    </head>
    <body>
        <script type="text/javascript">
        
           var firstVal = 5;
           var secondVal = "5";
        
            if (firstVal == secondVal) {
                document.writeln("They are the same");		/*输出这个*/
            } else {
                document.writeln("They are NOT the same");
            }
        </script>        
    </body>
</html>

此例中先将两个操作数转换为同一类型再对其进行比较——从本质上讲,相等运算符测试两个值是否相等,不管其类型。如果想判断值和类型是否都相等,那么应该使用等同运算符(===)。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
    </head>
    <body>
        <script type="text/javascript">
        
           var firstVal = 5;
           var secondVal = "5";
        
            if (firstVal === secondVal) {
                document.writeln("They are the same");
            } else {
                document.writeln("They are NOT the same");	/*输出这个*/
            }
        </script>        
    </body>
</html>

Js 基本类型的比较是指的比较,而 Js 对象的比较则是引用的比较。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
    </head>
    <body>
        <script type="text/javascript">
        
            var myData1 = {
                name: "Adam",
                weather: "sunny",
            };

            var myData2 = {
                name: "Adam",
                weather: "sunny",
            };
        
            var myData3 = myData2;
        
            var test1 = myData1 == myData2;
            var test2 = myData2 == myData3;
            var test3 = myData1 === myData2;
            var test4 = myData2 === myData3;
            
            document.writeln("Test 1: " + test1 + " Test 2: " + test2);
            document.writeln("Test 3: " + test3 + " Test 4: " + test4);
        </script>        
    </body>
</html>

结果如下:

Test 1: false Test 2: true 
Test 3: false Test 4: true
<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
    </head>
    <body>
        <script type="text/javascript">
        
            var myData1 = 5;
            var myData2 = "5";
            var myData3 = myData2;
        
            var test1 = myData1 == myData2;
            var test2 = myData2 == myData3;
            var test3 = myData1 === myData2;
            var test4 = myData2 === myData3;
            
            document.writeln("Test 1: " + test1 + " Test 2: " + test2);
            document.writeln("Test 3: " + test3 + " Test 4: " + test4);
        </script>        
    </body>
</html>

结果如下:

Test 1: true Test 2: true 
Test 3: false Test 4: true

5.2、显式类型转换

字符串连接运算符(+)比加法运算符(+)优先级更高。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
    </head>
    <body>
        <script type="text/javascript">
        
            var myData1 = 5 + 5;
            var myData2 = 5 + "5";
            
            document.writeln("Result 1: " + myData1);
            document.writeln("Result 2: " + myData2);
            
        </script>        
    </body>
</html>

结果如下:

Result 1: 10 
Result 2: 55

5.2.1、将数值转换为字符串

如果想把多个数值类型变量作为字符串连接起来,可以用 toString 方法将数值转换为字符串。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
    </head>
    <body>
        <script type="text/javascript">
            var myData1 = (5).toString() + String(5);
            document.writeln("Result: " + myData1);
        </script>        
    </body>
</html>

结果如下:

55

将数值转换为字符串还有一些别的方法:

方法说明返回
toString()以十进制形式表示数值字符串
toString(2)以二进制形式表示数值字符串
toString(8)以八进制形式表示数值字符串
toString(16)以十六进制形式表示数值字符串
toFixed(n)以小数点后有 n 位数字的形式表示数值字符串
toExponential(n)以指数表示法表示数值。尾数的小数点前后分别有 1 位数字和 n 位数字字符串
toPrecision(n)用 n 位有效数字表示数值,在必要的情况下使用指数表示法字符串

5.2.2、将字符串转换为数值

使用 Number 函数。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
    </head>
    <body>
        <script type="text/javascript">
        
            var firstVal = "5";
            var secondVal = "5";
            
            var result = Number(firstVal) + Number(secondVal);
    
            document.writeln("Result: " + result);
        </script>        
    </body>
</html>

结果如下:

10

字符串到数值函数的转换函数:

函数说明
Number(<str>)通过分析指定字符串,生成一个整数或实数值
parseInt(<str>)通过分析指定字符串,生成一个整数值
parseFloat(<str>)通过分析指定字符串,生成一个整数或实数值

6、使用数组

创建和填充数组:

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
    </head>
    <body>
        <script type="text/javascript">        
     
            var myArray = new Array();
            myArray[0] = 100;
            myArray[1] = "Adam";
            myArray[2] = true;
    
        </script>        
    </body>
</html>

首先,创建数组的时候不需要声明数组中元素的个数。Js 数组会自动调整大小以便容纳所有元素。第二,不必声明数组所包含的数据类型,Js 数组可以混合包含各种类型的元素

6.1、使用数组字面量

使用数组字面量,可以在一条语句中创建和填充数组:

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
    </head>
    <body>
        <script type="text/javascript">
        
          var myArray = [100, "Adam", true];
    
        </script>        
    </body>
</html>

6.2、读取和修改数组内容

/*读取数组内容*/
<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
    </head>
    <body>
        <script type="text/javascript">
            var myArray = [100, "Adam", true];
            document.writeln("Index 0: " + myArray[0]);            
        </script>        
    </body>
</html>
/*修改数组内容*/
<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
    </head>
    <body>
        <script type="text/javascript">
            var myArray = [100, "Adam", true];
            myArray[0] = "Tuesday";
            document.writeln("Index 0: " + myArray[0]);            
        </script>        
    </body>
</html>

6.3、枚举数据内容

可以用 for 循环枚举数组内容。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
    </head>
    <body>
        <script type="text/javascript">
            var myArray = [100, "Adam", true];
            for (var i = 0; i < myArray.length; i++) {
                document.writeln("Index " + i + ": " + myArray[i]);                
            }                        
        </script>        
    </body>
</html>

6.4、使用内置的数组方法

方法说明返回值
concat(<otherArray>)将数组和参数所指数组的内容合并为一个新数组。可指定多个数组数组
join(<separator>)将所有数组元素连接为一个字符串。各元素内容用参数指定的字符分隔字符串
pop()把数组当做一个栈使用,删除并返回数组的最后一个元素对象
push(<item>)把数组当做栈使用,将指定的数据添加到数组中void
reverse()就地反转数组元素的次序数组
shift()类似 pop,但操作的是数组的第一个元素对象
slice(<start>,<end>)返回一个子数组数组
sort()就地对数组元素排序数组
unshift(<item>)类似 push,但新元素被插到数组的开头位置void

7、数理错误

Js 用 try…catch 语句处理错误。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
    </head>
    <body>
        <script type="text/javascript">
            try {
                var myArray;
                for (var i = 0; i < myArray.length; i++) {
                    document.writeln("Index " + i + ": " + myArray[i]);                
                }
            } catch (e) {
                document.writeln("Error: " + e);
            } 
        </script>        
    </body>
</html>

可能会引发错误的代码被包装在 try 子句中。如果没有发生错误,那么这些语句会正常执行,catch 子句会被忽略。

但是如果发生了错误,那么 try 子句中语句的执行将立即停止,控制权转移到 catch 子句中。发生的错误由一个 Error 对象描述,它会被传递给 catch 子句。下表显示了 Error 对象定义的属性:

属性说明返回
message对错误条件的说明字符串
name错误的名称,默认为 Error字符串
number该错误的错误代码数值

finally 子句不论是否发生错误,都将执行:

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
    </head>
    <body>
        <script type="text/javascript">
            try {
                var myArray;
                for (var i = 0; i < myArray.length; i++) {
                    document.writeln("Index " + i + ": " + myArray[i]);                
                }
            } catch (e) {
                document.writeln("Error: " + e);
            } finally {
                document.writeln("Statements here are always executed");
            }
        </script>        
    </body>
</html>

8、比较 undefined 和 null 值

Js 中有两个比较特殊的值:undefined 和 null。在读取未赋值的变量或试图读取对象没有的属性时得到的就是 undefined 值

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
    </head>
    <body>
        <script type="text/javascript">
            var myData = {
                name: "Adam",
                weather: "sunny",
            };
            document.writeln("Prop: " + myData.doesntexist);
        </script>        
    </body>
</html>

结果如下:

Prop:undefined

null:表示已经赋予一个值但该值不是一个有效的 object、string、number 或 boolean 值(也就是说所定义的是一个无值(no value))

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
    </head>
    <body>
        <script type="text/javascript">
        
            var myData = {
                name: "Adam",
            };

            document.writeln("Var: " + myData.weather);
            document.writeln("Prop: " + ("weather" in myData));

            myData.weather = "sunny";
            document.writeln("Var: " + myData.weather);
            document.writeln("Prop: " + ("weather" in myData));
            
            myData.weather = null;
            document.writeln("Var: " + myData.weather);            
            document.writeln("Prop: " + ("weather" in myData));

        </script>        
    </body>
</html>

weather 属性在开头并没有给出,结果如下:

Var: undefined 
Prop: false

随后添加了 weather 属性:

Var: sunny 
Prop: true

接下来,把该属性的值设置为 null:

Var: null 
Prop: true

8.1、检查变量或属性是否为 undefined 或 null

使用 if 语句和逻辑非运算符(!)即可:

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
    </head>
    <body>
        <script type="text/javascript">
        
            var myData = {
                name: "Adam",
                city: null
            };

            if (!myData.name) {
                document.writeln("name IS null or undefined");
            } else {
                document.writeln("name is NOT null or undefined");
            }

            if (!myData.city) {
                document.writeln("city IS null or undefined");
            } else {
                document.writeln("city is NOT null or undefined");
            }

        </script>        
    </body>
</html>

8.2、区分 null 和 undefined

如果想等同对待 null 和 undefined,那么应该使用相等运算符(==),让 Js 进行类型转换。此时的 null 和 undefined 的变量会被认为相等。如果要区分对待 null 和 undefined 的值,则应该使用等同运算符(===)。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
    </head>
    <body>
        <script type="text/javascript">
        
            var firstVal = null;
            var secondVal;
            
            var equality = firstVal == secondVal;
            var identity = firstVal === secondVal;
    
            document.writeln("Equality: " + equality);
            document.writeln("Identity: " + identity);
            
        </script>        
    </body>
</html>

结果如下:

Equality: true 
Identity: false

9、常用的 JavaScript 工具

9.1、使用 JavaScript 库

jQuery

原文链接:https://blog.csdn.net/qq_36879493/article/details/117330757




所属网站分类: 技术文章 > 博客

作者:强哥你们辛苦了

链接:http://www.qianduanheidong.com/blog/article/115874/3e9e6a05c8501f9110a3/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

11 0
收藏该文
已收藏

评论内容:(最多支持255个字符)