JavaScript入门_语法、函数、对象、DOM、事件
JavaScript概述
JavaScript是基于对象和事件驱动的脚本语言，主要应用在**客户端，*以下简称*JS
JS具有以下特点：
- 交互性（它可以做的就是信息的动态交互）
- 安全性（不允许直接访问本地硬盘）
- 跨平台性（只要是可以解释Js的浏览器都可以执行，和平台无关）
JS与Java的区别
- JS是基于对象，Java是面向对象
- JS只需解释就可以执行，Java需要先编译成字节码文件，再执行
- JS是弱类型，Java是强类型，即Java需要严格定义对象的属性方法、JS不需要，与python一样
JS与HTML结合
Js代码一般写在html的head中
<script type="text/javascript">
<!--Js代码必须写在脚步标签之内-->
</script>
外部引入相关JS文件
<script type="text/javascript" src="js/js_demo1.js"></script>
注意：如果引入了外部的js文件就不能在这个js的脚本标签内些js代码了
JavaSript语法
硬规范
- 区分大小写，与Java一致
- 变量弱类型：与Java不一样。JavaScript中的变量无特定的类型，定义变量时只用var 运算符，可以将它初始化为任意的类型。变量的类型取决于给变量赋值的内容
- 每行结尾的分号可有可无：与Java不一样。如果一条语句的结尾没有分号表明结束的话，前提是这样没有破坏代码的语义。良好的编写代码习惯是加入分号
- 注释：与Java一样。支持”//”、”/**/”这几种常见的注释方式
- {}括号表明代码块：与Java一样
变量
- 变量的定义：
var 变量名字 = 变量的值； - Java中局部变量必须赋给初始化，但是在js中不是必须的
- 变量定义时候不指定具体的数据类型，而是根据具体赋给的值来决定是什么类型(弱类型)
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
var age = 10;
var name = 'renliang';
var isMarry = false;
document.write(age + "数据类型是:"+(typeof age)+"<br>");
document.write(name + "数据类型是:"+(typeof name)+"<br>");
document.write(isMarry + "数据类型是:"+(typeof isMarry)+"<br>");
</script>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
效果：
document.write 表示向页面写入内容
数据类型
- 原始值：是存储在栈中的简单数据段，也就是说，它们的值直接存储在变量访问的地址
- 引用值：是存储在栈中的对象，也就是说，存储在变量出的值是一个指针，指向存储对象的内存处
这跟Jave是类似的。
原始值
五种原始类型，即Undefined、Null、Boolean、Number和String
Number类型：代表是数值类型，包括java中的6种数值类型，不管是整数还是小数都是使用number类型
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
var price = 100.12;
document.write("price:"+price+" 数据类型："+(typeof price) +"<br>");
//定义数值类型的包装类
var age = new Number(20);
document.write("age:"+age+" 数据类型："+(typeof age)+"<br>");
//包装类可以获取最大值和最小值
document.write(" 数值类型的最大值："+Number.MAX_VALUE);
document.write(" 数值类型的最小值："+Number.MIN_VALUE);
</script>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
String类型：
字符串类型，在js中没有字符类型，字符串类型可以使用‘ ’也可以使用“ ”
js的字符串也封装了一些字符串常用的方法
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
var name = 'www.java.cn';
document.write("name:"+name+" 数据类型："+(typeof name) +"<br>");
var name1 = new String('java');
document.write("name1:"+name1+" 数据类型："+(typeof name1) +"<br>");
var xindex = name.indexOf("x");
document.write(" x的索引："+xindex+"<br>");
var strsub = name.substring(3, 8);
document.write(" 切割的字符串："+strsub+"<br>");
document.write(" 字符串的长度："+name.length+"<br>");
</script>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
效果：
Boolean类型
一共两个值true和false和java一样的
Undefined类型
Undefined类型只有一个值，即undefined,当声明的变量未初始化时，该变量的默认值是undefined
当函数无明确返回值时，返回的也是值undefined
Null类型
Null类型也只有一个值null，即它的字面量。值undefined实际上是从值null派生来的，因此把它们定义为相等的
alert(null == undefined) //输出 true
尽管这两个值相等，但它们的含义不同，undefined是声明了变量但未对其初始化，null则用于表示尚未存在的对象，比如无法获得文档中的对象
引用值:
Math
Math对象不能用 new运算符创建，如果试图这样做则给出错误。在装载脚本引擎时由该引擎创建该对象。其所有方法和属性在脚本中总是可用
Date
//创建引用时间类型
var birthday = new Date();
//日期设置
birthday.setDate(22);
//日期获取
document.write(birthday.getFullYear()+"年");
document.write((birthday.getMonth() + 1)+"月");
document.write(birthday.getDate()+"日");
document.write(birthday.getHours()+"时");
document.write(birthday.getMinutes()+"分");
document.write(birthday.getSeconds()+"秒");
document.write(birthday.getMilliseconds()+"毫秒");
数组
数组对象用来在单独的变量名中存储一系列的值
我们使用关键词 new 来创建数组对象。下面的代码定义了一个名为 myArray 的数组对象：
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
var arr = new Array();
arr[0] = 1;
arr[1] = 23;
arr[2] = 55;
for(var i = 0; i < arr.length; i++){
document.write(arr[i]+"<br>");
}
//在js中数组的长度不固定，动态扩展，和java中的集合arrayList一样
var arr = new Array('a', 'hgh', 'ghh');
arr[3] = 'ab';
arr[4] = 'abc';
for(var i = 0; i < arr.length; i++){
document.write(arr[i]+"<br>");
}
</script>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
注意：数组的长度是不固定的，可以自动扩展，而且我们不需要指定数组的长度。
Global
该对象可用来做数据转换
**isNaN()😗判*断是否不是一个数字，是一个能转成数字的类型则返回false，如果是一个不能转换成数字的是true
parseInt():把数据变成整数
parseFloat():把数据变成小数
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
var num = '60.2';
alert(isNaN(num));
//把字符串转换成数值
var numb = new Number(num);
alert(numb + 10);
//使用global来做数值转换，如果是小数那么会自动取整
numb = parseInt(num);
alert(numb + 10);
//把字符串类型的小数转换成数值类型的小数
numb = parseFloat(num);
alert(numb + 10);
</script>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
JS方法/函数
语法:
function 方法名(参数...){
return xxx；//可选
}
var 方法名 = function (参数...){
return xxx；//可选
}
示例
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
/**
* 方法的定义
*/
function showInfo(){
alert("www.java.cn");
}
function showInfo(){
alert("JavaScript method");
}
/**
* 变量的名字就是方法的名字
*/
var showInfo1 = function(){
alert("拓薪教育");
}
var showInfo1 = function(){
alert("大家好");
}
alert(typeof showInfo1)
//方法的调用
showInfo();
</script>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
注意：js中没有重载机制，如果方法名字相同，后面的方法会把前面的方法覆盖掉,我们在调用方法的时候，我们传递的参数可以少于形参，从左向右赋值，如果调用时实参多于形参，也是从左向右赋值，所多出来的实参就没有用
Object
JS中也有Object的说法，与Java的区别是，JS直接new即可，无需提前定义，new出来后根据赋值情况也会有属性概念。
创建对象的第一种方式：
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
/**
* 根据object来创建一个对象
*/
function createPerson(username, password){
var obj = new Object();
//定义对象的属性
obj.username = username;
obj.password = password;
//定义对象的方法
obj.showInfo = function(){
alert(this.username + " "+ this.password);
}
return obj;
}
var person = createPerson("JunSir", "123");
//alert(person.username + " " + person.password);
//调用对象的方法
person.showInfo();
</script>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
创建对象的第二种方式：
这是一种类似JSON对象形式的对象创建
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
//创建以键值对的方式的对象，我们也管它叫json对象
var person = {username : "JunSir", age:18, address:'深圳'};
//alert(typeof person);
alert(person.address + " "+person.username);
</script>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
创建对象的第三种方式：
类似Java中的get方法
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
function showInfo(){
alert(this.username + " "+ this.password);
}
/**
* 根据object来创建一个对象
*/
function createPerson(username, password){
var obj = new Object();
//定义对象的属性
obj.username = username;
obj.password = password;
//引入外部的方法作为对象方法
obj.showInfo = showInfo;
//定义对象的方法
return obj;
}
var person = createPerson("JunSIr", "123");
//alert(person.username + " " + person.password);
//调用对象的方法
person.showInfo();
</script>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
创建对象的第四种方式：
类似Java的构造器，方法直接定义在对象中，直接调用对象的方法。
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
function Person(username , password){
//通过this来直接指定属性，不需要创建Object
this.username = username;
this.password = password;
this.showInfo = function(){
alert(this.username + " " + this.password);
}
//不需要return，默认隐含了return
}
var person = new Person("JunSIr", "123");
person.showInfo()
</script>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
创建对象的第五种方式
与上面的差异是调用方法比较花里胡哨了
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
function Person(username, age){
this.username = username;
this.age = age;
}
//以原型方式来赋值方法
Person.prototype.showInfo = function(){
alert(this.username + " " + this.age);
}
var person = new Person("JunSIr", 123);
person.showInfo();
</script>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
统一效果：
DOM解析
当标记型文档（HTML/XML）被DOM解析器解析后，会按照标签的层次关系，产生一颗dom树结构
这个树的每个分支被称为一个节点。
我们就是研究如何获取每个节点，并对节点进行操作的
而浏览器本身具备了DOM解析器,所以可以对标记型文本进行DOM解析
window对象：
Window 对象代表一个浏览器窗口，我们可以利用这个内置对象做很多事情，就比如获取DOM
操控地址栏
<script type="text/javascript">
//当前浏览器窗口的地址
var url = window.location.href;
function turn(){
//修改浏览器的地址
window.location.href = "http://www.tjava.cn";
}
</script>
常用window内置方法
- alert：
alert(”警告“)弹出警告提示窗口，内容在括号内写，括号内格式为”警告内容“ - confirm：
confirm("是否删除")二次确认框，一般用于删除和重要的操作，它的返回值是true和false，点击确定返回true，点击取消返回false - open：
window.open("testHtml.html"); 当有事件触发此方法时弹出test.html网页窗口，该方法有多参数可设置，如下
window.open('page.html','_blank','height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no')
参数解释：
window.open 弹出新窗口的命令；
'page.html' 弹出窗口的文件名；
_blank弹出新窗口；
height=100 窗口高度；
width=400 窗口宽度；
top=0 窗口距离屏幕上方的象素值；
left=0 窗口距离屏幕左侧的象素值；
toolbar=no 是否显示工具栏，yes为显示；
menubar，scrollbars 表示菜单栏和滚动栏。
Resizable=no 是否允许改变窗口大小，yes为允许；
location=no 是否显示地址栏，yes为允许；
status=no 是否显示状态栏内的信息（通常是文件已经打开），yes为允许；
获取DOM:
文档对象的加载顺序是从上到下的，所以我们js想要获得dom对象，一定要等到文档对象加载完毕在获得
根据元素的id获得DOM对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function myclick(){
//根据文档对象的id来获得dom对象
var obj = document.getElementById("username");
alert(obj);
//获得用户名的值
var username = obj.value;
alert(username);
//给input设置值
obj.value = "Java";
//设置元素的样式
obj.style.background = "yellow";
//获得password的对象
var obj1 = document.getElementById("password");
alert(obj1.value);
}
</script>
</head>
<body>
用户名：<input id="username" type="text" name="username" value="JunSIr"><br>
密码：<input id="password" type="password" name="password" value="123">
<input type="button" value="点击" onclick="myclick()">
</body>
</html>
根据元素的name来获得DOM对象
适用于多选框 name一致的情况，获取整个多选框。
相对来说，id是每个标签的唯一标识，而多选框显然使用id来获取DOM是不合适的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function myclick(){
//根据元素的name来获得元素，返回的是数组
var favors = document.getElementsByName("favor");
for(var i = 0; i < favors.length; i++){
//获得数组中的每一个元素
var f = favors[i];
//如果被选择，打印
if(f.checked){
alert(f.value);
}
}
}
//多选框全选
function chkAll(){
var favors = document.getElementsByName("favor");
for(var i = 0; i < favors.length; i++){
//获得数组中的每一个元素
var f = favors[i];
f.checked = true;
}
}
//多选框反选
function reverChkAll(){
var favors = document.getElementsByName("favor");
for(var i = 0; i < favors.length; i++){
//获得数组中的每一个元素
var f = favors[i];
if(f.checked){
f.checked = false;
}else{
f.checked = true;
}
}
}
</script>
</head>
<body>
爱好：<input type="checkbox" name="favor" value="1">看电影
<input type="checkbox" name="favor" value="2">打台球
<input type="checkbox" name="favor" value="3">处对象
<input type="button" value="点击" onclick="myclick()">
<input type="button" value="全选" onclick="chkAll()">
<input type="button" value="反选" onclick="reverChkAll()">
</body>
</html>
根据元素标签名获得DOM对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function myclick(){
//根据元素的标签名获得dom对象，返回的是数组
var objs = document.getElementsByTagName("input");
for(var i = 0; i < objs.length; i++){
alert(objs[i].value);
}
}
</script>
</head>
<body>
用户名：<input id="username" type="text" name="username" value="renliang"><br>
密码：<input id="password" type="password" name="password" value="123">
<input type="button" value="点击" onclick="myclick()">
</body>
</html>
DOM写入_innerText与innerHTML
对某个DOM对象内部写入文本内容或HTML代码以展示相关样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.myclass{
border: 1px solid black;
width: 100px;
height: 100px;
}
</style>
<script type="text/javascript">
function myclick(){
//获取div1的dom
document.getElementById("div1").innerText = "我是div1";
//innerText是指的元素中的 非html标签的内容，如果有html不会被浏览器解析
document.getElementById("div2").innerText = "<font color='red'>我是div1</font>";
//如果有html会被浏览器解析
document.getElementById("div3").innerHTML = "<font color='red'>我是div1</font>";
}
</script>
</head>
<body id="mybody">
<!-- 定义一堆空的div，由上面方法被调用而被写入 -->
<div id="div0">
<div id="div1" class="myclass"></div>
<div id="div2" class="myclass"></div>
<div id="div3" class="myclass"></div>
</div>
<input type="button" value="点击" onclick="myclick()">
</body>
</html>
效果：
innerText与innerHTML的获得：
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.myclass{
border: 1px solid black;
width: 100px;
height: 100px;
}
</style>
<script type="text/javascript">
function myclick(){
//innerText获取的时候只能拿到元素内的除了html元素外的文本内容
var t1 = document.getElementById("div2").innerText;
alert(t1);
//获得到元素内的所有内容
var t2 = document.getElementById("div3").innerHTML;
alert(t2);
}
</script>
</head>
<body id="mybody">
<div id="div0">
<div id="div1" class="myclass"></div>
<div id="div2" class="myclass">aaa<font color='red'>我是div1</font></div>
<div id="div3" class="myclass">aaa<font color='red'>我是div2</font></div>
</div>
<input type="button" value="点击" onclick="myclick()">
</body>
</html>
效果：
DOM追加与删除
完成表单添加一行与删除一行的操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.mytable{
width: 300px;
border-collapse: collapse;
}
tr{
height: 25px;
}
</style>
<script type="text/javascript">
function addrow(){
//获得表体的dom对象
var tbObj = document.getElementById("tb");
//创建 tr行 dom对象
var trObj = document.createElement("tr");
//创建td列 dom对象
var td0 = document.createElement("td");
//创建一个input类型的多选
var ck = document.createElement("input");
//设置属性
ck.setAttribute("type", "checkbox");
//把ck的dom对象追加到td0内部
td0.appendChild(ck);
//创建三个列
var td1 = document.createElement("td");
var td2 = document.createElement("td");
var td3 = document.createElement("td");
//把3个td追加到tr里面
trObj.appendChild(td0);
trObj.appendChild(td1);
trObj.appendChild(td2);
trObj.appendChild(td3);
//把tr对象追加到tb里面
tbObj.appendChild(trObj);
}
function deleteRow(){
//获得表体的dom对象
var tbObj = document.getElementById("tb");
//获得所有的表体的内部的input
var is = tbObj.getElementsByTagName("input");
for(var i = is.length-1; i > 0; i--){
//获得被选中的多选
if(is[i].checked){
//删除被选中的元素，获得父元素
var trObj = is[i].parentNode.parentNode;
tbObj.removeChild(trObj);
}
}
}
</script>
</head>
<body id="mybody">
<input type="button" value="添加一行" onclick="addrow()">
<input type="button" value="删除" onclick="deleteRow()">
<table border="1" class="mytable">
<thead>
<tr>
<td></td>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
</tr>
</thead>
<tbody id="tb">
<tr>
<td><input type="checkbox"></td>
<td>JunSir</td>
<td>18</td>
<td>男</td>
</tr>
</tbody>
</table>
</body>
</html>
效果：
DOM替换
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.myclass{
border: 1px solid black;
width: 100px;
height: 100px;
}
</style>
<script type="text/javascript">
function myclick(){
var parentDom = document.getElementById("div0");
//获得div3的dom
var div1Dom = document.getElementById("div1");
var div3Dom = document.getElementById("div3");
parentDom.replaceChild(div3Dom, div1Dom);
}
</script>
</head>
<body id="mybody">
<div id="div0">
<div id="div1" class="myclass">div1</div>
<div id="div2" class="myclass">aaa<font color='red'>我是div2</font></div>
<div id="div3" class="myclass">aaa<font color='red'>我是div3</font></div>
</div>
<input type="button" value="替换" onclick="myclick()">
</body>
</html>
效果：
点击“替换”后
完成DOM的克隆
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.myclass{
border: 1px solid black;
width: 100px;
height: 100px;
}
</style>
<script type="text/javascript">
function myclick(){
var parentDom = document.getElementById("div0");
//获得div1的dom
var div1Dom = document.getElementById("div1");
//复制一个dom对象
var cn = div1Dom.cloneNode(true);
parentDom.appendChild(cn);
}
</script>
</head>
<body id="mybody">
<div id="div0">
<div id="div1" class="myclass">div1</div>
</div>
<input type="button" value="克隆" onclick="myclick()">
</body>
</html>
效果：
JavaScrip事件
**示例：**给DOM对象赋予点击事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function myclick(){
alert(0);
}
</script>
</head>
<body>
<input type="button" value="点击" onclick="myclick()">
<input id="b1" type="button" value="点击1">
</body>
<script type="text/javascript">
//赋予点击事件
document.getElementById("b1").onclick = function(){
alert(1);
}
</script>
</html>
JS常用事件：
1.onblur：（使用在表单元素中，当元素失去焦点的时候执行）
2.onchange：（使用在表单元素中，当某些东西改变是执行）
3.onclick：（鼠标点击一个元素时执行）
4.ondblclick：（鼠标双击一个元素时执行）
5.onfocus：（使用在表单元素中，当元素获得焦点时执行）
6.onkeydown： （按下某个按键时执行）
7.onkeyup：（释放某个按键时执行）
8.onload：（在body标签中使用，载入页面的时候执行）
9.onselect：（用在表单元素中，当元素被选择时执行）
10.onmousedown：（按下鼠标按键时执行）
11.onmousemove：（鼠标光标在元素上移动时执行）
12.onmouseout：（鼠标光标移开元素时执行）
13.onmouseover：（鼠标光标移到元素上时执行）
14.onmouseup：（当释放鼠标按键时执行）
17.onsubmit：（用在表单元素中，当表单提交时执行）
<script type="text/javascript">
function submitForm(){
return false;
}
</script>
</head>
<body>
<form action="${pageContext.request.contextPath }/success.jsp"
onsubmit="return submitForm();" method="post">
用户名：<input name="username" type="text">
<input type="submit" value="登录">
</form>
</body>
onsubmit的函数前面的return代表如果方法返回true则程序继续向下走，如果返回false则阻止表单提交（action跳转）
7028
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
