文章目录

JavaScript入门

为什么学习JavaScript
JS与HTML代码的结合
注释
输出

数据类型

typeof操作符
null
undefined

对象
函数
事件
字符串
运算符
条件语句
循环语句
类型转换
严格模式

JavaScript入门

为什么学习JavaScript

JavaScript： web 开发人员必须学习的 3 门语言中的一门，

HTML 定义了网页的内容
CSS 描述了网页的布局
JavaScript 网页的行为

JavaScript 是一种轻量级的编程语言。

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

JS与HTML代码的结合

HTML 中的脚本必须位于 <script> 与 </script>标签之间。

脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。

那些老旧的实例可能会在 <script> 标签中使用 type="text/javascript"。现在已经不必这样做了，

JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。

alert("Hello JS");

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/common.js"></script>
	</head>
	<body>
		<!-- JS与HTML结合的方式 -->
		<!-- 
		 1、在HTML页面提供一对<script>标签，把JS代码写在这对标签内部；（位置不固定，但是加载顺序有区别）
		 2、将JS代码单独抽取到一个文件中，通过<script>标签引入外部的.js文件；
		 -->
		 <!-- <script>
			 alert("Hello JS");
		 </script> -->
	</body>
</html>

注释

JavaScript代码的注释方式和Java代码的注释方式一致。

输出

JavaScript 可以通过不同的方式来输出数据：

使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。

数据类型

值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。

引用数据类型：对象(Object)、数组(Array)、函数(Function)。

**注：**Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值。

var x;
document.write(typeof x + "<br>");
//undefined
var x = 5;
document.write(typeof x + "<br>");
//number
var x = "John";
document.write(typeof x + "<br>");
//string

/* 对于字符串变量，可以使用双引号，也可以使用单引号，在JS中没有字符与字符串的区别，统一划分为字符串string类型 */
var carname = "audi";
document.write(carname, "<br>");
//audi
//document.write(String[])
var carname = 'audi';
document.write(carname, "<br>");
//audi

var answer="He is called 'Johnny'";
document.write(answer + "<br>");
//He is called 'Johnny'
var answer='He is called "Johnny"';
document.write(answer + "<br>");
//He is called "Johnny"

/* 对于数值型变量，在JavaScript只有一种类型，不区分小数和整数，统一用number类型表示 */
var x1 = 34;
document.write(typeof x1 + "<br>");
//number
var x2 = 3.14;
document.write(typeof x2, "<br>");
//number

/* 极大或者极小的数可以使用科学计数法 */
var y1 = 123e5;
document.write(y1 + "&nbsp;");
//12300000
var y2 = 123e-5;
document.write(y2, "<br>");
//0.00123

/* 布尔类型，只有true/false，和Java一致 */
var x = true;
document.write(typeof x + "&nbsp");
//boolean
var y = false;
document.write(typeof y, "<br>");
//boolean

/* 数组类型 */
//1、
var brands = new Array();
brands[0] = "Adidas";
brands[1] = "Nike";
brands[2] = "Converse";
document.write(brands, "<br>");
//Adidas,Nike,Converse
document.write(typeof brands, "<br>");
//object

//2、
var hobbies = new Array('running', 'singing', 12, false);
//Java的数组必须是相同类型的对象，而JS中不需要这样。
//取数组下标如果越界了会显示为undefined。
document.write(hobbies, "<br>");
//running,singing,12,false
document.write(typeof hobbies, "<br>");
//object


//3、
var cities = ["北京", "上海", "武汉", "苏州", "杭州"];
document.write(cities, "<br>");
//北京,上海,武汉,苏州,杭州
document.write(typeof cities, "<br>");
//object

/* 对象类型 */
/* 对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔： */
var person = {
    id: "001",
    name: "张三",
    age: 23
};
document.write(person.id, "&nbsp;", person.name, "&nbsp;", person.age, "<br>");
//001 张三 23
document.write(typeof person);
//object

/* Undefined:表示这个值不含有任何变量 */
var person;
document.write(person + "<br>");
//undefined

var car = "Volvo";
document.write(car + "<br>");
//Volvo
var car = null;
//将变量置空
document.write(car + "<br>");
//null
document.write(typeof car);
//object

typeof操作符

你可以使用 typeof 操作符来检测变量的数据类型。

typeof "John"                 // 返回 string
typeof 3.14                   // 返回 number
typeof NaN                    // 返回 number
typeof false                  // 返回 boolean
typeof [1,2,3,4]              // 返回 object
typeof {name:'John', age:34}  // 返回 object
typeof new Date()             // 返回 object
typeof function () {}         // 返回 function
typeof myCar                  // 返回 undefined (如果 myCar 没有声明)
typeof null                   // 返回 object

在JavaScript中，数组是一种特殊的对象类型。因此 typeof [1,2,3,4] 返回 object。

请注意：

NaN 的数据类型是 number
数组(Array)的数据类型是 object
日期(Date)的数据类型为 object
null 的数据类型是 object
未定义变量的数据类型为 undefined

null

在 JavaScript 中 null 表示 “什么都没有”。

null是一个只有一个值的特殊类型。表示一个空对象引用。

用 typeof 检测 null 返回是object。

你可以设置为 null 来清空对象:

var person = null;           // 值为 null(空), 但类型为对象

你可以设置为 undefined 来清空对象:

var person = undefined;     // 值为 undefined, 类型为 undefined

undefined

在 JavaScript 中, undefined 是一个没有设置值的变量。

typeof 一个没有值的变量会返回 undefined。

var person;                  // 值为 undefined(空), 类型是undefined

任何变量都可以通过设置值为 undefined 来清空。类型为 undefined.

person = undefined;          // 值为 undefined, 类型是undefined

undefined和null的区别：

null 和 undefined 的值相等，但类型不等：

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

对象

JavaScript对象是属性和方法的容器。

var person = {
    //对象属性
    //键值对通常写法为 name : value (键与值以冒号分割)。
    name: "张三",
    age: 23,
    gender: '男',
    married: false,

    //对象方法
    //methodName : function() { code lines }
    //意义：属性名/方法名 : function() {} 
    fullMsg: function() {
        return this.name + "-" + this.age + "-" + this.gender;
    }
};
/* 对象是{}大括号，数组是[]中括号 */

/* 访问对象属性和对象方法 */
document.write(person.name + "<br>");
//张三
document.write(person.fullMsg() + "<br>");
//张三-23-男


//访问对象属性fullMsg
document.write(person.fullMsg)
//function() { return this.name + "-" + this.age + "-" + this.gender; }

函数

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

函数就是包裹在花括号中的代码块，前面使用了关键词 function：

function functionname() {
    //code
}

空参的函数：

<body>
    <button onclick="myfunction()">点我</button>
    <script>
        function myfunction() {
            alert("Hello JS.");
        }
    </script>
</body>

事件驱动，调用函数执行。

带参数的函数：

<body>
    <button onclick="myfunction('张三', 'Doctor')">点我</button>
    <script>
        function myfunction(name, job) {
            alert("Congratulation " + name + " get " + job);
        }
    </script>
</body>

带有返回值的函数：

<body>
    <p>本例调用的函数会执行一个计算，然后返回结果：</p>
    <p id="demo"></p>
    <script>
        function mul(a, b) {
            return a * b;
        }
        document.getElementById("demo").innerHTML = mul(3, 4);
    </script>
</body>

事件

HTML 事件是发生在 HTML 元素上的事情。

HTML 事件可以是浏览器行为，也可以是用户行为。

以下是 HTML 事件的实例：

HTML 页面完成加载
HTML input 字段改变时
HTML 按钮被点击

通常，当事件发生时，你可以做些事情。

<body>
    <!-- 1、在""里写JS代码 -->
    <button onclick="window.document.getElementById('demo').innerHTML = new Date()">现在的时间是？</button>
    <p id="demo"></p>

    <!-- 2、改变自己的内容 -->
    <button onclick="this.innerHTML = Date()">现在的时间是？</button>

    <br><br><br>

    <!-- 3、调用JS中的函数完成 -->
    <button onclick="displayDate()">现在的时间是？</button>
    <p id="test"></p>
    <script>
        function displayDate() {
            window.document.getElementById("test").innerHTML = Date();
        }
    </script>
</body>

字符串

1、你可以使用索引位置来访问字符串中的每个字符：

字符串的索引从 0 开始，这意味着第一个字符索引值为 [0],第二个为 [1], 以此类推。

2、你可以在字符串中使用引号，字符串中的引号不要与字符串的引号相同:

var answer = "It's alright";
var answer = "He is called 'Johnny'";
var answer = 'He is called "Johnny"';

你也可以在字符串添加转义字符来使用引号：

var x = 'It\'s alright';
var y = "He is called \"Johnny\"";

3、字符串长度

可以使用内置属性 length 来计算字符串的长度：

4、字符串可以是对象

通常， JavaScript 字符串是原始值，可以使用字符创建： var firstName = "John"

但我们也可以使用 new 关键字将字符串定义为一个对象： var firstName = new String(“John”)

var x = "John";
var y = new String("John");
typeof x // 返回 String
typeof y // 返回 Object

var x = "John";             
var y = new String("John");
(x == y) // 结果为true
(x === y) // 结果为 false，因为 x 是字符串，y 是对象
// === 为绝对相等，即数据类型与值都必须相等。

运算符

1、算术运算符

加+、减-、乘*、除/、取余%、自增++、自减–

2、赋值运算符

等于=、加等+=、减等-=、乘等*=、除等/=、取余等%=

3、+用于拼接字符串

var str = "Hello" + " " + "World";

4、字符串和数字相加

两个数字相加，返回数字相加的和，如果数字与字符串相加，返回字符串，如下实例：

x=5+5;
// 10
y="5"+5;
// 55
z="Hello"+5;
// Hello5

5、比较运算符

比较运算符的返回结果为boolean类型。

等于==：值相等

绝对等于===：值与类型均相等

不等于!=：值不等

不绝对等于!==：值与类型有一个不等，或者都不等

5 == '5'
// true
5 === '5'
// false
5 != '5'
// false
5 !== '5'
// true

大于、小于、大于等于、小于等于

6、逻辑运算符

逻辑运算符的返回结果为boolean类型。

与：&&

或：||

非：!

7、条件运算符

variablename = (condition) ? value1 : value2;

条件语句

在 JavaScript 中，我们可使用以下条件语句：

if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
if…else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
if…else if…else 语句- 使用该语句来选择多个代码块之一来执行
switch 语句 - 使用该语句来选择多个代码块之一来执行

if 语句

只有当指定条件为 true 时，该语句才会执行代码。

if (condition) {
    // 当条件为 true 时执行的代码
}

if-else语句

请使用 if…else 语句在条件为 true 时执行代码，在条件为 false 时执行其他代码。

if (condition) {
    // 当条件为 true 时执行的代码
} else {
    // 当条件不为 true 时执行的代码
}

if-else if-else语句

使用 if…else if…else 语句来选择多个代码块之一来执行。

if (condition1) {
    // 当条件 1 为 true 时执行的代码
} else if (condition2) {
    // 当条件 2 为 true 时执行的代码
} else {
    // 当条件 1 和 条件 2 都不为 true 时执行的代码
}

switch语句

请使用 switch 语句来选择要执行的多个代码块之一。

switch(n) {
    case 1:
        // 执行代码块 1
        break;
    case 2:
        // 执行代码块 2
        break;
    default:
        // 与 case 1 和 case 2 不同时执行的代码
}

循环语句

不同类型的循环

JavaScript 支持不同类型的循环：

for - 循环代码块一定的次数
for/in - 循环遍历对象的属性
while - 当指定的条件为 true 时循环指定的代码块
do/while - 同样当指定的条件为 true 时循环指定的代码块

for语句

for (语句 1; 语句 2; 语句 3) {
    被执行的代码块
}

for in语句

var person = {
    firstname: "张",
    lastname: "三",
    age: 23,
    gender: '男'
};
var e;
/* 作为数组下标，并不是元素 */
var text = "";
for (e in person) {
    text += person[e];
}
document.write(text);

while语句

while (条件) {
    // 需要执行的代码
}

do…while语句

do
{
    // 需要执行的代码
}
while (条件);

break 语句用于跳出本层循环。

continue 用于跳过循环中的一个迭代，跳出本次循环。

类型转换

Number() 转换为数字， String() 转换为字符串， Boolean() 转化为布尔值。

JavaScript 变量可以转换为新变量或其他数据类型：

通过使用 JavaScript 函数
通过 JavaScript 自身自动转换

1、使用JavaScript函数

/* 数字转为字符串类型 */
var str = String(123);
/* 公共方法String() */
document.write(typeof str, "<br>");
//string

/* 布尔类型转为字符串类型 */
var bool = String(true);
document.write(typeof bool, "<br>");
//string

/* 字符串转为数字 */
/* 公共方法Number() */
/* 
   字符串包含数字(如 "3.14") 转换为数字 (如 3.14).
   空字符串转换为 0。
   其他的字符串会转换为 NaN (不是个数字)。
*/
var num = Number(3.14);
document.write(typeof num, "<br>");
//number

/* 布尔值转为数字 */
var x = Number(true);
document.write(typeof x, "<br>");
//number

var y = Number(false);
document.write(typeof y, "<br>");
//number

2、通过JavaScript自动转换

当 JavaScript 尝试操作一个 “错误” 的数据类型时，会自动转换为 “正确” 的数据类型。

 /* 一元运算符+ */
var x = "5";
var y = +x;
console.log(typeof y);
//number

var x = "x";
var y = +x;
console.log(y);
//NaN
// 如果变量不能转换，它仍然会是一个数字，但值为 NaN (不是一个数字):
console.log(typeof NaN);
//number

var flag = false;
console.log(flag + 2);
//2
//false -> 0 , true -> 1

console.log(1 * "100" + 200 + 1 * "200");
// 100 + 200 + 200 = 500

/* 数字类型转布尔类型，0转为false，非0转为true */
/* 字符串类型转布尔类型，空串转为false，非空串转为true */
/* NaN、Undefined类型转布尔类型，转为false */
/* 对象类型转布尔类型，转为true，null转布尔类型，转为false */
/* NaN参与数学运算，结果都为NaN */
/* NaN != NaN 结果为true，可以使用isNaN()方法来判断 */
console.log(isNaN(+"x"));
// true

严格模式

"use strict" 指令在 JavaScript 1.8.5 (ECMAScript5) 中新增。

目的是指定代码在严格条件下执行。严格模式下你不能使用未声明的变量。

"use strict" 指令只允许出现在脚本或函数的开头。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        "use strict"

        x = 20;

        /* 
        Uncaught ReferenceError: x is not defined
            at 13-严格模式.html:12
         */
    </script>
</body>
</html>

3.1、JavaScript入门