超详细快速入门JavaScript详解(一)

旧城等待， 2023-02-21 06:16 18阅读 0赞

**目录**

一. JS概述&入门

二.JS组成

三. JS引入方式

四. JS-注释

五.JS-变量

1.基本数据类型

2.引用数据类型

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

# 一. **JS概述&入门** #

**我们为什么要学习JS?： 为了做页面的各种特效**

HTML：肉体

CSS：穿衣服/化妆

JS：大脑、灵魂

> 脚本语言：（快）
> 
> 1、无法独立执行。必须嵌入到其他语言（HTML）中，结合使用。
> 
> 2、无需编译，直接被浏览器解析执行。

> Java编程语言：（安全、维护性高、执行效率）
> 
> 1、独立写程序，独立运行。 编译---执行
> 
> 2、先编译  后执行

*  举例:

<script>
        /*
        * js注释： 和Java注释一样。有单行注释和多行注释
        * */
        var sum = 0;
        for(var i=1;i<=50;i++){
            sum+=i;
        }
        alert(sum);
    </script>

*  小结：
 *  JavaScript的执行过程由上到下依次执行 （代码出错会强行停止）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzA1MTMx_size_16_color_FFFFFF_t_70][]

*  JavaScript没有访问系统文件的权限（安全）
 *  JavaScript允许出现一定数量的链式编程

# 二.**JS组成** #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzA1MTMx_size_16_color_FFFFFF_t_70 1][]

>  *  **ECMAScript (核心)：规定了JS的语法和基本对象。**
> 
> **（if,for,while…..）**
> 
>  *  **DOM 文档对象模型：处理网页内容的方法和接口**
> 
> **标记型文档。HTML**
> 
> **（页面特效）**
> 
>  
> 
>  *  **BOM 浏览器对象模型：与浏览器交互的方法和接口**
> 
> **（浏览器操作（浏览器打开、关闭、地址栏、浏览器桌面上的位置））**

# 三. **JS引入方式** #

向HTML中引入JS代码：

*  内部脚本：（写在HTML页面上）

> 格式：
> 
> <script>
> 
> JavaScript的代码
> 
> </script>
> 
>  
> 
> 理论上可以放在页面任何位置
> 
> 建议：
> 
> 放在<head>标签中

*  外部脚本：

> 格式：
> 
> <script  type=”text/javascript”  src=”javascript文件路径” ></script>
> 
>

![20200629071407580.png][]（.js）

![20200629071413924.png][]

*  注意：

引入外部JS的<script>标签，内容体中不能出现任何代码。

![20200629071529281.png][]

# 四. **JS\-注释** #

*  等同于Java注释
 *  单行注释

**//**

*  多行注释

**/\* \*/**

# 五.**JS\-变量** #

*  JavaScript严格区分大小写。

> var aa   和   var AA   不是同一个变量

## 1.**基本数据类型** ##

类似于java中的基本数据类型。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzA1MTMx_size_16_color_FFFFFF_t_70 2][]

*  举例:

通过typeof运算符可以分辨变量值属于哪种基本数据类型

![20200629072550428.png][]

ECMAScript实现之初的一个bug，null属于基本数据类型，typeof(null)--àobject

举例:

## 2.**引用数据类型** ##

Java 中的引用数据类型 都是Class（类）

JavaScript中的引用数据类型 都是对象。

标准创建方式：

> var str = new String();//和java相同
> 
> var str = new String;  //js独有的方式

引用数据类型默认值：null

看完恭喜你,又知道了一点点!!!

**你知道的越多,不知道的越多! **

**~感谢志同道合的你阅读,  你的支持是我学习的最大动力 ! ****加油 ,陌生人一起努力,共勉!!**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzA1MTMx_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200629070356786.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzA1MTMx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzA1MTMx_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200629070623284.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzA1MTMx,size_16,color_FFFFFF,t_70
[20200629071407580.png]: https://img-blog.csdnimg.cn/20200629071407580.png
[20200629071413924.png]: https://img-blog.csdnimg.cn/20200629071413924.png
[20200629071529281.png]: https://img-blog.csdnimg.cn/20200629071529281.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzA1MTMx_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200629075333381.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzA1MTMx,size_16,color_FFFFFF,t_70
[20200629072550428.png]: https://img-blog.csdnimg.cn/20200629072550428.png