javascript_01基本语法（上）

一、JavaScript基础

一、JavaScript导读

1.1 web网页标准

HTML 是一种标记语言，用来结构化我们的网页内容并赋予内容含义，例如定义段落、标题和数据 表，或在页面中嵌入图片和视频。 CSS 是一种样式规则语言，可将样式应用于 HTML 内容，例如设置背景颜色和字体，在多个列中 布局内容。 javascript是一种脚本语言，可以用来创建动态更新的内容，控制多媒体，制作图像动画，还有很 多。（好吧，虽然它不是万能的，但可以通过简短的代码来实现神奇的功能。）

1.2 javascript概述

1. JavaScript主要用于HTML的页面，嵌入在HTML的源码中。 2. JavaScript是因特网上最流行的脚本语言，它存在于全世界所有的Web浏览器中，能够增强用户与 Web站点和Web应用程序之间的交互。 3. JS是弱类型语言，没有类型声明，它的变量不必具有一个明确的类型。 4. JS是脚本语言。换句话说，能够用来编程的并且直接执行源代码的语言，就是脚本语言。 5. JS也是解释性的语言。何为解释性语言？是在运行的时候将程序直接翻译成机器语言。 6. JS是一种基于对象（Object）和事件驱动（Event Driven）并具有安全性能的脚本语言，可广泛用 于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。 7. HTML5的出现更是突出了JavaScript的重要性，例如HTML5的绘图支持、本地存储、离线应用、客 户端通信等，都大量使用了JavaScript。

1.3 javascript的历史

JavaScript 最初被称为 LiveScript，由 Netscape（Netscape Communications Corporation，网 景通信公司）公司的布兰登·艾奇（Brendan Eich）在 1995 年开发（这哥们在两周之内设计出了 JavaScript语言。你没看错，这哥们只用了10天时间。）。在 Netscape 与 Sun（一家互联网公 司，全称为“Sun Microsystems”，现已被甲骨文公司收购）合作之后将其更名为了 JavaScript。 图：布兰登·艾奇，JavaScript 创始人

之所以将 LiveScript 更名为 JavaScript，是因为 JavaScript 是受 Java 的启发而设计的，因此在语法 上它们有很多相似之处 ，JavaScript 中的许多命名规范也都借鉴自 Java，还有一个原因就是为了营 销，蹭 Java 的热度。 同一时期，微软和 Nombas（一家名为 Nombas 的公司）也分别开发了 JScript 和 ScriptEase 两 种脚本语言，与 JavaScript 形成了三足鼎立之势。它们之间没有统一的标准，不能互用。为了解 决这一问题，1997 年，在 ECMA（欧洲计算机制造商协会）的协调下，Netscape、Sun、微软、 Borland（一家软件公司）组成了工作组，并以 JavaScript 为基础制定了 ECMA-262 标准 （ECMAScript）。第二年，ISO/IEC（国际标准化组织及国际电工委员会）也采用了 ECMAScript 作为标准（即 ISO/IEC-16262）。

1.4 javascript能干什么

1. 常见的网页效果【表单验证，轮播图......】 2. 与H5配合实现游戏【水果忍者： http://www.jq22.com/demo/html5-fruit-ninja/】 3. 实现应用级别的程序【http://naotu.baidu.com】 4. 实现统计效果【http://echarts.baidu.com/examples/】 5. 地理定位等功能【http://lbsyun.baidu.com/jsdemo.htm#i4_5】 6. 在线学编程【https://codecombat.163.com/play/】 7. js可以实现人工智能【面部识别】

1.5 javscript的组成

组成部分	作用
ECMAScript	构成了js的核心语法
BOM	Browser ObjectMode[浏览器对象模型]，用来操作浏览器上的对象
DoM	Document Object Model[文档对象模型]，用来操作网页中的元素

1. ECMAScript:定义了javascrip 的语法规范，描述了语言的基本语法和数据类型

2. BoM(Brower Object Model):浏览器对象模型

1. 有一套成熟的可以操作浏览器的APL，通过BoM可以操作浏览器，

2. 比如：弹出框，浏览器跳转，获取分辨率等

3. DoM(Document Object Moddel):文档对象模型

• 有一套成熟的可以操作页面元素的APL，通过DOM可以操作页面中元素。

• 比如：增加个div,减少个div,给div换个位置等

总结：js就是通过固定的的语法去操作浏览器 和 标签结构 来实现网页上的各种效果

javascript基本使用

2.1 嵌入方式

在 HTML 中使用 JS 可以用以下几种方式实现：

• 行内式

• 内嵌式

• 外部引用js文件

行内式，可以在 html 元素中直接用使用 js 语句，但是一般都是调用函数或简短的语句。

内嵌式，一般用于实现比较小的功能，代码不长的情况

外部S文件，最常见的方式

2.2 JS 注释

// 单行注释 /* 多行注释 */

2.3 JS 输入输出语句

alter/prompt/confirm来源于window对象

alter(msg) //浏览器出框

comole.log(msg)//浏览器控制台打印输入信息

prompt（info）//浏览器弹出输入框，用户可以输入

confirm()

2.4js事件

• 标签的事件属性

点我
点我
a()=====>函数
function a(){}

onclick    //鼠标点击左键
ondbclick    //鼠标双击
oncontextmenu  //鼠标点击右键
mousedown    //鼠标按键被按下
mouseup   //松开鼠标按键
onselect  //文本被选中
oncopy    //元素内容被复制
onmouseenter //鼠标移动到事件监听的元素内（不区分子元素）
onmouseover //鼠标移动到有事件监听的元素或它的子元素内
onmouseleave  //鼠标离开元素外（不区分子元素）
onmouseout //鼠标离开元素，或它的子元素外
onmouseleave//获得鼠标焦点（点击input输入框）
onmousemove//鼠标移动
onmouseup//鼠标弹起
onmousedown //鼠标按下

2.5 查找 HTML DOM 元素

HTML DOM 能够通过 JavaScript 进行访问（也可以通过其他编程语言）。在 DOM 中，所有 HTML 元

素都被定义为对象。我们可以通过 Javascript 对这些对象操作，改变 HTML 元素的内容。

getElementById()

因为 id 元素是唯一的，就是为了在 js 中通过元素 id 来查找元素，document 是页面文档对象，

getElementById 是 document 的方法，通过传递的参数（id字符串），是一个标签的id值。可以返回的

该元素对象

This is new Element

三、ECMAScript

ECMAScript是一种由Ecma国际(前身为欧洲计算机制造商协会,英文名称是European Computer

Manufacturers Association)通过ECMA-262标准化的脚本程序设计语言。

语法

类型

语句

关键字

保留字

运算符

对象

3.1 变量

3.1.1 定义

变量是程序在内存中申请的一块用来存放数据的空间。通过变量名称我们可以使用或修改保存在系统中

的对应的数据。

3.1.2 声明变量

Js 是一种弱类型或者说动态语言，不用提前声明变量的类型，变量的类型会自动判断。即使赋值之后，

变量的类型根据重新赋值的数据类型同样进行改变

var age;//声明一个名称为age的变量
age=12;//给age这个变量赋值为12

通常声明与赋值一起使用：

var age=12;

3.1.3 初始化变量

var age=12;
var name='Tom'
name='oo' //再次给相同变量赋值则不用var进行初始化
var a=10,b=20,c=30;//可以同时声明多个变量

3.1.4 输入存储变量

var name=prompt('请输入你的名字')
alert(name)

3.1.5变量的命名规范

• 由字母、数字、下划线、$符号组成，不能以数字开头

• 不能是关键字和保留字，例如：for,while,this,name

• 区分大小写

• 变量名必须有意义

• 小驼峰命名法，如：myName

• 建议不要用$作为变量名

3.1.6 查看变量

alert(变量名)//弹出框显示
console.log(变量名)//控制台显示
document.write(变量名)//HTML页面上显示

3.2数据类型

3.2.1数字型【number】

3//十进制
010//八进制
0xa//十六进制
3.14//小数
NaN//非数字Not a Number

数字型范围

console.log(Number.max_value);//1.7976931348623157e+308
console.log(Number.min_value);//5e-324

3.2.2字符串类型[string]

var str1="这是个字符串"

字符串转义符

\n //换行
\r //回行
\\
\'
\\''
\t
\b //空格
\xnn // 16进制字符，如 \x41 代表 'A'
\unnn // 16进制 unicode 字符， 如 \u03a3 代表∑

字符串长度：

用 变量.length 可以得到字符串长度，如：

var str1 = 'hello world'
console.log(str1);
// 输出结果：11

字符串拼接：

var str = str1 + str2;
var str = '字符串' + 123; // 输出字符串123，字符串拼接其他类型会自动转换为字符串
var str = 'My age is' + age +years old'; // 字符串+变量拼接

只要与字符串做加法运算都会被转换成字符串

字符串中的双引号和单引号：

var str="他是“程序猿"；

3.2.3 布尔型

布尔型 Boolean 只有两个值，一个是 true，一个是 false

console.log(1 + true); //在运算中，true代表1
console.log(1+ false); //false代表0
console.log('t' + true); //在字符串拼接，会直接以字符串形式拼接ttrue

3.2.4 null 空值

console.log(null+ 'pp'); //会拼接字符串nullpp
console.log(null+ true); //会输出1

null表示"没有对象"，即该处不应该有值。

• 作为函数的参数，表示该函数的参数不是对象。

• 作为对象原型链的终点。

3.2.5undefined未定义

一个声明后没有被赋值的变量会有一个默认值 undefined

console.log(undefined + 'pp'); //会拼接字符串undefinedpp
console.log(undefined + true); //会输出NaN
console.log(undefined + 1); //会输出NaN

• 变量被声明了，但没有赋值时，就等于undefined。

• 调用函数时，应该提供的参数没有提供，该参数等于undefined。

• 对象没有赋值的属性，该属性的值为undefined。

• 函数没有返回值时，默认返回undefined。

undefined 和 null 的区别

只设置了null作为表示"无"的值。根据C语言的传统，null被设计成可以自动转为0。JavaScript的最初版

本是这样区分的：null是一个表示"无"的对象，转为数值时为0；undefined是一个表示"无"的原始值，

转为数值时为NaN。

• undefined和null在if语句中，都会被自动转为false

3.2.6其他类型

• 数组

• 对象

3.2.7 数据类型转换

3.2.7.1 typeof() 查看数据类型

var num = 1;
console.log(typeof num);
console.log(typeof(num)); // 也可以使用参数的形式查看

null返回的是object

3.2.7.2 转换为字符串

var num = 1;
alert(num.toString()); // 无法用 .toString() 方法转换 undefined 和 null
alert(String(num)); // 可以转换 undefined 和 null
alert(num + '');

3.2.7.3 转换为数字型

// 转换为整型
parseInt(num);
parseInt('3.14'); // 取整为3
parseInt('90px'); // 去掉单位（只取int遇到字符串自动中断）
parseInt('rem120px') // 字符串转换后变为 NaN
parseInt(undefined) // undefined 转换后变为 NaN
parseInt(null) // 转换后为0
parseInt(true) // 布尔型转换后变为 1 或 0
// 转换为浮点型
parseFloat(num);
parseFloat(3); // 还是输出3，不会自带小数点，3.0也是一样
// 强制转换
Number(num);
// 隐式转换，可以用 - * / （加号正能用作正负值将字符串转为数字型，如果用在变量后边则变为拼接
字符串）
console.log(+'100')
console.log('123' - 120);
console.log('t' - 120); // 输出 NaN

3.2.7.4 转换为布尔型

代表空、否定的值都会被转换为 false，如：0，''，NaN，null，undefined

其余值都会被转换为 true

Boolen('abc'); // 返回 True
Boolean(0); // 返回 False