起源

javascript前身叫做livescript，sun公司推出java，netspace公司引进java的概念，重新设计livescript，并更名javascript。

发明者，布兰登.艾克，表单验证原先要经过服务器，服务器压力大，等待时间长，js仅在客户端就可完成。

是什么

是一种脚本语言，是一种轻量级的编程语言。

JavaScript可插入 HTML 页面的编程代码，由所有的浏览器执行，从服务端被下载到客户端由浏览器执行。

作用

1、表单验证

2、页面特效

3、动态调整页面

组成

1、核心语法（ECMAScript）

2、浏览器对象模型(BOM)

1) 是什么

Browser Object Model,浏览器对象模型：由一系列对象组成，是访问、控制、修改浏览器属性的方法.

2) 结构图

3) 内容简介

window

BOM使javascript有能力与浏览器进行沟通，这个沟通从window对象开始，所有的window对象的属性和方法自动成为javascript的全局变量和全局函数。可直接使用。

history

包含用户访问过的URL

最初设计表示浏览历史，出于隐私，不允许js访问已经访问过的实际URL。

仍保持back（），forwore（），go（）等方法。

location

包含当前页面的URL信息，可重载当前页面或装入新页面

document

一个比较特殊的对象，它既是浏览器对象模型BOM中的一个对象，同时表示文档对象模型DOM中整个HTML文档。

3、文档对象模型(DOM)

1）是什么

文档对象模型：由一系列对象组成，是访问、控制、修改HTML文档的标准方法。

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

BOM是一个与语言无关，与平台无关的标准接口规范。将HTML 文档解析成树结构。

2）结构图

3）内容简介

节点：

在DOM （文档对象模型）中，每个部分都是节点：

• 文档节点：文档本身
• 元素节点：所有 HTML 元素
• 属性节点：所有 HTML 属性
• 文本节点：HTML 元素内的文本
• 注释节点：注释

element.appendChild() 向元素添加新的子节点，作为最后一个子节点。

element.removeChild() 从元素中移除子节点。

element.replaceChild() 替换元素中的子节点。

element.insertBefore() 在指定的已有的子节点之前插入新节点。

getElementById() 返回对拥有指定 id 的第一个对象的引用。

getElementsByName() 返回带有指定名称的对象集合。

getElementsByTagName() 返回带有指定标签名的对象集合。

创建方式

1、外部js文件

将JS代码写入后缀名为.JS的外部文件中，只写脚本代码，不用写<SCRIPT>标签。html页面引入。

js文件：

alert("哈哈！“);

HTML引入：

<script src="JS外部文件。js"> <!--js脚本代码> </script>

适用于：代码量较大。或者再多个页面中共享

2、<script>标签

<script>

function demo(a){

alert(a)

}

</script>

<button onclick="demo('点我干嘛！')">点我</button>

适用于:代码较少，较少重复使用

3、HTML标签内

<input type="button" value="js" onclick="javascript:alert('我是JS脚本代码')"/>

<input type="button" value="js" onclick="alert('我是JS脚本代码')"/>

适用于：特别简短的JS 代码

数据类型

数值number

整数或小数

实例

var x1=34.00; //使用小数点来写

var x2=34; //不使用小数点来写

数组array

实例

var cars=new Array();

cars[0]="Saab";

cars[1]="Volvo";

cars[2]="BMW";

var cars=new Array("Saab","Volvo","BMW");

var cars=["Saab","Volvo","BMW"];

布尔

true 或 false

实例

var x=true;

var y=false;

字符串string

字符串是存储字符（比如 "Bill Gates"）的变量。

字符串可以是引号中的任意文本。您可以使用单引号或双引号：

实例

var carname="Volvo XC60";

var carname='Volvo XC60';

对象object

对象由花括号分隔。

在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。

属性由逗号分隔：

实例

var person={firstname:"John", lastname:"Doe", id:5566};

对象属性有两种寻址方式：

name=person.lastname;

name=person["lastname"];

undefined

保留字，已申明变量，没有赋值。

null

定义空或不存在的引用。

不等与 空字符串 或 0

??

1、undefined：这个值表示变量不含有值。

可以通过将变量的值设置为 null 来清空变量。

2、判断数据类型（typeof）

var height=180;

document.write("height的类型为："+typeof(height));

函数

作用

使程序结构清晰，封装多条语句，代码复用，便于维护。

结构

关键字声明function，参数，函数体。

注意

1.函数定义时不必指定返回值。

2.任何函数任何时候可通过return语句实现返回值。

3.除return语句外，无任何声明也能表示返回值

4.函数执行完return立即退出，return之后的语句永远不会执行

5.一个 函数可以多个return

6.return可以不带返回值，会返回undefined

//1.函数定义时不必指定返回值。

function a(num1,num2){

alert(num1+num2);

}

a(1,2);

//2.任何函数任何时候可通过return语句实现返回值。

function b(num1,num2){

return num1+num2;

}

alert (b(1,3));

//3.除return语句外，无任何声明也能表示返回值

function c(num1,num2){

return num1+num2;

}

var result=c(1,4);

alert(result);

//4.函数执行完return立即退出，return之后的语句永远不会执行

function d(num1,num2){

return num1+num2;

//return后面的语句永远不会执行

alert(num1+num2);

}

alert(d(1,5));

//5.一个 函数可以多个return

function e(num1,num2){

if(num1>num2){

return num1-num2;

}

else{

return num2-num1;

}

}

alert(e(1,2));

alert(e(3,1));

//6.return可以不带返回值，会返回undefined

function f(num1,num2){

return;

}

alert(f(1,6));

输出

1、针对用户的

alert()

<button onclick="alert('我是alert方式的弹框!')">alert</button>

confirm()

<button onclick="confirm('我是confirm方式的弹框!')">confirm</button>

prompt()

两个参数 一个提示信息 一个默认值

<button onclick="prompt('我是prompt方式的弹框1',6)">confirm</button>

2、针对HTML文档元素

innerHTML

双向功能：获取对象的内容 或 向对象插入内容；

<script>

//获取对象的内容

function gets(){

alert(document.getElementById("innerHtml").innerHTML);

}

//向对象插入内容

function puts() {

document.getElementById("innerHtml").innerHTML = "i am not here";

}

</script>

<p id="innerHtml">i am here</p>

<button onclick="gets()">innerHtmlGets</button>

<button onclick="puts()">innerHtmlPets</button>

document.write()

<script>

function myFunction() {

document.write(Date());

}

</script>

<button onclick="document.write(Date());">document.write</button>

使用 document.write() 仅仅向文档输出写内容,如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖。

3、控制台

console.log()

浏览器支持调试

可以在浏览器中显示 JavaScript 值。

浏览器中使用 F12 来启用调试模式

在调试窗口中点击 "Console" 菜单。

c = 5+6;

console.log(c);

注释

//我不会执行

/* 我不会执行 */