javaweb复习——javaScript
引入
Js代码最好写在html的head中
第一种引入方式
<script type="text/javascript">script>
Js代码必须写在脚步标签之内
第二种引入方式
引入外部的js文件
<script type="text/javascript" src="js/js_demo1.js">script>
如果引入了外部的js文件就不能在这个js的脚本标签内写js代码了，整个工程的编码使用UTF-8
语法
- 区分大小写：与Java一样。变量、函数名、运算符以及其他一切东西都是区分大小写的。
- 变量是弱类型的：与Java不一样。JavaScript中的变量无特定的类型，定义变量时只用var 运算符，可以将它初始化为任意的类型。变量的类型取决于给变量赋值的内容。
- 每行结尾的分号可有可无：与Java不一样。如果一条语句的结尾没有分号表明结束的话，前提是这样没有破坏代码的语义，最好的编写代码习惯是加入分号。
- 注释：与Java一样，支持”//”、”/**/”这几种常见的注释方式。
- {}括号表明代码块：与Java一样。
变量
变量的定义
var 变量名字 = 变量的值；
Java中局部变量必须赋给初始化，但是在js中不是必须的。
Js在定义的时候不指定具体的数据类型，而是根据具体赋给的值来决定是什么类型。
<script type="text/javascript">
var age = 10;
var name = 'renliang';
var isMarry = false;
document.write(age + "数据类型是:"+(typeof age)+"
");
document.write(name + "数据类型是:"+(typeof name)+"
");
document.write(isMarry + "数据类型是:"+(typeof isMarry)+"
");
</script>
变量的特点
<script type="text/javascript">
var age = 10;
var name = 'renliang';
var isMarry = false;
document.write(age + "数据类型是:"+(typeof age)+"
");
document.write(name + "数据类型是:"+(typeof name)+"
");
document.write(isMarry + "数据类型是:"+(typeof isMarry)+"
");
document.write("
");
//js的变量的数据类型随着值的改变而改变
age = true;
document.write(age + "数据类型是:"+(typeof age)+"
");
//js中变量可以重复，下面的变量会把上面重复的变量给覆盖
var name = '拓薪教育';
document.write(name + "数据类型是:"+(typeof name)+"
");
</script>
数据类型
- 原始值，是存储在栈中的简单数据段，也就是说，它们的值直接存储在变量访问的地址。
- 引用值，是存储在栈中的对象，也就是说，存储在变量出的值是一个指针，指向存储对象的内存处。
原始值
五种原始类型，即Undefined、Null、Boolean、Number和String。
Number
代表是数值类型，包括java中的6中数值类型，不管是整数还是小数都是使用number类型。
<script type="text/javascript">
var price = 100.12;
document.write("price:"+price+" 数据类型："+(typeof price) +"
");
//定义数值类型的包装类
var age = new Number(20);
document.write("age:"+age+" 数据类型："+(typeof age)+"
");
//包装类可以获取最大值和最小值，相当于我们java中的访问static的变量，
//使用对象虽然在eclipse中能通过.来提示但是不能访问
document.write(" 数值类型的最大值："+Number.MAX_VALUE);
document.write(" 数值类型的最小值："+Number.MIN_VALUE);
</script>
String
字符串类型，在js中没有字符类型，字符串类型可以使用‘’也可以使用“”，建议使用‘’。
<script type="text/javascript">
var name = 'www.txjava.cn';
document.write("name:"+name+" 数据类型："+(typeof name) +"
");
var name1 = new String('tuoxin');
document.write("name1:"+name1+" 数据类型："+(typeof name1) +"
");
var xindex = name.indexOf("x");
document.write(" x的索引："+xindex+"
");
var strsub = name.substring(3, 8);
document.write(" 切割的字符串："+strsub+"
");
document.write(" 字符串的长度："+name.length+"
");
</script>
Boolean
一共两个值true和false和java一样的。
Undefined
Undefined类型只有一个值，即undefined。
当声明的变量未初始化时，该变量的默认值是undefined。
当函数无明确返回值时，返回的也是值undefined。
Null
Null类型也只有一个值null，即它的字面量。值undefined实际上是从值null派生来的，因此把它们定义为相等的。
alert(null == undefined) //输出 true
尽管这两个值相等，但它们的含义不同。undefined是声明了变量但未对其初始化，null则用于表示尚未存在的对象，比如无法获得文档中的对象。
alert(null == undefined);
var doc = document.getElementById("div2");
alert(doc)
</script>
</head>
<body>
<div id="div1"></div>
页面加载的顺序是从上向下的，所以js是不能使用在他下面的html的
引用值
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 的数组对象：
注意：数组的长度是不固定的，可以自动扩展，而且我们不需要指定数组的长度。
<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]+"
");
}
//在js中数组的长度不固定，和java中的集合一样
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]+"
");
}
</script>
Global方法
常用方法：
- isNaN():判断是否不是一个数字，是一个能转成数字的类型则返回false，如果是一个不能转换成数字的是true
- parseInt():把数据变成整数
- parseFloat():把数据变成小数
<script type="text/javascript">
var num = '60.2';
//isNaN false是不是数值，true是数值,只要是能转换成数值类型的变量的值都认为是数值。
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>
方法定义
语
function 方法名(参数...){
return xxx；//可选
}
var 方法名 = function (参数...){
return xxx；//可选
}
特性
方法同名不管是哪种语法都会把上面的覆盖掉
<script type="text/javascript">
/**
* 方法的定义
*/
function showInfo(){
alert("www.txjava.cn");
}
function showInfo(){
alert("JavaScript method");
}
/**
* 变量的名字就是方法的名字
*/
var showInfo1 = function(){
alert("拓薪教育");
}
var showInfo1 = function(){
alert("大家好");
}
//alert(typeof showInfo1)
//方法的调用
//showInfo();
</script>
方法中没有重载，形参和实参数量可以不同
js中没有重载，如果方法名字相同，后面的方法会把前面的方法覆盖掉,我们在调用方法的时候，我们传递的参数可以少于形参，从左向右赋值，如果调用时实参多于形参，也是从左向右赋值，多出来的实参就没有用。
<script type="text/javascript">
/**
* 方法的定义,方法的参数不需要指定类型，如果方法有返回值使用return加上返回值
*/
function showInfo(a, b){
alert("方法1");
return a + b;
}
/**
* js中没有重载，如果方法名字相同，后面的方法会把前面的方法覆盖掉,我们在调用方法的时候，我们传递的参数可以少于形参，从左向右复制
*/
function showInfo(a, b, c){
alert("方法2"+ c);
return a + b + c;
}
/* var showInfo = function(a, b){
return a + b;
}
var showInfo = function(a, b, c){
return a + b + c;
} */
var result = showInfo(5, 5);
alert(result);
</script>
Function对象
//方法对象是每一个方法定义的的底层写法，第一个参数是字符串类型，方法的每一个参数用逗号分隔，第二个参数是方法体
var fun = new Function("a, b", "return a + b");
var result1 = fun(2, showInfo(4, 6));
alert(result1)
Object对象
创建对象的第一种方式
<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("renliang", "123");
//alert(person.username + " " + person.password);
//调用对象的方法
person.showInfo();
</script>
第二种方式
<script type="text/javascript">
//创建以键值对的方式的对象，我们也管它叫json对象
var person = {username : "zhangsan", age:30, address:'北京'};
//alert(typeof person);
alert(person.address + " "+person.username);
</script>
第三种方式
<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("renliang", "123");
//alert(person.username + " " + person.password);
//调用对象的方法
person.showInfo();
</script>
第四种方式
<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("lisi", "323");
person.showInfo()
</script>
第五种方式（推荐使用）
<script type="text/javascript">
function Person(username, age){
this.username = username;
this.age = age;
}
/* function User(){
} */
//以原型方式来赋值方法
Person.prototype.showInfo = function(){
alert(this.username + " " + this.age);
}
/* function showInfo(){
alert(this.username + " " + this.age);
} */
var person = new Person("zhangsan", 23);
person.showInfo();
var user = new User();
user.showInfo()
</script>
dom
当标记型文档被DOM解析器解析后，会按照标签的层次关系，产生一颗dom树结构。
这个树的每个分支被称为一个节点，我们就是研究如何获取每个节点，并对节点进行操作的。
而浏览器本身具备了DOM解析器，所以可以对标记型文本进行DOM解析。
Window 对象代表一个浏览器窗口或一个框架。
<script type="text/javascript">
//当前浏览器窗口的地址
var url = window.location.href;
function turn(){
//修改浏览器的地址
window.location.href = "http://www.txjava.cn";
}
</script>
dom获得
文档对象的加载顺序是从上到下的，所以我们js想要获得dom对象，一定要等到文档对象加载完毕在获得。
根据元素的id获得dom对象
<html>
<head>
<meta charset="UTF-8">
<title>Insert title heretitle>
<script type="text/javascript">
function myclick(){
//根据文档对象的id来获得dom对象
var obj = document.getElementById("username");
alert(obj);
//获得用户名的值
var username = obj.value;
alert(username);
//给input设置值
obj.value = "拓薪教育";
//设置元素的样式
obj.style.background = "yellow";
//获得password的对象
var obj1 = document.getElementById("password");
alert(obj1.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>
根据元素的name来获得dom对象
<html>
<head>
<meta charset="UTF-8">
<title>Insert title heretitle>
<script type="text/javascript">
function myclick(){
//根据元素的name来获得元素，返回的是数组
var favors = document.getElementsByName("favor");
for(var i = 0; i < favors.length; i++){
//获得数组中的每一个元素
var f = favors[i];
//alert(f.value);
//alert(f.checked);
/* 原生的js中获得多选的的checked属性是true而不是checked
if(f.checked == "checked"){
alert(f.value);
}
*/
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对象
<html>
<head>
<meta charset="UTF-8">
<title>Insert title heretitle>
<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>
innerText和innerHTML
- innerText：是指的元素中的内容，如果有html不会被浏览器解析
- innerHTML：是指的元素中的内容，如果有html会被浏览器解析
innerText和innerHtml的设置
<html>
<head>
<meta charset="UTF-8">
<title>Insert title heretitle>
<style type="text/css">
.myclass{
border: 1px solid black;
width: 100px;
height: 100px;
}
style>
<script type="text/javascript">
function myclick(){
document.getElementById("div1").innerText = "我是div1";
//innerText是指的元素中的 内容，如果有html不会被浏览器解析
document.getElementById("div2").innerText = "我是div1";
//innerText是指的元素中的 内容，如果有html会被浏览器解析
document.getElementById("div3").innerHTML = "我是div1";
}
script>
head>
<body id="mybody">
<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的获得
<html>
<head>
<meta charset="UTF-8">
<title>Insert title heretitle>
<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'>我是div1font>div>
<div id="div3" class="myclass">aaa<font color='red'>我是div2font>div>
div>
<input type="button" value="点击" onclick="myclick()">
body>
html>
删除
tbObj.removeChild(trObj);
通过父元素的removeChild方法删除子元素
父元素tbObj删除子元素trObj
<html>
<head>
<meta charset="UTF-8">
<title>Insert title heretitle>
<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>任亮td>
<td>18td>
<td>男td>
tr>
tbody>
table>
body>
html>
替换
parentDom.replaceChild(div3Dom, div1Dom);
通过父元素的replaceChild方法将第二个参数子元素替换成第一个参数的子元素
parentDom下的div3Dom将div1Dom替换，需要注意的是原本有三个div，替换后就只有两个
<html>
<head>
<meta charset="UTF-8">
<title>Insert title heretitle>
<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">div1div>
<div id="div2" class="myclass">aaa<font color='red'>我是div2font>div>
<div id="div3" class="myclass">aaa<font color='red'>我是div3font>div>
div>
<input type="button" value="替换" onclick="myclick()">
body>
html>
替换前
替换后
克隆
div1Dom.cloneNode(true)
通过cloneNode方法复制当前元素，参数表示是否保存属性
<html>
<head>
<meta charset="UTF-8">
<title>Insert title heretitle>
<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");
//复制一个dom对象
var cn = div1Dom.cloneNode(true);
parentDom.appendChild(cn);
}
script>
head>
<body id="mybody">
<div id="div0">
<div id="div1" class="myclass">div1div>
<div id="div2" class="myclass">aaa<font color='red'>我是div2font>div>
<div id="div3" class="myclass">aaa<font color='red'>我是div3font>div>
div>
<input type="button" value="克隆" onclick="myclick()">
body>
html>
事件
给dom对象赋予事件
<html>
<head>
<meta charset="UTF-8">
<title>Insert title heretitle>
<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>