javascript基础（一）
JavaScript简介
JavaScript起源
早年间，人们上网都是使用速度很 🐌 的”猫“（调制调解器）上网。想象一下这样一个场景：你好不容易填写完了注册表单，点击【提交】按钮，然后等待 30 秒，最终服务器返回的消息说密码的长度不能少于 6 位，让你重新填写整个表单，这时你是不是很想 😭，这该是多么糟糕的用户体验呀。
为了解决此类问题，当时走在技术革新最前沿的网景（Netscape）公司，决定着手开发一种客户端语言，用来处理这种简单的表单验证。
当时就职于网景公司的 布兰登.艾奇 负责该项目的实施，开始着手为计划于1995年2月发布的Netscape Navigator 2 浏览器开发一种名为 LiveScript 的脚本语言。为了赶在发布日期前完成 LiveScript 的开发，Netscape 与 Sun 公司建立了一个开发联盟，共同开发 LiveScript。在 NetScape Navigator 2 发布前夕，网景为了更好地推广这个脚本语言（利用 Java 语言的知名度），临时把 LiveScript 改名为 JavaScript，实际上两者没有任何关系。
浏览器战争
JavaScript 1.0 发布之后获得了巨大的成功，Netscape 随即在 Netscape Navigator 3 中又发布了JavaScript 1.1。与此同时，微软公司在推出 IE 3 的时候也发布了自己的脚本语言，JScript。JScript 和 JavaScript 差异很大，互不兼容，编程人员不得不痛苦地为两种浏览器分别编写脚本。 例如，你想获得 id 属性值为 myid 元素的 left 位置，并把它赋值给变量 xpos ，那么在 Netscape Navigator 4 浏览器里必须这样写：
var xpos = document.layers['myid'].left;
而在 IE 4 浏览器中，需要这样写：
var xpos = document.all['myid'].leftpos;
制定标准
1997年，网景公司给欧洲计算机制造商协会（ECMA, European Computer Manufacturers Association）提了一个建议，以 JavaScript 1.1 为蓝本，由该协会主导制定了一套 JavaScript 语言开发规范。于是 ECMAScript 诞生了，这是一个国际标准化的 JavaScript 开发标准，所有浏览器厂商在开发浏览器脚本语言时，都要准守这套规范。这样的话，编程人员在写代码时只要写一次，就可以在所有的浏览器上执行了。在新的规范下，操作DOM元素的的语法就可以统一写成这样：
var xpos = document.getElementById('myid').style.left;
使用JavaScript
行内代码
使用 javascript: 前缀构建执行 JavaScript 代码的 URL。
所有可以设置 URL 的地方都可以使用这种以 javascript: 作为前缀的 URL，当用户触发该 URL 时，javascript: 之后的 JS 代码就会获得执行。
<a href="javascript:alert('Hello JavaScript')">点我</a>
将 JS 代码写到元素的事件属性值中
<div onclick="window.alert('Hello JavaScript!')"></div>
这两种方式只适用于代码量比较少的时候，如果代码比较多，建议使用内部代码或写到单独的 JS 文件中。
内部代码
如果页面需要中包含大量的 JavaScript 代码，则建议将这些JavaScript脚本放在 <script> 标签中。<script> 元素即可作为 <head> 的子元素，也可作为 <body> 的子元素。
<script type="text/javascript">
</script>
单独JS文件
为了让 HTML 页面和 JavaScript 脚本更好地分离，我们可以将 JavaScript 脚本单独保存在一个 .js 文件中，HTML 页面导入该 .js 文件即可。
<script src="test.js" type="text/javascript"></script>
理解Window对象
在页签浏览器（比如 Chrome）中，每个页签具有自己的 window 对象。也就是说，同一个窗口的页签之间不会共享一个 window 对象。window 对象给我们提供了一些方法、属性和事件。
对话框
window 提供的几个关于对话框的方法。
// 警告框
alert('Hello');
// 确认框
confirm('确认退出吗？');
// 输入框
prompt('请输入密码？');
在控制台输出信息
如下是几个可以在 window 控制台输出信息的方法。
console.log('日志信息');
console.error('错误信息');
console.warn('警告信息');
console.info('普通信息');
console.debug('调试信息');
JavaScript语法
标识符
所谓标识符，就是指变量、函数、属性，或者函数参数的名字。
标识符的组合规则：
- 第一个字符必须是一个字母、下划线（_）或一个美元符号（$）
- 其他字符可以是字母、下划线、美元符号或数字。
只能由英文字母、数字、下划线（_）、美元符号（$）构成，并且不能以数字开头，不能使用 ECMAScript 的关键字和保留字。
标识符的书写规范：
推荐采用第一个单词的首字母小写，其余单词首字母大写的方式，例如：firstName、getUserInfo。
大小写敏感
JS 中的标识符是区分大小写的，也就是说变量 name 和 Name 是两个不同的标识符。
注释
// 单行注释
/*
这是内容比较多的，
多行注释。
*/
/* 多行注释 /* 不能嵌套使用， */ 否则会导致语法错误！ */
关键字
这些标识符已经被 ECMAScript 收录（使用）了，它们被赋予特殊的意义（功能）了，所有我们不能使用它们作为标识符。
break export super
case extends switch
catch finally this
class for throw
const function try
continue if typeof
debugger import var
default in void
delete instanceof while
do new with
else return yield
保留字
虽然这些标识符并没有被 ECMAScript 收录，但是将来的某个时候，可能会被ECMAScript 收录，变成关键字，也就是说，这些标识符已经被预定了，因此我们也不能使用它们。
implements package public await
interface private static
let protected enum
除此之外，字面量
null，true和false也不能用作标识符。
代码规范
1、JavaScript对换行、缩进、空格不敏感。也就是说：
<script type="text/javascript">
alert("今天蓝天白云");
alert("哈哈哈，我很高兴");
</script>
等价于
<script type="text/javascript">
alert("今天蓝天白云");
alert("哈哈哈，我很高兴");
</script>
等价于：
<script type="text/javascript">
alert("今天蓝天白云");alert("哈哈哈，我很高兴");
</script>
2、每一条语句末尾要加上分号，虽然分号不是必须加的，但是为了程序今后要压缩，如果不加分号，压缩之后将不能运行了。
比如，你不加分号，今后我们的程序一旦压缩，就不能使用了：
<script type="text/javascript">
alert("今天蓝天白云")alert("哈哈哈，我很高兴")
</script>
3、所有的符号，都必须是是英文的。比如括号、引号、分号。
变量
定义变量
要声明一个变量你需要首先使用关键字 var ，然后输入任何你想要的名称，但是要符合标识符的命名规则：
var myVariable;
定义一个变量之后，你可以赋予它一个值，倘如只声明而不赋值的话，则默认值为 undefined：
myVariable = 'Bob';
你也可以将声明和赋值操作写在同一行：
var myVariable = 'Bob';
甚至可以一次定义多个变量，变量之间以逗号分隔，缩进和换行不是必须的，只是为了提高代码的可读性：
var myname = "张三",
myage = 27,
mygender = "male";
在给变量赋值之后，你可以更改这个变量的值：
var myVariable = 'Bob';
myVariable = 'Steve';
变量声明提升
变量被定义之后，你可以通过变量名称读取变量的值：
var myVariable = 'Hello JavaScript';
console.log(myVariable);
但是，在变量定义代码之前，通过变量名称读取变量的值，会出现什么情况呢：
console.log(myVariable); // undefined
var myVariable = 'Hello JavaScript';
由于变量的声明会被提升到当前作用域的最顶端，而赋值并不会被提升，因此上面的代码输出 undefined。可以使用下面的代码解释：
var myVariable;
console.log(myVariable); // undefined
myVariable = 'Hello JavaScript';
数据类型
动态类型
JavaScript 是一种弱类型或者说动态语言。这意味着你不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。这也意味着你可以使用同一个变量保存不同类型的数据：
// 在其他编程语言中，变量的空间所能存放的数据类型是事先规定好的
// 比如使用 int 关键字声明的变量空间中只能存放整数
int num = 123;
string name = "李四"
float price = 2.98
// 然而，JS 变量的内存空间中可以存放任意类型的数据
var foo = 42; // 数字
foo = "bar"; // 字符串
foo = true; // 逻辑真
数据类型
最新的 ECMAScript 标准定义了 7 种数据类型:
- 6 种原始类型:
- Boolean
- Null
- Undefined
- Number
- String
- Symbol (ECMAScript 6 新定义)
- 和 Object
Number -- 整数和浮点数（小数）。
String -- 使用单引号或双引号括起来的值，比如：'Hello World!'。
Boolean -- true 和 false 。
Undefined -- 任何一个只声明而没有赋值的变量都会被隐式的赋值为 undefined 。
Null -- 只有一个 null ，指向一个空值的关键字。
Undefined类型
Undefined 类型只有一个值，即 undefined。任何一个只声明而没有赋值的变量都会被隐式的
(自动的)赋值为 undefined 。例如：
var message;
console.log(message); //"undefined"
Null类型
Null 类型也只有一个值，即 null。null 是表示缺少的标识，指示变量未指向任何对象。把 null 作为尚未创建的对象，也许更好理解。这也正是使用 typeof 操作符检测 null 值时会返回 "object" 的原因，如下所示：
var myphone = null;
myphone = {
brand: '小米',
number: '13526471107'
};
Boolean 类型
布尔表示一个逻辑实体，可以有两个值：true 和 false。
// true: 男 false: 女
var gender = false;
Number类型
根据 ECMAScript 标准，JavaScript 中只有一种数字类型：基于 IEEE 754 标准的双精度 64 位二进制格式的值（-(263 -1) 到 263 -1）。它并没有为整数给出一种特定的类型。除了能够表示浮点数外，还有一些带符号的值：+Infinity，-Infinity 和 NaN (非数值，Not a Number)。
var age = 20;
var price = 2.98;
String类型
JavaScript 的字符串类型用于表示文本数据。
// 声明字符串时，可使用双引号，也可使用单引号，但是推荐使用单引号。
var myname = '刘婉真';
var mygender = "女";
Object类型
在计算机科学中, 对象是指内存中的可以被 [标识符] 引用的一块区域。
在 Javascript 里，对象可以被看作是一组属性的集合。属性包含一个名字和一个值，如下所示：
var myVariable = {
myname: '李四',
myage: 20,
mygender: true
}
var myphone = null;
检测数据类型
我们可以使用 JS 提供的操作符 typeof 检测数据的类型，如下所示：
var myName = '魏素';
var myage = 18;
var married = false;
var mycar = null;
var myBoyFriend;
var myphone = {
brand: 'vivo',
number: 13624567789,
color: '土豪金'
};
console.log(typeof myName); // 'string'
console.log(typeof myage); // 'number'
console.log(typeof married); // 'boolean'
console.log(typeof mycar); // 'object'
console.log(typeof myBoyFriend); // 'undefined'
console.log(typeof myphone); // 'object'
数据类型转换
强制转换：编程人员编写代码强制对数据进行转换。
隐式转换：不是编程人员刻意去转换的，而是浏览器（JS 解析引擎）帮我们自动转换的。
其他类型转成Number
- 使用
Number()方法将其他类型的数据转换成 Number 类型
console.log(Number('abc')); // NaN
console.log(Number('123.456')); // 123.456
console.log(Number('789')); // 789
console.log(Number('123abc')); // NaN
console.log(Number('abc123')); // NaN
console.log(Number(null)); // 0
console.log(Number(true)); // 1
console.log(Number(false)); // 0
console.log(Number(undefined)); // NaN
console.log(Number({myName: '李四'})); // NaN
将数字类型的字符串，最后的结果保留原数据。
如果是非数字类型的字符串的话，直接转换成 NaN。
- 使用
parseInt()方法将其他类型的数据转换成 Number 类型
将数字类型的字符串通过该方法转换后，只保留数字的整数部分，不会进行四舍五入运算。
var num = '123.1243'
num = parseInt(num);
alert(num);
alert(typeof num);
非数字类型的字符串转换后的结果 为NaN。
如果数字后是非数字的字符，也可以转换成功
- 使用
parseFloat()方法将其他类型的数据转换成 Number 类型
结果保留原数据，不会对数字进行四舍五入运算。
如果在数字后加上非数字的字符，也可以转换成功
其他类型转成String
使用 String() 方法将其他类型的数据转换成 String 类型。
console.log(String(123.456)); // '123.456'
console.log(String(null)); // 'null'
console.log(String(true)); // 'true'
console.log(String(undefined)); // 'undefined'
console.log(String({myName: '李四'})); // '[object Object]'
使用加号操作符（+）把它与一个空字符串（""）相加。
a + ""
其他类型转成Boolean
我们可以使用 Boolean( ) 方法将其他类型的数据转换成 Boolean 类型。
下面这些值将被转换成 false
- false
- undefined
- null
- 0
- NaN
- ''
console.log(Boolean(false)); // false
console.log(Boolean(undefined)); // false
console.log(Boolean(null)); // false
console.log(Boolean(0)); // false
console.log(Boolean(NaN)); // false
console.log(Boolean('')); // false
下面这些值将被转换成 true。
- 非空字符串
- 非零数字
- 对象
- true
console.log(Boolean(true)); // true
console.log(Boolean(9527)); // true
console.log(Boolean({myname: 'Bob'})); // true
console.log(Boolean('abcd')); // true
操作符
算术运算符
算数运算符和我们在数学中的学的一样，主要用于数值的运算，JavaScript中提供的算数运算符有下面这些：
| 操作符 | 作用 |
|---|---|
| + | 加 |
| - | 减 |
| * | 乘 |
| / | 除（斜杠） |
| % | 取余数 |
| ( ) | 括号 |
赋值运算符
简单的赋值操作符由等号（=）表示，它的作用就是把右侧的值赋值给左侧的变量，如下所示：
var num = 7; //刚开始班里有7个人
如果在等号（=）前面再添加算术运算符的话，就可以完成复合赋值操作。如下所示：
var num = 7; //刚开始班里的人数
num = num + 9 //后来有来了9个
第二行代码可以用一个复合赋值来代替：
var num = 7; //刚开始班里的人数
num += 9 //后来有来了9个
每个算术操作符都有对应的复合赋值操作符，如下表所示：
| 操作 | 普通写法 | 简写形式 |
|---|---|---|
| 赋值 | var age = 20 | var age = 20 |
| 加法赋值 | age =age + 1 | age += 1 |
| 减法赋值 | age = age - 1 | age -= 1 |
| 乘法赋值 | age = age * 2 | age *= 2 |
| 除法赋值 | age = age / 2 | age /=2 |
| 求余赋值 | age = age % 3 | age %= 3 |
浙公网安备 33010602011771号