JavaScript是基于对象和事件的脚本语言。
一、JavaScript特点
1、交互性：信息的动态交互
2、安全性：不允许直接访问本地硬盘），它可以做的就是信息的动态交互。
3、跨平台性：只要是可以解释Js的浏览器都可以执行，和平台无关。
二、JavaScript与Java不同
1、JavaScript是Netscape公司的产品，Java是Sun公司的产品
2、JavaScript是基于对象，Java是面向对象。
3、JavaScript只需解释就可以执行，Java需要先编译成字节码文件，再执行。
4、JavaScript是弱类型，Java是强类型。
三、JavaScript的组成
JavaScript语法基础
使用JS操作网页（DOM）
使用JS操作浏览器（BOM）
四、JS引入方式与引入位置
向HTML页面插入JavaScript的主要方法，就是使用<script元素>。使用<script>元素的方式有两种：直接在HTML页面中嵌入JavaScript代码和包含外部的JavaScript文件。
- JS代码存放在标签对<script>．．．</script>中。
- 使用script标签的src属性引入一个js文件。（方便后期维护，扩展）
例：<script type=”text/javascript” src=”test.js”></script>
注：规范中script标签中必须加入type属性。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Day2</title>
<!--内部引入-->
<!-- <script type="text/javascript">
alert("JavaScript");
</script>-->
<!--外部引入-->
<script type="text/javascript" src="Js/Js1.js"></script>
</head>
<body>
</body>
</html>
注意：
1、页面上可以有多个<script>标签
2、<script>标签按顺序执行
3、<script>标签可以出现在任意的页面位置
4、<script>标签一定要写</script>关闭，而不能<script/>这样关闭。否则没有任何错误信息，但是没有运行结果。
五、JacaScript语法
1、常用函数
window.alert()或写为 alert() ：显示一个提示框显示内容。
window.document.write() ：在网页的当前位置处写内容。
2、变量
变量是弱类型的
与 Java不同，ECMAScript 中的变量无特定的类型
定义变量时只用var 运算符，可以将它初始化为任意值。
var color = "red";
var num = 25;
var flag = true;
typeof()可以用来查看当前变量的数据类型
<script type="text/javascript" >
var a = 100;
var b = 3.14;
var c = true;
var d = "hello";
document.write(a + "<br/>");
document.write(b + "<br/>");
document.write(c + "<br/>");
document.write("<hr/>");//分割线
document.write( typeof a + "<br/>");
document.write( typeof b + "<br/>");
document.write( typeof c + "<br/>");
document.write( typeof d + "<br/>");
</script>
注意：如果一个变量没有初始化值的时候，其类型为undefined类型。表示没有定义。
3、流程控制语句
判断 if()
if (condition) statement1 else statement2
选择switch() case
function test6() {
var color = "xx";
var value1 = "red", value2 = "green";
switch(color) {
case value1:
alert("红色");
break;
case value2:
alert("绿色");
break;
default:
alert("执行默认default");
}
}
循环
while循环
//while循环
var i = 0;
while (i < 10) {
i += 2;
}
for循环
iCount = 6;
for (var i = 0; i < iCount; i++) {
alert(i);
}
for in 语句: 用于枚举对象的属性或者遍历一个数组的元素
for (sProp in window) {
alert(sProp);
}
with 语句 : 在存取对象属性和方法时就不用重复指定参考对象。
<script type="text/javascript">
with(document){
write("您好 !");
write("<br>这个文档的标题是 : \"" + title + "\".");
write("<br>这个文档的 URL 是: " + URL);
write("<br>现在您不用每次都写出 document 对象的前缀了 !");
}
</script>
99乘法表案例
<script>
document.write("<table border='1px' bordercolor='green'>" );
for ( var i = 1; i <= 9; i++){
document.write("<tr>");
for (var j = 1; j <= i; j++){
document.write("<td>");
document.write(i +"*"+j+"="+i*j);
document.write("</td>");
}
document.write("</tr>");
}
document.write("</table>");
</script>
4、数组
指定长度
var arrs=new Array(20);
指定元素
var arrs=new Array("hello");
创建一个包含3个字符串的数组
var arrs=["aa","bb","cc"];
数组遍历：
for(var i = 0; i < arr.length; i++){
alert(arr[i]);
}
或
for( var i in arr ){
// i 是遍历出的数组中的索引，从0开始，一直到最大索引。
// 如果有其他属性，也会遍历出来，其实索引就是数组对象的属性。
alert(arr[i]);
}
注意:
JS数组可以动态增长：
5、JS的函数
函数格式
Function 函数名(参数列表){
代码;
return 返回值; //return 不是必须的.
}
示例:
function foo() {
alert("test");
}
function foo2( a ){
alert(a);
return; // 没有返回值，表示方法执行完了，后面如果有代码就不会执行了
}
function foo3( a, b ){
alert(a + b);
}
function foo4( a, b ){
return a + b;
}
特点：
1、使用function关键字定义函数。
2、没有任何的返回值类型。
3、函数的定义优先执行，与顺序无关。
4、可以通过函数名赋值函数，函数变量的类型是function对象。
5、参数列表不能有var关键字。
6、函数的参数列表在具体调用的时候实参个数可以和形参个数不同。
7、JavaScript函数天然的支持可变参数。
8、同名的函数最后声明会覆盖前面以声明。JavaScript中没有函数重载。
六、JavaScript对象
1、String对象
//通过构造函数创建String 对象
var b = new String("java");
var c = new String("java");
document.write(b + "," + c);
document.write(b == c);
//false
//比较字符串的值是否相等
document.write(b.valueOf() == c.valueOf());
属性：length 字符串的长度
document.write(a.length);
方法
1、与HTML相关的方法
bold() 将字体加粗
fontcolor()设置字体的颜色
fontsize设置字体的大小
link()设置链接
sub()显示为下标
sup()显示为上标
2、与java相似的方法
concat()连接字符串
charAt()返回指定位置的下标，若字符位置不存在则返回空字符串
indexOf()检索字符串的位置，若不存在返回-1
split() 将字符串切分为字符数组
replace()替换与正则表达式匹配的子串replace("a","b") b替换a
substr()从第几位开始向后截取几位
substring()提取字符串中两个指定的索引号之间的字符(两个参数，包头不包尾)
2、Array对象
方法
concat()连接两个数组，返回一个新的数组
join()根据指定字符将数组分割(替换一般数组中用逗号进行数组分隔)
push()向数组的末尾添加一个或多个元素，并返回新的长度
pop()删除并返回最后一个元素
reverse()颠倒数组中元素的顺序
sort()对当前数组进行排序，并返回已经进行了排序的此Array对象
shift()移除数组中的第一个元素并返回该元素。如果该数组为空，那么将返回 undefined。
unshift([item1[, item2 [, . . . [, itemN]]]])将指定的元素插入数组开始位置并返回该数组。
splice(start, deleteCount, [item1[, [, . . . [,itemN]]]])移除从 start 位置开始的指定个数的元素，并插入新元素
3、Date对象
获取当前时间var date = new Date();
toLocaleString()将时间转化为中国习惯的年月日小时分钟
<script>
var date = new Date();
document.write(date);//Mon Apr 08 2019 19:53:53 GMT+0800 (中国标准时间)
document.write("<br>");
document.write(date.toLocaleString());//2019/4/8 下午7:53:53
</script>
getFullYear从 Date 对象以四位数字返回年份
getMonth()从 Date 对象返回月份 (0 ~ 11)
getDate()从 Date 对象返回日（1~31）
getDay()从 Date 对象返回星期（0~6）
getHours()返回 Date 对象的小时 (0 ~ 23)
getMinutes()返回 Date 对象的分钟 (0 ~ 59)
getSeconds()返回 Date 对象的秒数 (0 ~ 59))
//获取系统时间
var date = new Date();
//获取年 月 日时分秒
var str = date.getFullYear() + "年" + (date.getMonth() + 1) + "月"
+ date.getDate() + "日" + "星期" + date.getDay() + " " + date.getHours() + "时"
+ date.getMinutes() + "分" + date.getMinutes() + "分" + date.getSeconds() + "秒"
getTime()返回 1970 年 1 月 1 日至今的毫秒数
4、Math对象（静态方法：Math.方法）
ceil()对一个数进行上舍入
floor()对一个数进行下舍入
round()四舍五入
random()返回 0 ~ 1 之间的随机数
例：获得一个1~10的随机数
document.write(Math.ceil(Math.random()*10));
5、JS的全局函数
eval()执行JavaScript代码
excape()对字符(中文)串进行编码
decodeURI解码某个编码的 URI
isNaN检查某个值是否是数字（是数字返回false,不是数字返回true）
parseInt将字符串类型转化为整数。
6、JS中的重载
JavaScript中没有重载，但是可以通过其他方式模拟重载
<script>
function add(){
if(arguments.length == 2){
return arguments[0] + arguments[1];
}
else if(arguments.length == 3){
return arguments[0] + arguments[1] + arguments[2];
}
else if(arguments.length == 4){
return arguments[0] + arguments[1] + arguments[2] + arguments[3];
}
}
alert(add(12,34));
alert(add(12,34,9));
alert(add(12,34,90,2));
</script>
7、JS的BOM对象
全称 Browser Object Model，浏览器对象模型。
document.write(navigator.appName);获取当前浏览器的名称
screen获取屏幕的宽和高
document.write("屏幕的宽："+screen.width);
document.write("<br>");
document.write("屏幕的高："+screen.height);
location获取到请求的URL地址
document.write("请求的URL地址："+location.href);
window窗口对象，顶层对象（所有的BOM对象都在window中操作）
alert()在页面弹出一个框
window.confirm()显示带有一段消息以及确认按钮和取消按钮的对话框。
var flog = window.confirm("是否删除")
if(flog == true){
alert("删除成功")
}else{
alert("删除失败")
alert("删除失败")
}
定时器
setInterval()按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout()在指定的毫秒数后调用函数或计算表达式。
clearInterval()取消由 setInterval() 设置的定时。
clearTimeout()取消由 setTimeout() 方法设置的定时。
8、JS的DOM对象
DOM全称Document Object Model，即文档对象模型。
可以使用dom提供的对象的属性个方法对标记型文档进行操作
浏览器在解析HTML页面标记的时候，其实不是按照一行一行读取并解析的，
而是将HTML页面中的每一个标记按照顺序在内存中组建一颗DOM树，
组建好之后，按照树的结构将页面显示在浏览器的窗口中。
节点层次
HTML网页是可以看做是一个树状的结构，如下：
html
|-- head
| |-- title
| |-- meta
| ...
|-- body
| |-- div
| |-- form
| | |-- input
| | |-- textarea
... ... ...
这是一颗树，是由多个节点（Node）组成的，节点的类型有很多种。
节点最多有一个父节点，可以有多个子节点。
9、document对象
Document对象代表整个 HTML 文档，可用来访问页面中的所有元素。
document.write()输出内容
document.getElementById()获取指定 id 的对象的引用。
<input id="id" type="text" value="aaaa"/>
<script>
input1= document.getElementById(id);
alert(input1.value);
</script>
document.getElementsByName()返回带有指定名称的对象集合。
<input type="text" name="name1" value="aaaa"/><br>
<input type="text" name="name1" value="bbbb"/><br>
<input type="text" name="name1" value="cccc"/><br>
<input type="text" name="name1" value="dddd"/><br>
<input type="text" name="name1" value="eeee"/><br>
<script type="text/javascript">
var inputs = document.getElementsByName(name1);
window.alert(inputs.length);
</script>
document.getElementsByTagName()返回带有指定标签名的对象集合。
案例：在ul末尾添加结点
<ul id="id1">
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
</ul>
<input type="button" value="添加" onclick="add();" />
<script type="text/javascript">
function add() {
//获取到ul标签
var ul1 = document.getElementById("id1");
//创建li标签
var li1 = document.createElement("li");
//创建文本
var text = document.createTextNode("5555");
//把文本加入到li下面
li1.appendChild(text);
//把li加入到ul下面
ul1.appendChild(li1);
}
</script>
10、元素对象(element对象)
getAttribute()获取属性里面的值
setAttribute("a","b")添加属性和值
removeAttribute()删除属性里面的值
<input type="text" id="id1" value="abcd"/>
<script type="text/javascript">
var input1 = document.getElementById("id1");
alert(input1.value);
alert(input1.getAttribute("class"))
alert(input1.setAttribute("class","hah"));
alert(input1.getAttribute("class"));
alert(input1.removeAttribute("class"));
</script>
getElementsByTagName()获取标签下面的子标签
11、Node对象
nodeType 节点类型
nodeType 属性可返回节点的类型。
---------------------------------
元素类型 节点类型
------------------
元素 1 就是标签元素，例<div>..</div>
文本 3 标签元素中的文本
注释 8 表示为注释
nodeName 节点名称
nodeName 属性含有某个节点的名称。
--------------------------------
元素节点的 nodeName 是标签名称
属性节点的 nodeName 是属性名称
文本节点的 nodeName 永远是 #text
文档节点的 nodeName 永远是 #document
nodeValue 节点值
nodeValue
对于文本节点，nodeValue 属性是所包含的文本。
对于属性节点，nodeValue 属性是属性值。
对于注释节点，nodeValue 属性注释内容。
nodeValue 属性对于文档节点和元素节点是不可用的。
获取标签对象
<input type="text" id="id1" value="abcd"/>
<script type="text/javascript">
var id2 = document.getElementById("id2");//获取属性
alert(id2.nodeType);//1
alert(id2.nodeName);//input
alert(id2.nodeValue);//null
</script>
获取属性
<input type="text" id="id1" value="abcd"/>
<script type="text/javascript">
var id2 = input1.getAttributeNode("id");//获取属性
alert(id2.nodeType);//2
alert(id2.nodeName);//id
alert(id2.nodeValue);//id1
</script>
获取文本
<span id="id2">哈哈哈哈</span>
<script type="text/javascript">
var input1 = document.getElementById("id2");//获取文本
var text = input1.firstChild;
alert(text.nodeType);//3
alert(text.nodeName);//#text
alert(text.nodeValue);//哈哈哈哈
</script>
针对标签的操作
父节点：parentNode
子节点：childNodes firstChild lastChild
获取下兄弟(获取弟弟)：nextSibling
获取大哥: previousSibling
//获取父节点.
alert(form.parentNode.nodeName);
// 获取子节点(Node 包含 文本,注释,标签)
var childArr = form.childNodes;
alert(childArr.length);
// 获取第一个孩子.
var first = form.firstChild;
alert(first);
//最后一个孩子.
var last = form.lastChild;
alert(last);
// 获取下兄弟(获取弟弟)
var sibling = form.nextSibling;
alert(sibling.nodeName);
// 获取大哥
var previous = form.previousSibling;
alert(previous.nodeName);
12、操作DOM树
appdndChild添加子节点到末尾，类似于剪切粘贴的效果
<div id="div1">
<ul id="div1ul">
<li>abc</li>
<li>bcd</li>
<li>cde</li>
</ul>
</div>
<div id="div2">
</div>
<input type="button" value="add1" onclick="add();"/>
<script type="text/javascript">
function add(){
//获取到div2
var div2 = document.getElementById("div2");
//获取到ul
var ul2 = document.getElementById("div1ul")
div2.appendChild(ul2);
}
</script>
insertBefore(newNode,oldNode)在某节点之前添加一个新节点
<ul id="ul1">
<li id="li1">abc</li>
<li id="li2">bcd</li>
<li id="li3">cde</li>
<li id="li4">def</li>
</ul>
<input type="button" value="insert" onclick="insert1();"/>
<script type="text/javascript">
function insert1(){
//在<li>cde</li>之前添加<li>添加内容</li>
//获取到li<li>cde</li>
var li = document.getElementById("li3");
//创建li标签
var li5 = document.createElement("li");
//创建文本内容
var text5 = document.createTextNode("添加内容");
//将文本内容添加在li下
li5.appendChild(text5);
//获取到ul
var ul2 = document.getElementById("ul1");
//将li添加到ul下
ul2.insertBefore(li5,li3);
}
</script>
removeChild()删除节点，通过父节点删除,不能自己删除自己
replaceChild(newNode,oldNode)替换节点通过父节点替换子节点
cloneNode(Boolean)复制节点（Boolean判断是否复制节点）
13、innerHTML
这个标签不是DOM属性的内容，但是大多数浏览器都支持的属性
第一个作用：获取文本内容
<span id="sp1">哈哈哈哈呵呵呵呵</span>
<script type="text/javascript">
var span1 = document.getElementById("sp1");
alert(span1.innerHTML);
</script>
第二个作用：向标签里面设置内容（可以是HTML代码）
<span id="sp1">哈哈哈哈呵呵呵呵</span>
<div id="div1">
</div>
<script type="text/javascript">
var span1 = document.getElementById("sp1");
var div1 = document.getElementById("div1");
div1.innerHTML = "<span id=\"sp1\">哈哈哈哈呵呵呵呵</span>";
</script>
网友评论