Javascript基础——快速上手篇

一、JavaScript简介

1、什么是JavaScript？

JavaScript是运行在浏览器上的脚本语言。简称JS。
JavaScript是网景公司（NetScape)的 布兰登·艾奇 开发的，最初叫做LiveScript。LiveScript的出现让浏览器更加生动，使得页面更具有交互性。
JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。

JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。

JavaScript和java没有任何关系，只是语法类似。JavaScript运行在浏览器中，代码由浏览器解释后执行。而Java运行在JVM中。

JavaScript的“目标程序”以普通文本形式保存，这种语言都叫做"脚本语言“。

Java的目标程序已.class形式存在，不能使用文本编辑器打开，不是脚本语言。

1998年网景公司由“美国在线”公司收购。

王景公司最著名的就是“领航者浏览器”：Navigator浏览器。
LiveScript的出现，最初的时候是为Navigator浏览器量身定制一门语言，不支持其他浏览器。

微软一看不行，研发了只支持IE浏览器的脚本语言。JScript。
在两者语言共存的时代，程序员需要写两套程序。这时一个叫做ECMA组织（欧洲计算机协会）根据JavaScript制定了ECMA-262标准，叫做ECMA-Script.

JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

2、JavaScript构成

• 核心（ECMAScript）
• 文档对象模型（DOM）–document Object Module
• 浏览器对象模型（BOM）–Browser Object Module

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-85TO6Qpx-1653037390967)(D:/华清远见 前端/02-js笔记/图片/js-union.png)]

ECMAScript：是一种由Ecma国际(前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association)通过ECMA-262标准化的脚本程序设计语言。这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript，但实际上后两者是ECMA-262标准的实现和扩展

BOM： Browse Object Model，提供与浏览器交互的方法和接口

DOM： Document Object Model，提供访问和操作网页内容的方法和接口

3、 JavaScript 使用

在Web应用程序中，JavaScript是HTML文档的一部分，它是依托 HTML 而存在的。也就是说，必须把脚本的代码放在HTML文档中，否则它无法运行。JavaScript 程序可以用任何文本编辑器来编写。

1. 行级

给标签设置对应的属性，属性值是要执行的JavaScript代码。

<a href="javaScript:alert('你已经领取过了')">领取奖品</a>

<input type="button" value="点击有惊喜" onclick="alert('哈哈哈哈')">

2. 嵌入

使用script标签，标签需要闭合，标签内容是要执行的JavaScript代码，格式如下：

<script>
	JavaScript 语言代码;
</script>

注：

​ ① 可以将JavaScript代码嵌入到head中或body中的任何地方。

​ ② 含在

3. 引入

使用script标签，标签需要闭合，设置属性src，src的值是js文件路径，如：./js/my.js。

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

注：

​ ① 嵌入和导入的数量不受限制；

​ ② 使用script 标签引入外部js文件时（标明src属性，不管有没有赋值），标签内容部分再填写js语句是不能执行的；

​ ③ js代码直接写在一个独立的文件里面，该文件就是js文件，后缀是.js

二、基础语法

1、语法规范

• 区分大小写

  • JavaScript区分大小写，包括关键字、变量、函数名、所有标识符；

  • querySelector的S是大写，你写成小写就会报错；

  • alert()全部是小写，你写一个大写字母就会提示你该函数不存在；

  • myname、myName、mynamE、MyName他们真不是一个东西；

• 注释

  JavaScript支持两种注释方式；

  单行注释 //这是注释内容
  
  /*
  * 这是一个多行
  * （块级）注释
  */
  

  • 虽然上面注释中的第二和第三行都以一个星号开头，但这不是必需的。之所以添加那两个星号，纯粹是为了提高注释的可读性（这种格式在企业级应用中用得比较多）。

  • 注释部分不会执行，合理的注释能显著提高代码的可读性；

  • 可以通过浏览器源文件看到注释内容，所以什么该注释什么不该注释要注意；

• 语句

  ECMAScript 中的语句以一个分号结尾；如果省略分号，则由解析器确定语句的结尾，如下例所示：

  var sum = a + b // 即使没有分号也是有效的语句——不推荐
  var sum = a - b; // 有效的语句——推荐
  

  虽然语句结尾的分号不是必需的，换行也可以表示一个语句结束，但我们建议任何时候都不要省略它。这样可以避免程序员犯一些低级错误，当然大佬也是可以忽略的，像我们这种小白还是好好写吧！

  可以使用 C 风格的语法把多条语句组合到一个代码块中，即代码块以左花括号（{）开头，以右花括号（}）结尾：

  if (test) {
       
      test = false;
      alert(test);
  }
  

  虽然条件控制语句（如 if 语句）只在执行多条语句的情况下才要求使用代码块，但最佳实践是始终在控制语句中使用代码块——即使代码块中只有一条语句，例如：

  if (test) 
      alert(test); // 有效但容易出错，不要使用
  if (test) {
        // 推荐使用
      alert(test);
  }
  

  在控制语句中使用代码块可以让编码意图更加清晰，而且也能降低修改代码时出错的几率。

• 标识符：所谓标识符，就是指变量、函数、属性、参数的名字，或者用做某些循环语句中的跳转位置的标记。

  有以下注意事项：

  1. 只能由数字、字母、下划线和美元符号（$）组成；

     • 合法的标识符：myname、_age、$classname、abc、hqyj_h5;
     • 不合法的标识符：5myname;

  2. 不能以数字开头；

  3. 不能是保留字和关键字；（下面会有介绍）

  4. 大小写敏感 age 、Age 这是两个完全不同的变量；

  5. 见名知意(尽量使用英文全称)，例如年龄：age 而不是a阿b的；

  6. 单词个数超过两个之后；

     • 驼峰式命名 className（用的比较多）；

     • 下划线命名 class_name；

2、关键字和保留字

ECMA-262 描述了一组具有特定用途的关键字，这些关键字可用于表示控制语句的开始或结束，或者用于执行特定操作等。按照规则，关键字也是语言保留的，不能用作标识符。以下就是 ECMAScript的全部关键字（带*号上标的是第 5 版新增的关键字）：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jdWNJb7O-1653037390968)(D:/华清远见 前端/02-js笔记/图片/importantword.png)]

ECMA-262 还描述了另外一组不能用作标识符的保留字。尽管保留字在这门语言中还没有任何特定的用途，但它们有可能在将来被用作关键字。以下是 ECMA-262 第 3 版定义的全部保留字：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-x0UJwh64-1653037390969)(D:/华清远见 前端/02-js笔记/图片/es3-baoliuword.png)]

3、变量

​ 当程序需要将值保存起来以备将来使用时，便将其赋值给一个变量。变量(variable)是一个用于保存值的占位符，可以通过变量名称来获得对值的引用。

​ 变量在JavaScript中就是用一个变量名表示，**变量名是大小写英文、数字、$和_的组合，且不能用数字开头。**变量名也不能是JavaScript的关键字，如if、while等。申明一个变量用var语句，比如：

var a; // 申明了变量a，此时a的值为undefined
var $b = 1; // 申明了变量$b，同时给$b赋值，此时$b的值为1
var s_007 = '007'; // s_007是一个字符串
var Answer = true; // Answer是一个布尔值true
var t = null; // t的值是null 

​ 在JavaScript中，使用赋值符号 = 对变量进行赋值。可以把任意数据类型赋值给变量，同一个变量可以反复赋值，而且可以是不同类型的变量，但是要注意只能用var申明一次，例如：

var a = 123; // a的值是整数123
a = 'ABC'; // a变为字符串 

4、 var声明

• 有var，系统就会在当前作用域的第一行代码隐式的声明一个变量（变量提升）；

• 无var，系统帮你创建一个(全局)变量(运行到这里的时候）。

var abc = 'Hello, world';
    abcd = "abcd";

• 严格模式下，使用没有var声明的变量会报错。

三、JavaScript数据类型

JavaScript的数据类型分类：

• 基本数据类型：Number、String、Boolean
• 特殊数据类型：NULL、Undefined、NaN
• 引用数据类型：数组、对象、函数等

1、typeof 操作符

typeof 就是负责鉴定数据类型的操作符。

对一个值使用 typeof 操作符可能返回下列某个字符串：

• “undefined”——如果这个值未定义；
• “boolean”——如果这个值是布尔值；
• “string”——如果这个值是字符串；
• “number”——如果这个值是数值；
• “object”——如果这个值是对象或 null；
• “function”——如果这个值是函数。

面试题–typeof 返回值

//返回值类型
console.log(typeof typeof 222);			  //string

typeof本身是字符串型，这里是一个坑要注意不要跳进去~

2、 Undefined类型

• Undefined 类型只有一个值，即特殊的 undefined。

• 在使用 var 声明变量但未对其没有赋值时，这个变量的值就是 undefined

来个例子理解吧：

var message;
alert(message == undefined); //true

这个例子只声明了变量 message，但未对其进行赋值。比较这个变量与 undefined 字面量，结果表明它们是相等的。

3 、Null类型

• null类型是第二个只有一个值的数据类型，这个特殊的值是 null。

• 实际上，ECMA-262 规定对它们的相等性测试要返回 true：

alert(null == undefined); //true，仅做判断不做字符串连接时

这里，位于 null 和 undefined 之间的相等操作符（==）总是返回 true。

null和undefined区别：

null

• 用来描述空值;

• typeof null：返回的是字符串object

undefined

• undefined表明只声明了变量没有赋值；

• 如果函数没有返回值，则返回undefined；

• typeof undefined：返回的是字符串undefined；

• ==认为NULL和undefined是相等的；===则返回false；

4 、Boolean类型

Boolean 类型是 ECMAScript 中使用得最多的一种类型，该类型只有两个字面值： true 和 false。Boolean 类型的字面值 true 和 false 是区分大小写的。

5 、Number类型

用来表示整数和浮点数值

6、 String类型

字符串可以由双引号（"）或单引号（'）表示，因此下面两种字符串的写法都是有效的：

var firstColor = "pink";
var lastColor = 'blue';

字符串的特点

​ ECMAScript 中的字符串是不可变的，也就是说，字符串一旦创建，它们的值就不能改变。要改变某个变量保存的字符串，首先要销毁原来的字符串，然后再用另一个包含新值的字符串填充该变量。

7、Object类型

ECMAScript 中的对象其实就是一组数据和功能的集合。对象可以通过执行 new 操作符后跟要创建的对象类型的名称来创建。

也就是说 对象=属性+方法

如下所示：

var o = new Object;
//var o={}
//为实例添加属性并赋值
o.name = "张三";
o.age = 24;

var o={
   
    name:"张三"