JavaScript 基础01-基本语法

发表于 分类于 阅读次数：

web 开发

  • 前端
    • HTML 数据展示,负责内容
    • CSS 页面美化, 负责样式
    • JS 页面特效,与用户的交互.负责行为
  • 后端
    • PHP
    • JAVA
    • python
    • asp.net
    • node.js
    • Ruby
    • Go

javascript 简介

什么是 javascript

概念： javascript是 基于对象 和 事件驱动 并具有相对安全性的 客户端 脚本语言

  • 发展简史
    1. Nombas 公司 1992 年开发 嵌入式脚本语言 C– 后改名 ScriptEase
    2. Netscape公司 1995 年发布 LiveScript 后改名 javascript1.0
    3. 三足鼎立 NetScape 推出 javascript 1.1后, Microsoft 推出 Jscript , 加上 ScriptEase
    4. 标准化 1997 javascript 1.1 作为草案 提交给 ECMA（欧洲计算机制造商协会） .
      由来自 Netscape、Sun、微软、Borland 和其他一些对脚本编程感兴趣的公司的程序员
      组成的 TC39 锤炼出了 ECMA-262,该标准定义了名为 ECMAScript 的全新脚本语言.
  • 组成
    • 核心（ECMAScript）
    • 文档对象模型（DOM）
    • 浏览器对象模型（BOM）
  • 客户端浏览器上执行的脚本 JavaScript VBScript…
  • ECMAScript核心: JavaScript ActionScript ScriptEase
  • 扩展衍生：node.js / phonegap框架 / vue.js / angular.js / React …
  • 浏览器
    • IE IE6 7 8 / IE9+
    • 非IE Chrome firefox opera Safari …

浏览器占比统计: http://tongji.baidu.com/data/browser

  • javascript 的特点
    • javascript 是一种脚本编程语言,也是一种解释性语言
    • javascript 的语法结构与C++、java 十分类似
    • javascript 是一种基于对象的语言
    • javascript 具有跨平台性.
    • 安全性与简单性
    • 基于对象（真正的对象 封装 继承 多态）
  • java 与 javascript 的关系: 雷锋 和 雷峰塔
  • javascript 优点与局限
    • 优点
      • javascript 在客户端运行,节省服务器资源
      • 方便的操控页面中的各个对象,使网页更加友好可控
      • 使多种任务仅在客户端就可以完成而不需要网络和服务器的参与,从而支持分布式的运算和处理
    • 局限
      • 兼容性问题,所有浏览器没有统一的标准
      • javascript 不能打开/读写/保存计算机上的文件.

javascript 以下简称 JS

JS 基本语法

在 HTML 中使用 JS

  1. 写在 header 中的<script></script>标签内
  2. 外部文件导入<script src="script.js"></script>标签内不能写代码
  3. 通过 JS 事件写在标签内<tag onclick="JS code...."></tag>

基本语法

  • 区分大小写 : JS 所有的一切全都区分大小写
  • 标示符 : 不能以数字开头，可以由：数字/字母/下划线/$组成
  • 注释
    • 单行注释： // 注释
    • 多行注释： /* 注释 */
  • 语句（指令结束符）: ; 或 换行
  • 关键字和保留字
1
2
3
4
5
6
7
ECMAScript 关键字的完整列表:
break    case    catch   continue    default
delete   do      else    finally     for
function if      in      instanceof  new
return   switch  this    throw       try
typeof   var     void    while       with
(关键字是保留的,不能用作变量名或函数名)

变量

1
2
3
var 变量名 = 值;
var 变量名 = 值,变量名 = 值,变量名 = 值;
var 变量名 = 变量名 = 变量名 = 值;

数据类型

以下，是以我们熟悉的角度去分类：

  • 基本类型
    • String （字串）
    • Number （数值）
    • Boolean （布尔）
  • 复合类型
    • Ojbect （对象）
    • array （数组）
  • 特殊类型
    • Null （空）
    • undefined （未定义）
    • function （函数）

typeof(aa) typeof aaa 返回一个值或变量的数据类型

字符串类型

  • 定义字符串： "" 或 ''
  • 不论是单引号还是双引号，都可以解析转义字符，都不能解析变量
  • 字符串连接符 +

数值类型

  • 数值的声明方式： 10 进制/ 8 进制/ 16 进制/ 科学计数法
  • 数值范围
    • 5e324 ~ 1.7976931348623157e+308
    • 超过范围会自动转换成 infinity(正无穷) -infinity(负无穷)
    • 可以使用 isFinity() 验证是不是无穷，超出范围不能参与运算
  • NaN 类型： 数值的特殊类型，表示 Not a Number
    • NaN 与任何数字操作，结果都是 NaN
    • NaN 与任何数都不相等，包括 NaN 自己
    • 函数 isNaN() 判断是否是 NaN
  • Number() 类型转换
    1. true -> 1 / false -> 0
    2. null -> 0
    3. undefined -> NaN
    4. 字符串
      1. 空字串 -> 0
      2. ‘11’ -> 11 / ‘011’ -> 11 (非进制转换)
      3. ‘0b10’ -> 2 (2进制转换) / ‘0xff’ -> 255 (16进制转换)
      4. ‘1.1’ -> 1.1
      5. ‘12e3’ -> 12000 (科学计数法解析)
      6. 如果包含除上述格式之外的字符，则将其转换成NaN
  • parseInt() 类型转换
    1. 数字开头的字符串，只转换数字整数部分，忽略字母部分
    2. 0x开头的字串会转换成十六进制，0不可以
    3. 空字串 -> NaN
    4. true / false / null / undefined 都会被转为 NaN
    5. 科学计数法(字串)不解析
  • parseFloat() 类型转换
    1. 基本同上
    2. 第一个小数点有效，第二个无效
    3. 数字开头的字符串，忽略后面的字母
    4. 科学计数法(字串)会解析其值
    5. 16 进制转换为 0

自动数据类型转换

  • 数字类型:
    • 在字符串环境下 隐身转换为字符串
    • 字符串类型 在数字环境下，可以隐式转换为字符串中的数字或 NaN
    • 在布尔环境下，可以隐式转换为 true
  • 空字符串:
    • 在数字环境下可以隐式转换为 0
    • 在布尔环境下可以隐式转换为 false
  • 字符串’true’:
    • 在数字环境下可以隐式转换位1
    • 布尔为 true
  • 字符串’false’:
    • 数字环境为 0
    • 布尔位 false
  • null:
    • 在字符串环境下，转换为’null’
    • 数字环境下，转换为 0
    • 布尔环境下，转为 false
  • NaN:
    • 在字符串环境下可以隐式转换为’NaN’
    • 布尔环境下，转换为 false
  • undefined:
    • 字符串环境下，转换为“undefined”
    • 数字环境下，转为 NaN
    • 布尔下，转为 false
  • true:
    • 字符串转为’true’
    • 数字环境下转为 1
  • false:
    • 字符串转为’false’
    • 数字环境下转为 0

JavaScript数据类型转换–数字

数据 number( ) parseInt( ) parseFloat( )
123 123 123 123
12.7 12.7 12 12.7
0b011 3 3 3
“0b011” 3 0 0
“123” 123 123 123
“12.1we” NaN 12 12.1
“12.1e1w” NaN 12 121
“ “ 0 NaN NaN
true 1 NaN NaN
null 0 NaN NaN
undefined NaN NaN NaN

运算符

  • 算术运算符
    1. 加法运算符 +
    2. 减法运算符 -
    3. 乘法运算符 *
    4. 除法运算符 /
    5. 模运算符 %
    6. 负号运算符 -
    7. 正号运算符 +
    8. 递增运算符 ++
    9. 递减运算符 –
  • 关系运算符
    1. 赋值运算符 =
    2. 相等运算符 ==
    3. 等同运算符 ===
    4. 不等运算符 !=
    5. 不等同运算符 !==
    6. 小于运算符 <
    7. 大于运算符 >
    8. 小于或等于运算符 <=
    9. 大于或等于运算符 >=
    10. in 运算符 判断一个值是否属于某个数组或者一个属性是否属于一个对象
    11. instanceof 判断一个对象的实例是否属于某个对象
    12. 字符串运算符 + 连字符
  • 逻辑运算符
    1. 逻辑与 &&
    2. 逻辑或 ||
    3. 逻辑非 !
  • 其他运算符
    1. 条件运算符 ?:
    2. new 运算符 new 对象类型
    3. void 运算符 void 运算符可以让操作数进行运算，但是却舍弃运算之后的结果
    4. typeof 运算符 返回类型
  • 对象属性存取运算符
    • 使用.来调用和设置对象的属性或者方法 : obj.attr| obj.func()
  • delete 运算符
    • delete 运算符可以用来删除变量/对象的属性/数组中的元素
    • delete 运算符返回的是布尔值类型
      • delete 对象名 / delete 变量名
      • delete 对象名.属性
      • delete 数组[索引]
  • 逗号运算符
    • var a = 1, b = 2;
    • c = a + b, d = a - b;
  • this 运算符
    • this 代表的是当前对象.

其他语句

  1. 判断语句 if()...else if()...else...
  2. 判断语句 switch()...case...break
  3. 迭代语句 while
  4. 迭代语句 do-while
  5. 迭代语句 for
  6. 迭代语句 for-in
  7. 立即退出循环 break
  8. 退出当前循环 continue

获取页面之中的元素对象

  1. 获取页面中的一个元素

document.getElementById()
一定要写写在元素生成之后
或者 写在函数中

  1. 获取或设置元素的 css 属性

element.style.color;
element.style.color = ‘#f00’;

  1. 获取或设置元素标签的属性

style
innerHTML
HTML元素标签 具有什么属性,当它变为 JS的element对象之后,该属性就会自动变为 该对象的属性了.
(img: src alt title width height id class)
(div: alt title id class)

  1. 定时函数

4.1 单次定时
setTimeout(‘JS 代码’, time)
clearTimeout()
4.2 多次定时
setInterval(‘JS 代码’, time)
clearInterval()

特效-全选/反选

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<ul id="list">
	<li><input type="checkbox" value="0">小翠翠</li>
	<li><input type="checkbox" value="1">小艳艳</li>
	<li><input type="checkbox" value="2">小莉莉</li>
	<li><input type="checkbox" value="3">小静静</li>
	<li><input type="checkbox" value="4">小萍萍</li>
	<li><input type="checkbox" value="5">小红红</li>
</ul>
<button onclick="selectAll(1)">全选</button>
<button onclick="selectAll(2)">全不选</button>
<button onclick="selectAll(3)">反选</button>
<hr>

<script>
	//声明函数
	function selectAll(m){
	    //获取所有的li
		//var ul = document.getElementById('list');
		var lis =document.getElementById('list').getElementsByTagName('input');
		//遍历 li
		for (var i = 0; i < lis.length; i ++) {
			switch (m) {
				case 1: lis[i].checked = true; break;
				case 2: lis[i].checked = false; break;
				case 3: lis[i].checked = !lis[i].checked; break;
			}
		   
		}
	}
	
</script>