本站消息

站长简介/公众号

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

强哥你们辛苦了

1012

文章

657820

访问

+关注

分类

暂无分类

日期归档

2024-11(11)

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

发布于2021-05-30 07:29 阅读(964) 评论(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>

结果如下：

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

方法	说明	返回
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>

结果如下：

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

函数	说明
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个字符)

---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力

程序员的那些事(new)

window属性：controllers

2022年最受欢迎的8大编程语言

为什么都说程序员找不到女朋友，但是身边程序猿的却没一个单身的

程序员被开除，老板：“有你参与的项目全黄了！”

笑话：一个测试工程师走进一家酒吧

趣图：程序员头疼的4种原因

笑话：面试官：请拿出一段体现你水平的代码。我： sudo rm -rf /*面试官：这体现了你哪方面能力？

前端精选：在 WPF 中实现融合效果

程序人生：程序员如何实现财富自由？

找工作千万不要找外包？BAT互联网大厂外包亲身经历

电子书(new)

CSS3学习必备书籍（CSS3 实战）.pdf

CSS网站布局实录（第二版）.pdf

CSS禅意花园.pdf

HTML5权威指南.pdf

HTML5移动Web开发指南.pdf

零基础学HTML+CSS [第三版].pdf 下载

数据结构与算法 JavaScript 描述.pdf

客户端存储技术.pdf 下载

前端100本高清pdf电子书打包下载

深入理解HTML5：语义、标准与样式 PDF 下载

脚本(new)

压扁小鸟小游戏

.美女拼图游戏源码

JavaScript按键控制坦克移动

JavaScript打地鼠游戏

HTML5实现抓怪物小游戏

网页版-别踩白块游戏

网页版扫雷

HTML5实现拼图游戏

网页版2048

HTML5箭头射击游戏代码

博客(new)

全网最详细的nodejs卸载和安装教程

web期末大作业--网页设计 HTML+CSS+JS（附源码）

2024·2025年前端开发的就业现状及前景

基于天地图使用Leaflet.js进行WebGIS开发实战

记录｜C#主界面设计【Web风格】

Roundcube Webmail安装与配置完全指南

Spring Boot Web 应用请求响应太慢故障排查

Markdown 语法大全详解

uniapp前端实现微信支付（小程序、公众号H5、app）

pc端web网站使用第三方微信登录流程（web、js）

视频教程(new)

带你快速入坑ES6

0到1快速构建自己的后台管理系统

基于Element-UI二次封装业务组件-前端视频教程

基于WebAR实现3D任务书桌上跳舞

Tensorflow.js 实现垃圾分类

全方位入门git

六个案例学会响应式布局

Ajax实战案例之列表渲染

Phaser从0到1实战微信2D小游戏【钢琴方块】

元旦贺卡-前端视频教程

项目实战(new)

NodeJS+Express+MongoDB实战项目

打造仿小米电商网站

2020版uni-app项目实战

2020前端React项目实战

小程序全栈开发之喵喵交友

Vue实战项目之喵喵电影

实战项目之网易云

实战项目之头条

前端实战项目之幸福西饼

实战项目之拉勾网

问答(new)

HTML 上的 Javascript 输入和输出[关闭]

将 JSON 数据打印到 innerHTML 中，获取未定义 - [object]

localStorage onload 显示我选择的 div 吗？

为什么方法 history.pushState() 在我的本地 HTML 中不起作用？

Vue2：如何实现流畅的鼠标移动？

按钮展开显示在页面上，尽管在单击按钮本身之前应该将其隐藏

PHP 无法传递干净 URL 上的问号

触发按钮周围的按钮无法正常工作

Javascript 警告框未显示且错误：您请求的文件不存在

使用 JS 按钮取消设置嵌入在 html 网站中的 php 数组中的单个项目

游戏(new)

jQuery坦克大战网页小游戏

JS俄罗斯方块游戏代码

Vue.js注意力大考验小游戏代码

HTML欢乐打地鼠小游戏

HTML5糖果消消乐闯关小游戏

扑克牌翻牌记忆小游戏

HTML翻牌小游戏代码

HTML5拉杆子过关小游戏代码

HTML5倾斜迷宫小游戏

HTML5五子棋小游戏

其他资源(new)

jQuery益智拼图游戏

HTML5制作的2048游戏

.小球撞击游戏源码

驴子跳跳网页游戏源码

.jQuery五子棋游戏

HTML5街头霸王游戏源码

.网页版台球小游戏

地图拼图游戏

HTML5中国象棋游戏

Maven+JSP+SSM+Mysql实现的音乐网站

分类

标签

日期归档

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

初探 JavaScript

1、准备使用 JavaScript

2、使用语句

3、定义和使用函数

3.1、定义带参数的函数

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

4、使用变量和类型

4.1、使用基本类型

4.1.1、字符串类型

4.1.2、布尔类型

4.1.3、数值类型

4.2、创建对象

4.2.1、使用对象字面量

4.2.2、将函数用做方法

4.3、使用对象

4.3.1、读取和修改属性值

4.3.2、枚举对象属性

4.3.3、增删属性和方法

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

5、使用 JavaScript 运算符

5.1、相等和等同运算符

5.2、显式类型转换

5.2.1、将数值转换为字符串

5.2.2、将字符串转换为数值

6、使用数组

6.1、使用数组字面量

6.2、读取和修改数组内容

6.3、枚举数据内容

6.4、使用内置的数组方法

7、数理错误

8、比较 undefined 和 null 值

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

8.2、区分 null 和 undefined

9、常用的 JavaScript 工具

9.1、使用 JavaScript 库