JavaScript(1) -- JS入门

行者花雕 2021-11-05

展开全文

1. JavaScript介绍

JavaScript是属于HTML与Web的解释性编程语言，也是一种以函数优先的弱类型轻量级的脚本语言，无需进行预编译即可与HTML前端页面进行行为交互，支持跨平台运行，可在多种平台下（如Windows、Linux、Mac、Android、iOS等）。目前JavaScript被广泛地应用于Web前端Html实现页面交互、实现浏览器页面事件响应、前端数据验证、检验访客浏览器信息、控制cookies的创建与修改、基于Node.js技术进行服务器端编程。

2. JavaScript基本语法

2.1. JavaScript的三种定义方式

JS一般有三种定义的方式：

① 写在<a>标签的href属性内；

② 写在<script>标签内；

③ 单独写一个JS文件，使用外连的方式引入；

下面直接给出代码示例以区分这三种方式的不同：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www./TR/html4/loose.dtd">
<html>
<head>
    <meta charset="UTF-8">
    <title>三种JS的写法</title>
    <!--第二种写法：写在script代码块中-->
    <script type="text/javascript">
        alert("我在块里面！")
    </script>
    <!--第三种写法：单独写一个js文件，在src中引入.js文件-->
    <script type="text/javascript" src="./js/01hello.js"></script>
</head>
<body>
    <!--
        JS的三种写法：
        ①写在标签内；
        ②写在script标签内；
        ③单独写一个JS文件
    -->
<!--第一种写法：表示的是伪协议，给浏览器看，伪协议之后的代码当做JS代码执行-->
<a href="javascript:console.debug('点你就点你')">点击我</a>
</body>
</html>

2.2. JavaScript的标识符

JavaScript中的标识符与Java中标识符的定义是一样的，标识符是为了标识程序中诸如类、方法和变量等元素而采用的命名。

所有的标识符必须遵从以下规则：

标识符是由字母、数字、下划线(_)和美元符号($)构成的字符序列。
标识符必须以字母、下划线(_)或美元符号($)开头，不能以数字开头。
标识符不能是JavaScript中的保留字与关键字。
标识符不能是true、false或null。
标识符可以为任意长度。

合法的标识符举例：indentifier、username、user_name、_userName、$username；

非法的标识符举例：int、98.3、Hello World。

JavaScript是严格区分大小写的，所以area、Area和AREA是不同的标识符，使用标识符时应该使用具有描述性的标识符以提高程序的可读性。

2.3. 关键字与保留字

关键字包含：

break  continue  debugger  do … while  for  function  if … else  return  switch

try … catch  var  case  break  case  continue  default  delete  do  finally  in

instanceof  new  return  this  throw  typeof  void  with

保留字包含：

abstract  Boolean  byte  char  class  const   double  enum  export  extends
final  float  goto  implements  import  int  interface  long  package  private
protected  public  short  static  super  synchronized  throws  transient  volatile

2.4. 分割符与注释

JavaScript每条执行语句以分号”;”分隔，以分号分隔在实际执行过程中不是必需的（去除”;”可以执行），但是在实际编写代码过程中强烈建议加上分号！

var a = 5;
var b = 6;
var c = a + b;

如果有分号分隔，允许在同一行写多条执行语句：

var a = 5;b = 6;c = a + b;
console.debug(a);  //5
console.debug(b);  //6
console.debug(c);  //11

JavaScript注释用于解释JavaScript代码，增强其可读性。JavaScript注释也可以用于在测试替代代码时阻止执行。

JavaScirpt中主要有三种注释类型：

单行注释、多行注释、文档注释

单行注释以//开头，任何位于//与行末之间的文本都会被JavaScript忽略（不会执行）。

多行注释以/*开头，以*/结尾，任何位于/*与*/之间的文本都会被JavaScript忽略。

文档注释以/**开头，以*/结尾，任何位于/**与*/之间的文本都会被JavaScript忽略。

//单行注释
var x = 5;      // 声明 x，为其赋值 5
var y = x + 2;  // 声明 y，为其赋值 x + 2

/*
 多行注释
 下面的代码会改变
 网页中
 id = "myH" 的标题
 以及 id = "myP" 的段落：
*/
document.getElementById("myH").innerHTML = "我的第一张页面";
document.getElementById("myP").innerHTML = "我的第一个段落。";

/**
 文档注释
 一般用于公司签名抬头标明产品文件类型
 */

2.5. 空白字符

JavaScript会忽略多个空格，我们可以在脚本语句中添加多个空格间隔语句代码，以增强程序的可读性。

下面这两行是相等的：

var person = "Bill";
var person="Bill";

在运算符旁边（= + - * /）添加空格是个好习惯：

var x = y + z;

3. JavaScript变量

JavaScript变量是用于存储数据值的一个标识，指向具体的内存地址，保存对应的值或者对象地址值。

变量声明首先要遵循标识符命名原则，并且JavaScript声明变量要使用var关键字，比如：

var name;
console.debug(name);  //打印空字符
console.debug(typeof(name)); //string

声明变量的同时可以为变量赋值，并且在之后改变该变量的值，注意：不能改变变量的类型了，比如：

var name = "张三";
console.debug(name); //张三
console.debug(typeof(name)); //string
name = true;
console.debug(name); //true
console.debug(typeof(name)); //string

此外，JavaScript中还允许不事先声明变量而直接使用，比如：

num = 1234;
console.debug(num); //1234

注意：JavaScript定义变量无需指定变量的类型，任何类型都可以使用var关键字声明。

4. JavaScript数据类型

JavaScript中数据类型包含：字符串型、数值型、布尔型、数组型、对象类型等。

① 字符串型（string）

字符串（或文本字符串）是一串字符，比如：”Bill Gates”。

字符串被引号包围，你可以使用单引号或者双引号：

var carName = "Porsche 911";   // 使用双引号
var carName = 'Porsche 911';   // 使用单引号

也可以在字符串内使用引号，只要这些引号与包围的字符串的引号不匹配：

var answer = "It's alright";             // 双引号内的单引号
var answer = "He is called 'Bill'";    // 双引号内的单引号
var answer = 'He is called "Bill"';    // 单引号内的双引号

② 数值型（number）

JavaScript只有一种数值类型。写数值时用不用小数点均可。

var x1 = 34.00;     // 带小数点
var x2 = 34;        // 不带小数点

超大或超小的数值可以用科学计数法来表示。

var num1 = 123e5;      // 12300000
var num2 = 123e-5;     // 0.00123

③ 布尔型（boolean）

JavaScript布尔值只有两个值：true或者false。

var res = true;
console.debug(res); //true
console.debug(typeof(res)); //boolean

④ 数组型

JavaScript数组用方括号表示，数组项目元素用逗号分隔，如下代码声明了一个名为cars的数组，包含三个元素（汽车品牌）：

var arr = ["Porsche", "Volvo", "BMW"];
console.debug(arr.length); //3
console.debug(arr[0]); //数组索引从0开始，到数组长度-1结束，取值使用arr[索引位置];Porsche
console.debug(arr[arr.length-1]); //BMW

⑤ 对象类型

JavaScript对象是使用花括号来表示。

对象属性是name:value键值对，用逗号分隔开。声明一个对象类型并使用：

//对象类型
var person = {
   firstName : "Bill",
   lastName  : "Gates",
   age       : 62,
   eyeColor  : "blue"
};
//对象取值：使用对象.属性取值
console.debug(person.firstName + " is " + person.age + " years old"); //Bill is 62 years old

4.1. typeof运算符

使用typeof可以确定JavaScript变量的类型：

typeof运算符会返回变量或表达式的类型：

typeof运算符可以返回以下原始类型之一：

string
number
boolean
object
undefined

var name = "张三";
typeof name; //string
typeof 3.14  // 返回 "number"
typeof true // 返回 "boolean"
typeof x    // 返回 "undefined" (假如 x 没有值)
var arr = ["Porsche", "Volvo", "BMW"];
typeof arr; //object

同时在处理复杂数据时，typeof运算符可用返回以下两种类型之一：

function
object

typeof运算符会把对象、数组或null返回object；

typeof运算符会把函数返回function

typeof null     // 返回 "object"
typeof function myFunc(){}  // 返回 "function"

4.2. Undefined/Null/空值

① undefined

在JavaScript中，没有值的变量，即变量初始化没有赋值，那么其值就是undefined。typeof也返回undefined。

var person;
console.debug(person); //返回undefined

② Null

在JavaScript中，null的数据类型是对象。

var person = null;
console.debug(person); //null
console.debug(typeof person); //object

undefined与null的区别：

undefined与null的值相等，但是类型不相等；

typeof undefined       // undefined
typeof null             // object
null === undefined    // false
null == undefined     // true

③ 空值

空值表示字符串变量的值为空字符串，空的字符串既有值也有类型。

var str = "";
console.debug(str); //""
console.debug(typeof str); //string

5. JavaScript函数

JavaScript函数是被设计为执行特定任务的代码块。JavaScript函数会在某代码调用它时被执行。

5.1. JavaScript函数语法

JavaScript函数通过function关键词进行定义，其后是函数名和括号()。

函数名可包含字母、数字、下划线和美元符号（规则与变量名相同）。

具体的示例如下：

function 函数名(…参数args){
    方法体—执行代码
}

函数的作用：避免代码在页面加载的时候就执行了，并且一次定义，多次使用（调用）。

5.2. 函数返回值

JavaScript函数方法体中使用return来返回此函数被调用后的执行结果。在函数中通常会计算出执行结果，返回值会由return返回调用者。而在function函数上无需声明函数返回类型（JS的弱类型的灵活性）。

示例：

function getMsg() {
    var msg = "随便返回一个字符串吧";
    return msg;
}
console.debug(getMsg()); //随便返回一个字符串吧
console.debug(getMsg); //ƒ getMsg() { var msg = "随便返回一个字符串吧"; return msg;}

函数返回调用需要使用:函数名()来调用，而单独使用函数名则会返回整个函数体。

5.3. 局部变量与全局变量

在JavaScript函数中声明的变量，会成为函数的局部变量，局部变量只能在函数内部访问。

由于局部变量只能被其函数识别，因此可以在不同函数中使用相同名称的变量。

局部变量在函数开始时创建，在函数完成时被删除。

全局变量是定义在函数体外部的变量，与局部变量无关，可以全局使用，但是如果在函数体内部的局部变量与全局变量名相同，那么在该函数被调用后可能会改变该全局变量的值。

示例如下：

/**
* 1.JS中的全局与局部变量的定义
*/
var str = "全局变量";

function showStr() {
   str = "局部变量";
   console.debug(str);
}

showStr();  //局部变量
console.debug(str); //局部变量，str整体的值进入到showStr()方法中被改变

console.debug("================分割线==================")

var str2 = "全局变量2";

function showStr2() {
   var str2 = "局部变量2";
   console.debug(str2);
}

showStr2();  //局部变量2
console.debug(str2); //全局变量2,定义在showStr2()函数中的str2变量已经执行完毕被销毁

6. 更多

本节JavaScript(1) – JS入门主要针对JS初学知识体系中常用知识进行汇总，省略了JS输出打印、JS运算符、JS流程控制部分的说明（这部分比较简单，和Java语言也大体类型），简单知识就不再一一累述，学习更多完整的JavaScript入门知识体系请详见W3shool网址，本部分知识参考W3school网址：

https://www.w3school.com.cn/js/index.asp

学习章节：JS教程 —— JS函数部分，后续将陆续汇总更新更多JavaScript章节自我学习汇总内容。