JavaScript基础知识点总结

╰+哭是因爲堅強的太久メ 2021-09-16 23:28 573阅读 0赞

**目录**

（一） JavaScript的基本语法

（二） 程序的流程控制

1.if条件选择语句

2.switch选择语句

3.while循环语句

4.do while语句

5.for循环语句

6.break语句

7.continue语句

3.函数

4.对象

例1.

例2.

例3.

（五）JavaScript的内部对象

（1）Object对象

（2）String对象

（3）Math对象

（4）Date对象

（六）专门用于对象的语句

1.with语句

2.for...in语句

（七）数组

例1.用对象的方式实现数组

例2.用Array（）对象实现数组

（八） window对象和document对象

1.DOM对象

2.事件

3.Windows对象

例1:alert（）；prompt（）；

例2：setTimeout()-浏览器过多长时间以后去执行指定的程序代码（只执行一次）

4.document对象

例1.write（）；close（）；window.open();

--------------------

# （一） JavaScript的基本语法 #

JavaScript严格区分大小写

注释：      单行注释//      多行注释/\*     \*/

/\*     \*/可以嵌套//，但不能嵌套/\*     \*/

换行：document.write("<br>");

调试：利用alert（）函数；

null常量——空值

Undefined常量——变量未被赋值或变量属性不存在

Undefined代表无值的基本类型，Null代表无值的引用类型，undefined继承null。

变量在使用前进行声明是良好的编程习惯

# （二） 程序的流程控制 #

## 1.if条件选择语句 ##

<body>
        <script language="Javascript">
            function checkData()
            {
                if (document.form1.Text.value.length == 3)
                    alert("OK!有效！");
                else
                {
                    alert("请输入三个字符，" + document.form1.Text.value + "无效！");
                    return false;
                }
            }
        </script>
        <form name="form1">
            <center>
                请输入字符：<input type="text" name="Text" onchange="checkData()">
            </center>
        </form>
    </body>

![20181111220426698.png][] ![20181111220445438.png][]

## 2.switch选择语句 ##

![20181111221808929.png][]

## 3.while循环语句 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]

## 4.do while语句 ##

![20181111222237455.png][]

## 5.for循环语句 ##

![20181111222346458.png][]

## 6.break语句 ##

![20181111224940661.png][]

## 7.continue语句  ##

![20181111225437336.png][]

# 3.函数 #

# 4.对象 #

###       例1. ###

![2018111123031172.png][]

###        例2. ###

![20181111210947537.png][]![20181111210659935.png][]

### 例3. ###

![20181111231022180.png][]

#    （五）JavaScript的内部对象  #

按内部对象的使用方式分为动态对象和静态对象

动态对象——引用其方法属性时，使用new创建对象实例，使用“对象实例名.成员名”的格式来访问其属性和方法

静态对象——引用其方法属性时，直接使用“对象名.成员名”的格式来访问

Object对象、String对象、Math对象、Date对象

## （1）Object对象 ##

把对象的所有实例设置为null，可以强制性的废除对象。
    如：var oObject1=new object;
    	     oObject1=null;
    每用完一个对象，将其废除用以释放内存，这是个好习惯。

![20181111232425564.png][]

## （2）String对象 ##

![20181111233048613.png][]

## （3）Math对象 ##

提供了一些基本数学函数和常数，是一个静态对象。直接使用“对象名.成员名”的格式来访问其属性和方法
    如：var num = Math.sin();

## （4）Date对象 ##

如：var current_time = new Date();

# （六）专门用于对象的语句 #

## 1.with语句 ##

如果一段程序代码当中多次使用到了某个对象的许多属性和方法，那么我们只要在with关键字后面的小括号中写上对象实例的名称，然后将连续的程序代码放入大括号中，这种代码可以直接引用对象实例的属性和方法，而不必在每个属性和方法前加上对象实例名和“.”了。

![20181111234137350.png][]

## 2.for...in语句 ##

对某个对象中所有属性进行循环操作，将一个对象中的所有的属性名称逐一赋值给一个变量，而不用事先知道对象中属性的个数。能取得对象实例中每个属性的名称，那么使用“对象实例名\[\]”可取出对象实例中每个属性值

![20181111234502845.png][]

#    （七）数组 #

###    例1.用对象的方式实现数组 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1][]

### 例2.用Array（）对象实现数组 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 2][]

# （八） window对象和document对象 #

## 1.DOM对象 ##

JavaScript将浏览器本身、网页文档以及网页文档中的HTML元素等都用相应的内置对象来表示，其中一些对象作为另外对象的属性而存在的，**这些对象及对象之间的层次关系就统称为DOM（文档对象模型）**，window对象是最顶层的对象

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 3][]

## 2.事件 ##

<table> 
 <tbody> 
  <tr> 
   <td style="border-color:#000000;text-align:center;vertical-align:top;width:214pt;"> <p style="margin-left:0in;"><strong>事件</strong></p> </td> 
   <td style="border-color:#000000;text-align:center;vertical-align:top;width:422pt;"> <p style="margin-left:0in;"><strong>发生条件</strong></p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#000000;text-align:center;vertical-align:top;width:214pt;"> <p style="margin-left:0in;"><span style="color:#ffbb66;"><strong>onBlur</strong></span></p> </td> 
   <td style="border-color:#000000;text-align:center;vertical-align:top;width:422pt;"> <p style="margin-left:0in;"><span style="color:#ffbb66;"><strong>用户从窗口或表单中移开输入焦点</strong></span></p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#000000;text-align:center;vertical-align:top;width:214pt;"> <p style="margin-left:0in;"><strong>onChange</strong></p> </td> 
   <td style="border-color:#000000;text-align:center;vertical-align:top;width:422pt;"> <p style="margin-left:0in;"><strong>用户改变元素值</strong></p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#000000;text-align:center;vertical-align:top;width:214pt;"> <p style="margin-left:0in;"><strong>onClick</strong></p> </td> 
   <td style="border-color:#000000;text-align:center;vertical-align:top;width:422pt;"> <p style="margin-left:0in;"><strong>用户在表单元素或在链接上单击</strong></p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#000000;text-align:center;vertical-align:top;width:214pt;"> <p style="margin-left:0in;"><strong>onError</strong></p> </td> 
   <td style="border-color:#000000;text-align:center;vertical-align:top;width:422pt;"> <p style="margin-left:0in;"><strong>装载文档或图象时出错</strong></p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#000000;text-align:center;vertical-align:top;width:214pt;"> <p style="margin-left:0in;"><span style="color:#ffbb66;"><strong>onFocus</strong></span></p> </td> 
   <td style="border-color:#000000;text-align:center;vertical-align:top;width:422pt;"> <p style="margin-left:0in;"><span style="color:#ffbb66;"><strong>用户在窗口或表单元素上聚焦</strong></span></p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#000000;text-align:center;vertical-align:top;width:214pt;"> <p style="margin-left:0in;"><strong>onLoad</strong></p> </td> 
   <td style="border-color:#000000;text-align:center;vertical-align:top;width:422pt;"> <p style="margin-left:0in;"><strong>用户装载页</strong></p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#000000;text-align:center;vertical-align:top;width:214pt;"> <p style="margin-left:0in;"><strong>onMouseDown</strong></p> </td> 
   <td style="border-color:#000000;text-align:center;vertical-align:top;width:422pt;"> <p style="margin-left:0in;"><strong>用户按下一个鼠标键</strong></p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#000000;text-align:center;vertical-align:top;width:214pt;"> <p style="margin-left:0in;"><strong>onMouseMove</strong></p> </td> 
   <td style="border-color:#000000;text-align:center;vertical-align:top;width:422pt;"> <p style="margin-left:0in;"><strong>用户移动光标</strong></p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#000000;text-align:center;vertical-align:top;width:214pt;"> <p style="margin-left:0in;"><strong>onMouseOver</strong></p> </td> 
   <td style="border-color:#000000;text-align:center;vertical-align:top;width:422pt;"> <p style="margin-left:0in;"><strong>用户在链接上移动光标</strong></p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#000000;text-align:center;vertical-align:top;width:214pt;"> <p style="margin-left:0in;"><strong>onMove</strong></p> </td> 
   <td style="border-color:#000000;text-align:center;vertical-align:top;width:422pt;"> <p style="margin-left:0in;"><strong>用户移动窗口</strong></p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#000000;text-align:center;vertical-align:top;width:214pt;"> <p style="margin-left:0in;"><strong>onReset</strong></p> </td> 
   <td style="border-color:#000000;text-align:center;vertical-align:top;width:422pt;"> <p style="margin-left:0in;"><strong>用户重置表单</strong></p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#000000;text-align:center;vertical-align:top;width:214pt;"> <p style="margin-left:0in;"><strong>onResize</strong></p> </td> 
   <td style="border-color:#000000;text-align:center;vertical-align:top;width:422pt;"> <p style="margin-left:0in;"><strong>用户改变窗口大小</strong></p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#000000;text-align:center;vertical-align:top;width:214pt;"> <p style="margin-left:0in;"><strong>onSelect</strong></p> </td> 
   <td style="border-color:#000000;text-align:center;vertical-align:top;width:422pt;"> <p style="margin-left:0in;"><strong>用户选择表单元素的输入区域</strong></p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#000000;text-align:center;vertical-align:top;width:214pt;"> <p style="margin-left:0in;"><strong>onSubmit</strong></p> </td> 
   <td style="border-color:#000000;text-align:center;vertical-align:top;width:422pt;"> <p style="margin-left:0in;"><strong>用户提交表单</strong></p> </td> 
  </tr> 
  <tr> 
   <td style="border-color:#000000;text-align:center;vertical-align:top;width:214pt;"> <p style="margin-left:0in;"><strong>onUnload</strong></p> </td> 
   <td style="border-color:#000000;text-align:center;vertical-align:top;width:422pt;"> <p style="margin-left:0in;"><strong>用户退出页面</strong></p> </td> 
  </tr> 
 </tbody> 
</table>

## 3.Windows对象 ##

常用方法：alert（）；confirm（）；prompt（）；

setInterval()——设置浏览器每隔多长时间定期调用它所指定的程序代码（执行多次），设置的时间值以毫秒为单位      setInterval("scroll()",100);

setTimeout()——设置浏览器过多长时间以后去执行指定的程序代码（只执行一次），设置的时间值以毫秒为单位

clearInterval（）;clearTimeout()

### 例1:alert（）；prompt（）； ###

![2018111200112976.png][]

### 例2：setTimeout()-浏览器过多长时间以后去执行指定的程序代码（只执行一次） ###

<body>
        <script>
            window.setTimeout(" window.close() ", 5000);
        </script>
    
            <center><h3>通知</h3></center>
            5秒钟以后,这个窗口将自动关闭!
    </body>

## 4.document对象 ##

(1)write方法——向html文档中动态写入内容

(2)open方法——用于打开一个新的文档（与window的open方法类似）

(3)close方法——当向新打开的文档中写完内容以后，调用该方法关闭文档流

(4)clear方法——清除文档中的所有内容

### 例1.write（）；close（）；window.open(); ###

<body>
        <script language="javascript">
            document.write("这是write方法动态写入的内容<br>");
            function updatedoc()
            {
                document.write("abc<br>");
                document.write("def<br>");
                document.close();
                var owin = window.open("", "_blank");
                owin.document.write("xyz<br>");
                owin.document.close();
                owin.document.write("clw <br> ");
                owin.document.write("hehe <br> ");
                owin.document.close();
            }
        </script>
        <input type=button name="update" value="更新" onclick="updatedoc()">
    </body>

![20181112003809973.png][]=》![20181112003819927.png][]

[20181111220426698.png]: https://img-blog.csdnimg.cn/20181111220426698.png
[20181111220445438.png]: /images/20210725/a76573268cbb471f8dd71f8e58ad6817.png
[20181111221808929.png]: /images/20210725/ce06624225314f87b85f9a32f23abc09.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: /images/20210725/fecd99cf258d43fe94b63d76954f596e.png
[20181111222237455.png]: /images/20210725/2ed7708ac34d4a7cbb1d1d8e92c10a56.png
[20181111222346458.png]: /images/20210725/e5ba0d7bfa71431ba0fd63faabafdebe.png
[20181111224940661.png]: /images/20210725/32566cba341a4739b82ac35ea176e19e.png
[20181111225437336.png]: /images/20210725/c0c5e6a33d6047039bc3d04dec9a3d59.png
[2018111123031172.png]: /images/20210725/9571572fa82240f881ebc0115ecf21ea.png
[20181111210947537.png]: https://img-blog.csdnimg.cn/20181111210947537.png
[20181111210659935.png]: /images/20210725/505b518694334761bf61878a77bb37c5.png
[20181111231022180.png]: /images/20210725/69664f4ed6224fb2a93dd6ab9f86adc0.png
[20181111232425564.png]: /images/20210725/b182ee30a9d7442db40c0de3eae45084.png
[20181111233048613.png]: /images/20210725/1b4dce66d28d47f0b0e20a8485728984.png
[20181111234137350.png]: /images/20210725/5905536f81f0468a8ab051bbe90f665f.png
[20181111234502845.png]: /images/20210725/562421eb37604280aacbf2411c0ed953.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1]: /images/20210725/8d28ea3cad9b43c2b16ef176b4e9219e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 2]: /images/20210725/099d4f0cc1974ebfa961743048d1c5f3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 3]: /images/20210725/e4d5f7531999405b8cc4b2d8f635c0e8.png
[2018111200112976.png]: /images/20210725/b04fe0b0f5ba4cffbab6430a3b644ec7.png
[20181112003809973.png]: https://img-blog.csdnimg.cn/20181112003809973.png
[20181112003819927.png]: /images/20210725/1ccd571a953046eba123e02c2be36c3b.png