概述
简介
JavaScript是一种轻量级的脚本语言,是可插入HTML页面的编程代码。JavaScript插入HTML页面后，由所有的现代浏览器执行。
组成部分
- ECMAScript：整个javascript核心，包含（基本语法、变量、关键字、保留字、数据类型、语句、函数等）
- DOM：文档对象模型，包含整个html页面的内容
- BOM：浏览器对象模型，包含整个浏览器相关内容
JS组成部分.png
用法
脚本必须位于<script>和</script>标签之间
-
内部脚本：脚本放置在HTML页面的<body>和<head>部分中
内部脚本1.png
内部脚本2.png
-
外部脚本：脚本可保存在外部文件中，外部文件通常包含被多个网页使用的代码。外部JS文件的扩展名为.js。如需使用外部文件，在<script>标签的src属性中设置该.js文件。
外部脚本1.png
外部脚本2.png
核心语法
变量
- 变量可以字母、$和_开头，对大小写敏感
- 在JavaScript中使用var关键字声明变量：var carname;使用等号赋值：carname=“Volvo”;
- 声明无值的变量，其值是undefined
数据类型
JavaScript中数据类型有数字（Number）、字符串（String）、布尔（Boolean）、数组（Array）、对象（Object）、空（Null）、未定义（Undefined）。
JavaScript拥有动态类型，相同的变量可用作不同类型。
动态类型.png
- JavaScript只有一种数字类型。数字可带小数点，也可不带。
数字类型.png
- JavaScript字符串可以是引号中的任意文本，可使用单引号或双引号。
字符串类型1.png
字符串类型2.png
JavaScript布尔（逻辑）只能是两个值：true或false （var x=true; var y =false;）
JavaScript数组下标从零开始
数组类型1.png
数组类型2.png
数组类型3.png
- JavaScript对象由花括号分割。在括号内部，对象的属性以名称和值对形式（name:value)定义。属性由逗号分隔。
对象类型1.png
对象类型2.png
- Undefined表示变量不含有值；null表示有值，为空。
运算符
<script type="text/javascript">
//运算符
var a = 5;
var b = 15;
var c = b/a;
alert(c);
</script>
运算符1.png
运算符2.png
<script type="text/javascript">
//数字与字符串相加，将成为字符串
var b = 15 + "5";
alert(b); //155
</script>
比较运算
<script type="text/javascript">
var a = 15;
var b = "15";
//判断值是否相等
alert(a == b); //true
//判断值和类型是否相等
alert(a === b); //false
</script>
比较运算.png
条件判断、switch及循环语句
if..else的语法和JAVA相同，不再举例
-
switch
<script type="text/javascript"> var a = "abc"; switch(a){ case "abc": alert("abc");break; case "d": alert("d"); break; } </script> JavaScript中也可以使用for、while、do..while循环，跟JAVA一样，不再举例
函数
- 用function定义函数，函数中的代码，只有在被调用时，才会执行
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>Insert title here</title>
<script type="text/javascript">
function doit(){
alert('doit');
}
</script>
</head>
<body>
<script type="text/javascript">
//调用函数
doit();
</script>
</body>
<head>
<script type="text/javascript">
function doit(){
alert('doit');
}
</script>
</head>
<body>
<button onclick="doit()">点击我看看</button>
</body>
- JavaScript函数很灵活，无需声明类型；参数不一致也可调用；按照名称调用（大小写敏感）
<script type="text/javascript">
//不用声明形式参数的类型
function doit(a,b,c){
alert(a);
alert(b);
alert(c);
}
//以下方式均可调用这个函数!
doit();
doit(15);
doit(15,16);
doit("a",'b',true);
doit("a",'b',true,100);
</script>
事件
JavaScript处理逻辑既可以直接写到事件处理代码中；也可以写到函数中，然后调用。
<script type="text/javascript">
function doit(){
alert('鼠标移出了图片');
}
function dosomething(){
alert("页面加载完成了！");
}
function selectit(){
alert("下拉列表框改变了选择项！");
}
</script>
<body onload="dosomething()">
<img src="logo.gif" onmouseout="doit()"></img>
<select onchange="selectit()">
<option value="0">男</option>
<option value="1">女</option>
<option value="2">未知</option>
</select>
<input type="text" name="username"
onfocus="alert('username获得了焦点')"
onblur="alert('username失去了焦点')">
</body>
<head>
<script type="text/javascript">
function doit(){
alert("xxxxx");
}
//可以使用这种方法定义onload事件（或其它事件）
window.onload = doit;
</script>
</head>
<body>
</body>
对象与类
对象（三大部分）
- JavaScript内置的对象，比如：String、Array、Object、Date等
- HTML DOM（Document Object Model，文档对象模型）对象
- Browser对象（浏览器相关的对象）
注：http://www.w3school.com.cn/js/js_reference.asp ，有比较完整的说明。
字符串对象
<script type="text/javascript">
var a = "Hello World";
alert(a.length); //11
var s = new String("中国，你好");
alert(s.length); //5
var s = "世界，你好";
alert(s.substring(3)); //你好
</script>
数组对象
<script type="text/javascript">
//定义一个数组
var array1 = [1,2,3,4];
//这也是定义一个数组
var array2 = new Array();
alert(array1.length); //4
alert(array1[3]); //4
alert(array1[4]); //undefine
array1[4] = 18;
array1[6] = 19;
alert(array1[4]); // 18
alert(array1[5]); //undefine
alert(array1[6]); //19
</script>
自定义对象
<script type="text/javascript">
//定义随意一个对象
////也可以写成var o = new Object();
var o = {};
//给对象增加属性
o.name = "张三";
o.sex = "男";
o.age = 18;
//给对象增加方法（函数）
o.doit = function(){
alert("doit被调用了！");
}
//获取对象的属性
alert(o.age);
//调用对象的方法
o.doit();
</script>
类
JavaScript没有class关键字，JavaScript用function关键字来定义类！类就是函数，函数就是类。
<script type="text/javascript">
//定义了一个名为Person的类，它也是一个函数
function Person(){
alert("Person函数被调用了！");
}
Person(); //把Person当函数调用
</script>
<script type="text/javascript">
//定义了一个名为Person的类，它也是一个函数
function Person(){
alert("Person函数被调用了！");
}
//把Person当成类来用，在这种用法下，Person可称为构造函数
var p = new Person();
</script>
DOM
文档对象模型
把HTML文档中的各种元素（标签）看成一个个对象，document是这些对象的根，用javascript可以操纵这些对象。
文档对象模型.png
Document文档对象
浏览器加载整个HTML文档形成Document对象，Document对象可访问和操作HTML文档中的所有元素。
- 获取元素
获取元素.png
<script type="text/javascript">
function doit(){
var links = document.getElementsByTagName("a");
for(var i=0; i<links.length; i++){
var link = links[i];
alert(link.href);
}
}
</script>
</head>
<body onload="doit()">
<a href=“http://www.itjmd.com”>金铭鼎</a>
<a href="http://www.sina.com">新浪</a>
</body>
<script type="text/javascript">
function doit(){
//这就得到了那个下拉选择框对象
var s = document.getElementById("selectme");
//那么这个对象有哪些属性及哪些方法呢？请查阅文档，并测试
alert(s.length); //4
alert(s.value); //?
}
</script>
<body onload="doit()">
<select id="selectme" onchange="doit()">
<option value="1">男</option>
<option value="2">女</option>
<option value="3">未知</option>
<option value="4">未说明</option>
</select>
</body>
- 创建元素
创建元素.png
- 常用属性
常用属性.png
Element元素对象
Element对象表示HTML文档中的元素(HTML称为标签)。元素可包含属性、其他元素或文本。也就是说HTML标签可以包含属性、其他子标签或文本。
常用方法.png
名词解释.png
BOM
Window对象
- window对象代表当前的浏览器窗口
- 在JavaScript中定义的函数和变量，都是属于window对象的属性
<script type="text/javascript">
var abc = "something";
function hello(){
alert("hello");
}
hello();
window.hello();
alert(window.abc);
</script>
- 利用window对象，在窗口之间进行交互
<script type="text/javascript">
function openwin(){
window.open("newwindow.html");
}
function hello(){
alert("hello");
}
</script>
<body>
<input type="text" id="returnField"></input>
<button onclick="openwin()">打开新窗口</button>
</body>
<script type="text/javascript">
function closewin(){
alert("即将关闭本窗口");
//访问打开这个窗口的那个窗口对象
window.opener.document.getElementById("returnField").value = "随便一个值";
//访问打开这个窗口的那个窗口对象中的函数
window.opener.hello();
window.close(); //关闭本窗口
}
</script>
<body>
<button onclick="closewin()">关闭本窗口</button>
</body>
-
window对象方法
window对象方法1.png
window对象方法2.png
window对象方法3.png
Location对象
Location对象包含有关当前URL的信息。
Location对象属性.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>location对象</title>
<script>
function tiao() {
window.location.href = "https://www.baidu.com";
}
</script>
</head>
<body>
<a href="#" onclick="tiao()">百度一下</a>
</body>
</html>
History对象
History对象：包含用户（在浏览器窗口中）访问过的URL。
History对象方法.png
<script type="text/javascript">
function gotoback(){
window.history.back();
}
</script>
<body>
本页是javascript_27.html <br/>
<a href="javascript_27_01.html">下一页</a>
<a href="javascript:gotoback()">上一页</a>
</body>
<script type="text/javascript">
function gotoback(){
window.history.back();
}
</script>
<body>
本页是javascript_27_01.html <br/>
<a href="javascript_27_02.html">下一页</a>
<a href="javascript:gotoback()">上一页</a>
</body>
<script type="text/javascript">
function gotoback(){
window.history.back();
}
</script>
<body>
本页是javascript_27_02.html <br/>
<a href="javascript:gotoback()">上一页</a>
</body>
