什么是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 创始人

特点

1. 解释型脚本语言：JavaScript 是一种解释型脚本语言，与 C、C++ 等语言需要先编译再运行不同，使用 JavaScript 编写的代码不需要编译，可以直接运行。
2. 面向对象：JavaScript 是一种面向对象语言，使用 JavaScript 不仅可以创建对象，也能操作使用已有的对象。
3. 弱类型：JavaScript 是一种弱类型的编程语言，对使用的数据类型没有严格的要求，例如您可以将一个变量初始化为任意类型，也可以随时改变这个变量的类型。
4. 动态性：JavaScript是一种采用事件驱动的脚本语言，它不需要借助 Web 服务器就可以对用户的输入做出响应，例如我们在访问一个网页时，通过鼠标在网页中进行点击或滚动窗口时，通过 JavaScript 可以直接对这些事件做出响应。
5. 跨平台：JavaScript不依赖操作系统，在浏览器中就可以运行。因此一个 JavaScript 脚本在编写完成后可以在任意系统上运行，只需要系统上的浏览器支持 JavaScript 即可。
    

2、基本使用及HelloWorld

1、引入JavaScript

（1）内部标签

输出效果：

 

 

（2）外部引入

我的第一个JavaScript程序.html

qj.js

alert('hello world');

输出效果：

 

 

2、基本语法  

记得要先把idea调成ECMAScript 6+  

 

 网页功能（F12）：

• Elements：把网址复刻一遍
• Console：调试js
• Sources：要查看短点
• Network：java jar包
• Application：查看网站的应用

 

输出效果：

//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、浏览器控制台使用

输出效果：

 

 

调试（打断点）  

 

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去定义

 

 错误：

 

正确：