文章目录

前言
一、JavaScript简介
二、JavaScript文件引入方式
三、JavaScript中常用的输入输出语句
四、JavaScript的数据类型
五、JavaScript的数据类型转换
六、JavaScript的判断语句
七、JavaScript的运算符
八、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属性可以不写

<script src="/xxx.js"></script>

4. 注意点

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

<script src="/xxx.js">
	alert('这个不会被执行');
</script>

三、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" 值的索引值

原文链接：https://blog.csdn.net/weixin_45720111/article/details/109707542