JavaScript简介

js是运行在客户端的脚本（Script）语言。

js产生最初为了表单动态校验（密码强度检测），后来可以用来做网页特效，服务端开发，桌面程序，App，物联网，游戏开发。

浏览器分为渲染引擎和js引擎，渲染引擎可以用来解析html和css，js引擎用来读取js代码并处理后执行。

JS组成

js组成分为三部分：

ECMAScript：JavaScript语法。

DOM：页面文档对象模型。（可以对页面上各种元素进行大小位置颜色等操作）

BOM：浏览器对象模型。（可以操作浏览器窗口：弹出框、控制浏览器跳转、获取分辨率等）

JS位置

三种书写位置：行内、内嵌、外部。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 内嵌式js -->
    <script>
        alert('你好！');
    </script>
</head>
<body>
    <!-- 行内式js 直接写到元素内部 -->
    <input type="button" value="唐伯虎" onclick="alert('秋香')">
</body>
</html>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 外部js 标签中间不加代码 -->
    <script src="my.js"></script>
</head>
<body>
</body>
</html>

1	alert('你好！');

html里常用双引号，js里常用单引号。

JS注释

<script>
    // 单行注释
    /*  这是
        多行
        注释 */
</script>

JS输入输出

<script>
    // 输入框
    prompt('请输入你的年龄：');
    // 弹出警示框
    alert('欢迎！');
    // 控制台输出
    console.log('打开F12就能找到了。')
</script>

变量

变量就是一个装东西的盒子，是用来存放数据的容器，通过变量名获取数据，以及修改数据。

声明赋值变量

1
2
3

var age;
age = 10;
console.log(age);

第一行的var为js关键字，用来声明变量，age为变量名。

第二行对其进行赋值，把值存入变量。

第三行输出结果。

1 2	var name; console.log(name);

只声明不给值，输出 undefined。

不声明直接使用变量会报错。

1 2	name = 'Jack'; console.log(name);

不声明直接赋值使用也可以，不过不推荐。

变量的初始化

1 2	var name = 'Jack'; console.log(name);

直接对声明的变量进行赋值。

var name = 'Jack';
console.log(name);
name = 'Mike';
console.log(name);

后赋的值覆盖前面的值。

1
2
3

var name = 'Jack',
    age = 18,
    home = 'UK';

同时声明多个变量，一个var，变量名用逗号分开。

js的变量数据类型是只有在程序运行过程中根据等号右边的值来确定的，运行完毕后，变量就确定了变量类型。

js为动态语言，变量的数据类型是可以变化的：

1
2
3

var x = 10;
x = 'Jack'
console.log(x)

prompt存储变量

1 2	var myname = prompt('请输入你的名字'); alert(myname);

变量命名规范

由字母数字下划线美元符号四种字符组成，变量区分大小写，但是不能用数字开头，不能用关键字var等来作为变量名。

name在浏览器中有特殊含义，推荐不要使用name作为变量名。

单词命名建议使用驼峰命名法：首字母小写，后面单词首字母大写。（myFirstName）

案例：交换赋值

var apple1 = '青苹果',
    apple2 = '红苹果',
    temp = apple1;
apple1 = apple2;
apple2 = temp;
console.log(apple1)//红苹果
console.log(apple2)//青苹果

数据类型

在计算机中不同的数据所占的存储空间是不同的，为了把数据分成所需内存大小不同的数据需要定义不同的数据类型。

JS属于弱类型或者动态语言，不用提前声明变量类型，运行程序时类型会被自动确定。根据等号右边的值来确定。

JS具有动态类型，同一个变量可以设为不同类型。

数字型Number

数字型包含整型和浮点型，默认值为0。

进制：

var num = 10;
var PI = 3.14;
var num1 = 0o10;  //八进制，o可以省略
var num2 = 012;  //八进制
var num3 = 0xa;  //十六进制
console.log(num1);  // 8
console.log(num2);  // 10
console.log(num3);  // 10

最大最小值：

1 2	console.log(Number.MAX_VALUE); console.log(Number.MIN_VALUE);

无穷大和无穷小：

1 2	console.log(Number.MAX_VALUE * 2); // 比最大值还大，无穷大。 console.log(- Number.MAX_VALUE * 2); // 比最小值还小，无穷小。

NaN非数字：

1	console.log("bill" - 100); // NaN

isNaN()返回布尔值判断非数字：

1 2	console.log(isNaN(12)); // false console.log(isNaN("red")); // true

字符串型String

在HTML标签里用引号为双引号，在JS里推荐使用单引号。

嵌套引号：

1	var str = 'Hello!"helloWorld."';

转义字符：

\n换行符，n是newline。

\\斜杠。

\'\"单引号和双引号。

\tTab缩进。

\b空格blank。

字符串长度length：

1 2	var str = 'my name is andy'; console.log(str.length);// 15

字符串拼接：数值相加，字符相连。

console.log('Hello'+'World!');  // HelloWorld!
console.log('Hello'+123); // Hello123
console.log(12+12);  // 24
console.log('12'+12);  // 1212
var age = 18;
console.log('我今年'+age+'岁');

布尔型Boolean

var flag = true;
var flag1 = false;
console.log(flag+1); // 2
console.log(flag1+1); // 1

undefind和null

变量声明未赋值，其为未定义的数据类型undefind：

var apple;
console.log(apple);  // undefind
console.log(apple+'apple');  // undefindapple
console.log(apple+1);  // NaN

声明变量为null，里面存的值为空。

typeof

typeof可以判断数据类型：

var num = 10;
console.log(typeof num); // number
var str = 'pink';
console.log(typeof str); // string
var flag = true;
console.log(typeof flag); // boolean
var vari = undefined;
console.log(typeof vari); // undefined
var timer = null;
console.log(typeof timer); // object

JavaScript学习日记1