什么是JavaScript（快速入门）
目录
1、什么是JavaScript
概述
历史
特点
2、基本使用及HelloWorld
1、引入JavaScript
2、基本语法
网页功能（F12）：
3、浏览器控制台使用
4、数据类型快速浏览
变量
Number
字符串
布尔值
逻辑运算
比较运算符
浮点数问题
null和undefined
数组
对象
5、严格检查模式strict
1、什么是JavaScript
概述
- JavaScript是一门世界上最流行的脚本语言
- JavaScript是Web开发领域中的一种功能强大的编程语言，主要用于开发交互式的Web页面。在计算机、手机等设备上浏览的网页，其大多数的交互逻辑几乎都是由JavaScript实现的。
- 对于制作一个网页而言，HTML、CSS和JavaScript分别代表了结构、样式和行为，结构是网页的骨架，样式是网页的外观，行为是网页的交互逻辑，如下图所示。
JavaScript 与 HTML 和 CSS 共同构成了我们所看到的网页，其中：
- HTML 用来定义网页的内容，例如标题、正文、图像等；
- CSS 用来控制网页的外观，例如颜色、字体、背景等；
- JavaScript 用来实时更新网页中的内容，例如从服务器获取数据并更新到网页中，修改某些标签的样式或其中的内容等，可以让网页更加生动。
历史
- ECMAScript可以理解为JavaScript的一个标准
- 最新版本已经到es6
- 但是大部分浏览器还只停留在支持es5代码上
- 开发环境~线上环境，版本不一致
布兰登·艾奇，JavaScript 创始人
特点
- 解释型脚本语言：JavaScript 是一种解释型脚本语言，与 C、C++ 等语言需要先编译再运行不同，使用 JavaScript 编写的代码不需要编译，可以直接运行。
- 面向对象：JavaScript 是一种面向对象语言，使用 JavaScript 不仅可以创建对象，也能操作使用已有的对象。
- 弱类型：JavaScript 是一种弱类型的编程语言，对使用的数据类型没有严格的要求，例如您可以将一个变量初始化为任意类型，也可以随时改变这个变量的类型。
- 动态性：JavaScript是一种采用事件驱动的脚本语言，它不需要借助 Web 服务器就可以对用户的输入做出响应，例如我们在访问一个网页时，通过鼠标在网页中进行点击或滚动窗口时，通过 JavaScript 可以直接对这些事件做出响应。
- 跨平台：JavaScript不依赖操作系统，在浏览器中就可以运行。因此一个 JavaScript 脚本在编写完成后可以在任意系统上运行，只需要系统上的浏览器支持 JavaScript 即可。
2、基本使用及HelloWorld
1、引入JavaScript
（1）内部标签
<!-- script标签内，写JavaScript代码-->
<script>
// 弹窗
alert('hello world');
</script>
输出效果：
（2）外部引入
我的第一个JavaScript程序.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- script标签内，写JavaScript代码-->
<!-- <script>-->
<!-- // 弹窗-->
<!-- alert('hello world');-->
<!-- </script>-->
<!-- 外部引入
<script src="js/qj.js"/>记住千万不可以这样！
script必须成对出现！！！
-->
<script src="js/qj.js"></script>
<!-- 不用显示定义type，也默认就是JavaScript-->
<script type="text/javascript">
</script>
</head>
<body>
</body>
</html>
qj.js
alert('hello world');
输出效果：
2、基本语法
记得要先把idea调成ECMAScript 6+
网页功能（F12）：
- Elements：把网址复刻一遍
- Console：调试js
- Sources：要查看短点
- Network：java jar包
- Application：查看网站的应用
<script>
// 1.定义变量 变量类型 变量名 = 变量值
var num = 1;
alert(num);
</script>
输出效果：
//2.条件判断
var score = 71;
if (score > 60 && score < 70) {
alert("60~70")
} else if (score > 70 && score < 80) {
alert("70~80")
} else {
alert("other")
}
输出效果：
3、浏览器控制台使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--javascript严格区分大小写-->
<script>
//1. 定义变量 (变量类型 变量名 = 变量值;)
var score = 1;
// alert(num);
//2. 条件控制
if (score>60 && score<70) {
alert("60~70");
} else if(score>70 && score<80) {
alert("70~80");
} else {
alert("other");
}
//console.log(score); 在浏览器的控制台打印变量 相当于System.out.println();
</script>
</head>
<body>
</body>
</html>
输出效果：
调试（打断点）
4、数据类型快速浏览
- 记住不能以数字作为变量名，如果用符号的话一般就是_和$
- 清空控制台（Ctrl+L）
变量
- var 变量名
Number
- js不区分小数和整数，number
- 123 //整数
- 123.1 //浮点数
- 1.123e3 //科学计数法
- -99 //负数
- NaN // not a number
- Infinity //表示无限大
字符串
- ‘abc’
- "abc"
布尔值
- true
- false
逻辑运算
- && //两个都是真，结果为真
- || //一个为真，结果为真
- ! //真即假，假即真
比较运算符
- = 赋值，不是比较运算符
- == 等于（类型不一样，值一样，也会判断为true）
- === 绝对等于（类型一样，值一样，结果true）（尽量使用这个！）
注意：
-
NaN===NaN，结果为false,这个与所有的数值都不相等，包括自己
-
只能通过isNaN(NaN)来判断这个数是否是NaN
浮点数问题
- console.log((1/3)===(1-2/3))
- 结果为false
尽量避免使用浮点数进行运算，存在精度问题
null和undefined
-
null 空
-
undefined 未定义
数组
- java的数值必须是相同的类型的对象，js中不需要这样
var arr = [1, 2, 3, 4, 5, 6, 'hello', null, true]
new Array(1,2,3,'hello',null, true);取数据下标，如果越界了，就会undefined
对象
- 对象是大括号{}，数组是中括号[]
- 每个属性之间使用逗号隔开，最后一个不需要添加
// Person person = new Person(1,2,3,4)
'use strict'
//全局变量
let i = 1
var person = {
name: "shanmu",
age: 3,
tags: ['js', 'java', 'web']
}
5、严格检查模式strict
- 前提：idea需要设置支持es6的语法
- use strict 严格校验模式，预防JavaScript的随意性导致产生的一些问题
- 必须写在JavaScript的第一行
- 局部变量建议都使用let去定义
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
前提是需要idea支持es6语法
'use strict';严格检查模式，预防JavaScript的随意性导致产生一些问题，必须写在第一行！！！！
局部变量建议都去使用let去定义！
-->
<script>
// //保证代码的可读性，尽量使用[]
// var arr = [1, 2, 3, 4, 5, 6, 'hello', null, true]
//
// new Array(1,2,3,'hello',null, true);
// Person person = new Person(1,2,3,4)
'use strict'
//全局变量
let i = 1
var person = {
name: "shanmu",
age: 3,
tags: ['js', 'java', 'web']
}
</script>
</head>
<body>
</body>
</html>
错误：
正确：
