javascript初步了解

╰半夏微凉° 2022-12-21 06:28 290阅读 0赞

### 文章目录 ###

*  前言
 *  一、JavaScript简介
 *   *  1.JavaScript是什么？
     *  2.JavaScript的特点
     *  3.JavaScript的三大核心
     *  4.JavaScript能做些什么？
 *  二、JavaScript文件引入方式
 *   *  1. 行内导入方式（不推荐，不安全）
     *  2. 内嵌式
     *  3. 外链式
     *  4. 注意点
 *  三、JavaScript中常用的输入输出语句
 *  四、JavaScript的数据类型
 *  五、JavaScript的数据类型转换
 *   *  1.把数值转换为字符串
     *  2.把字符串转换为数值
     *  3.其他简单数据类型转布尔型
 *  六、JavaScript的判断语句
 *  七、JavaScript的运算符
 *   *  1.算术运算符：+、-、\*、/、%、++、--
     *  2.赋值运算符：=、+=、-=、\*=、/=
     *  3.字符串运算符：+、+=
     *  4.比较运算符：>、<、>=、<=、==、!=、===、!==
     *  5.逻辑运算符：&&、||、!
     *  6.三元运算符：?:
 *  八、JavaScript的数组
 *   *  1.创建方法
     *  2.方法和属性

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

# 前言 #

前端js是一种轻量级、可插入 HTML 页面的编程语言。现在几乎所有现代的HTML页面都会使用JavaScript，而且JavaScript适用于大部分浏览器。在前端中使用JS的原因主要有以下几点：

1.掌握了javascript，就能透过现象看本质，能够充分理解函数都是对象，对象是引用传递这一点。  
2.掌握了javascript，只用关心简单的逻辑和代码，让编写代码变得简单。只要你掌握了基础，你就可以更为深入，并发现JavaScript的所有力量。  
3.熟练使用前端开发javascript基础，能够让自己快速成长为资深前端工程师。  
4.深入理解javascript的工作原理以及特性后，能够在面对各种层出不穷的前端框架潮流中，以不变应万变。

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

# 一、JavaScript简介 #

## 1.JavaScript是什么？ ##

JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的高级编程语言。JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。JavaScript的标准是ECMAScript 。

javascript 是一种基于对象和事件驱动的语言，主要应用于客户端。  
　　　基于对象：提供了很多对象，可以直接使用。  
　　　事件驱动：html做的网页是静态效果，javascript做的是动态效果。  
　　　客户端：主要是指浏览器。

## 2.JavaScript的特点 ##

（1）交互性：信息的动态交互。  
（2）安全性：不能访问本地磁盘中的文件。  
（3）跨平台性：与java不同，js直接使用 浏览器跨平台。

## 3.JavaScript的三大核心 ##

1.ECMAScript 2.DOM（document object model）3.BOM（browser object document ） （1）ECMA是（欧洲计算机制造商协会）它规定了js的语法标准。  
（2）DOM是文档对象模型，规定了文档的显示结构，可以轻松地删除、添加和替换节点  
（3）BOM是浏览器对象模型，就是浏览器自带的一些功能样式，如搜索框，设置，等学习浏览器窗口交互的对象

## 4.JavaScript能做些什么？ ##

> 可以使用JS添加、删除、修改网页上的所有元素及属性。 在HTML网页中动态写入文本。 响应网页中的事件，并做出相应处理。  
> 可用于较验客户端提交的数据。 检测浏览器类型及版本。  
> （判断浏览器类型：）

# 二、JavaScript文件引入方式 #

## 1. 行内导入方式（不推荐，不安全） ##

<body>
        <span onclick="alert('第一种方式')">导入js的第一种方式，行内导入</span>
    </body>

## 2. 内嵌式 ##

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="gbk">
            <title>index</title>
        </head>
        <body>
        </body>
        <script> alert('第二种方式'); </script>
    </html>

## 3. 外链式 ##

如果把script元素放在head元素里，待浏览器经过下载、解析、执行完js文件之后，才会呈现页面内容。如果一个页面需要很多个js文件，那么浏览器可能会出现短暂的“白板”，用户体验不好。所以，我们应该把js文件放在的前面，这样浏览器会先展现页面给用户。type属性可以不写

## 4. 注意点 ##

内嵌导入和外链导入不能合并到一起

# 三、JavaScript中常用的输入输出语句 #

1、`alert()`：弹窗输出  
2、`prompt()`：弹窗输入  
　　接受两部分参数：① 输入提示内容；② 输入框的默认文本。（两部分都可以省略）  
　　输入的内容默认都是字符串。  
3、`document.write("<h1>{ {12345:0}}</h1> <h6>hahaha</h6>");`  
　　　在浏览器屏幕上面打印。  
4、`console.log("hahaha");`  
　　　浏览器控制台打印。

# 四、JavaScript的数据类型 #

请注意：JS的数据类型有8种。

在ES5的时候，我们认知的数据类型确实是 6种：Number、String、Boolean、undefined、object、Null。

ES6 中新增了一种 Symbol 。这种类型的对象永不相等，即始创建的时候传入相同的值，可以解决属性名冲突的问题，做为标记。

谷歌67版本中还出现了一种 bigInt。是指安全存储、操作大整数。（但是很多人不把这个做为一个类型）。

JS数据类型：JS 的数据类型有几种？

8种。Number、String、Boolean、Null、undefined、object、symbol、bigInt。

JS数据类型：Object 中包含了哪几种类型？

其中包含了Data、function、Array等。这三种是常规用的。

JS数据类型：JS的基本类型和引用类型有哪些呢？

基本类型（单类型）：除Object。 String、Number、boolean、null、undefined。
    
    引用类型：object。里面包含的 function、Array、Date。

# 五、JavaScript的数据类型转换 #

## 1.把数值转换为字符串 ##

全局方法 String() 能够把数字转换为字符串。

它可用于任意类型的数字、文字、变量或表达式：

String(x)         // 从数值变量 x 返回字符串
    String(123)       // 从数值文本 123 返回字符串
    String(100 + 23)  // 从表达式中的数值返回字符串

数字方法 toString() 同理。

x.toString()
    (123).toString()
    (100 + 23).toString()

更多方法

> toExponential() 返回字符串，对数字进行舍入，并使用指数计数法来写。  
> toFixed() 返回字符串，对数字进行舍入，并使用指定位数的小数来写。  
> toPrecision() 返回字符串，把数字写为指定的长度。

## 2.把字符串转换为数值 ##

全局方法 Number() 可把字符串转换为数字。

包含数字的字符串（比如 “3.14”）转换为数字（比如 3.14）。

空的字符串转换为 0。

其他字符串将转换为 NaN（Not a number，不是数字）。

Number("3.14")    // 返回 3.14
    Number(" ")       // 返回 0
    Number("")        // 返回 0
    Number("99 88")   // 返回 NaN

更多方法

> parseFloat() 解析字符串并返回浮点数。  
> parseInt() 解析字符串并返回整数。

## 3.其他简单数据类型转布尔型 ##

方法：Boolean()  
其参数中代表空、否定的值会被转换为 false ，如 ‘’、0、NaN、null、undefined  
其余值都会被转换为 true

# 六、JavaScript的判断语句 #

1.if（condition）\{ \}

2.if（condition）\{ \} else \{ \}

3.if（condition）\{ \}  
else if（condition1）\{ \}  
else if（condition2）\{ \}…  
else \{ \}

4.switch（n）\{ //判断n === 1，2，3…  
case 1：hello1；break；  
case 2：hello2；break；  
case 3：hello3；break；…  
default：前面都不执行，则执行此；  
\}

# 七、JavaScript的运算符 #

## 1.算术运算符：+、-、\*、/、%、++、– ##

A = 10 + 20;
    
       A = 10 – 20;
    
       A = 10 * 20;
    
       A = 10 / 20;
    
       （1）"%"取余运算符，两个数相除，取余数。
              A = 10 % 3;  // A = 1，如果余数不为0，则两个不能整除
         　　 A = 10 % 2;  // A = 0，如果余数为0，则两个数能除尽
    
       （2）"++"加1运算符、自加1
              "++"可以作前缀(++i)，也可以作后缀(i++)。
    
              如果不赋值的话，i++和++i的结果是一样的。
              如果要赋值的话，i++和++i的结果就不一样了
    
       （3）"--"减1运算符，自减1
    
              "--"可以作前缀(--i)，也可以作后缀(i--)。
    
              如果不赋值的话，i--和--i的结果是一样的。
    
              如果要赋值的话，i++和++i的结果就不一样了

## 2.赋值运算符：=、+=、-=、\*=、/= ##

"+="先加后等。如：a += 10  //展开后 a = a + 10
    "-="先减后等。如：a -= 10   //展开后 a = a - 10
    "*="先乘后等。如：a *= 10  //展开后 a = a * 10
    "/="先除后等。如：a /= 10   //展开后 a = a / 10

## 3.字符串运算符：+、+= ##

字符串只能进行“连接”运算，不能进行其它运算。

var a = “abc";
    
           var b = a + “def”;   // 结果b = a + "def" = "abc" + "def" = "abcdef"
    
           var a = "abc";
    
           a += 10;   // 结果a = a + 10 = "abc" + 10 = "abc10"

## 4.比较运算符：>、<、>=、<=、、!=、=、!== ##

比较运算符的运算结果是布尔值(true或false)。

A = 10 > 20;       // 结果A=false
    
           A = 20>=20;       // 结果A=true
    
           A = 10%2 == 0;    // 结果A=true
    
           A = 10%2 == “0”;  // 结果A=true
    
           A = 10%3 != 0;    // 结果A=true
    
           A = 10%2 === “0”;  //结果A=false

"=" 是赋值。如：a = 10
    
       "==" 等于。只比较两个变量的值，而不管类型。只要值一样，就返回true，否则返回false。
    
       "===" 全等于。既比较变量，也判断类型。如果类型和值都一样，返回true，否则返回false。

## 5.逻辑运算符：&&、||、! ##

逻辑运算符的运算结果有两个true或false。
    
       "&&"逻辑与(并且关系)。如果左右两个操作数都为true，则结果为true，否则，结果为false。
    
        逻辑与，就是两个条件同时满足时，则结果为true。
        
        "||"逻辑或。左右两个条件，只要有一个满足，则返回true，否则，返回false。
        
        "!"取反运算。!true = false    !false = true    !100 = false

## 6.三元运算符：?: ##

所谓“三元运算符”就是指三个操作数。
    
       语法：条件表达式 ? 结果1 : 结果2
    
       语法：操作数1 ? 操作数2 : 操作数3
    
       含义：如果条件为true，则执行"结果1"的代码；如果条件为false，则执行"结果2"的代码。
    
       其实：三元运算符，就是if else的变形形式。

# 八、JavaScript的数组 #

> 数组对象的作用是：使用单独的变量名来存储一系列的值。

## 1.创建方法 ##

1、常规方式:

var myCars=new Array();
    myCars[0]="Saab";      
    myCars[1]="Volvo";
    myCars[2]="BMW";

2、简洁方式:

var myCars=new Array("Saab","Volvo","BMW");

3、字面量创建:

var myCars=["Saab","Volvo","BMW"];

## 2.方法和属性 ##

var x=myCars.length             // myCars 中元素的数量
    var y=myCars.indexOf("Volvo")   // "Volvo" 值的索引值