一.JavaScript输出的两种方式
-
数据类型的获取
var name = "韩顺平"; //两种输出方式 //弹窗输出,alert() alert(name); //控制台输出,console.log() console.log(name); //输出变量的类型,typeof console.log(typeof name); -
弹窗输出
//弹窗输出,alert() alert(name); //弹窗确认输出,点击确认返回true,点击取消返回false confirm("确认删除?"); -
控制台的输出类型
console.log();//输出日志的形式 console.info();//输出信息的形式 console.warn();//输出警告的形式 console.error();//输出错误的形式 -
javaScript输出时,使用逗号(",")拼接变量和使用加号("+")拼接变量的区别
- 当拼接的是对象时,使用逗号会打印对象的完整信息,使用加号拼接只打印
[Object object] - 使用逗号拼接,可以输出变量的数据类型
- 当拼接的是对象时,使用逗号会打印对象的完整信息,使用加号拼接只打印
var person = {name:"杨逸"};
//输出对象的完整信息
console.log("逗号拼接:",person);
//只输出是一个对象的标识
console.log("加号拼接"+person);
```
二.写javascript的两种方式
- 两种方式不能混用,混用只生效外部引入的js文件
<!--引入外部的js文件-->
<script type="text/javascript" src="./js/main.js">
//第一种,引入外部的js文件
</script>
<!--直接在html里写javascript-->
<script type="text/javascript" >
//第二种,直接在html里写javascript
</script>
javaScript的特点
- javaScript是解释型语言,javascript在浏览器中边加载边运行,而c语言和c++是编译型语言,先编译再运行
- javaScript是弱类型的语言,变量在运行的过程中可以改变变量的类型,声明变量可以不需要定义数据类型,语句的结束可以不用带分号
- javaScript是脚本语言,可以创建对象,也可以使用现有的对象
javaScript常用的数据类型
- 数值类型(小数和整数都是数值类型):number
- 字符串类型:string
- 对象类型:object
- 布尔类型:boolean
- 函数类型:function
javaScript的特殊值
- undefined 定义一个变量没有赋值时,数据类型就是undefined(未定义的)
- null
- NaN 不是数值的类型,当一个字符串乘一个数字("ahc" * 10)时就是NaN,不能识别的类型就是NaN
javaScript中特殊的运算符
- "==="三个等号表示全等,表示类型相同且值也相同
//表示左右两边的类型相同且值也相同
"abc" === "dbs";
javaScript中的逻辑运算符
- JavaScript中所有变量都可以当做一个boolean类型的变量
- 0,null,undefined,""(空串)都是false,其他的是true
var v = (10 > 9) && (6 < 0);//这里返回的是false
JavaScript的条件表达式
- 类似java的三元运算符
- 返回的部分可以是表达式
//代码演示
var a = (10 > 9)? "kk":"ds";//返回的是字符串"kk"
//返回部分是表达式
var n = (230 > 2 )? "fd" + "edf": (900 + x);
javascript的数组
- 数组的创建
- 数组元素的访问
//创建数组的方式一
var array1 = ["杨逸",123,true];//数组存放元素类型可以不一样
//元素的访问
console.log(array1);//打印整个数组
console.log(array[0]);//打印第一个元素,索引从0开始
//创建数组的方式二
var array2 = [];//创建一个不指定长度的数组
//添加元素
array2[0] = "var1";//向第一个索引加入元素
array2[1] = "var2";
array2[2] = "var3";
//访问不存在的索引
console.log(array2[10]);//不会报错,会打印undefined
//创建数组方式三
var array3 = new Array("var1","var2","var3");//使用new的方式创建数组
//创建数组方式四
var array4 = new Array();//创建一个空数组
- 数组的遍历
var array = [1,2,3,4,5];
length = array.length;//获得数组的长度
for(i = 0;i < length;i++){
console.log(array[i]);
}
javascript的函数
-
函数的定义
//function -->关键字 //hi() -->函数名,小括号为空表示没有参数 //() -->参数列表 function hi(){//没有传参的函数 console.log("杨逸,你好"); alert("hi()函数被调用"); } function f2(name){//带参数的函数 //不用写参数的类型,直接写参数的变量名 alert(name); } //语法格式,与Java类似 function 函数名(参数列表){ 代码块 return 返回的变量; }-
函数的第二种使用方式(将变量指向函数,相当于函数重命名)
<script> //将函数f1赋给变量f,就是把变量f指向函数f1 //相当于给函数重命名 var f = function f1(){ alert("函数的第二种使用方式"); } f;//这里通过f调用f1函数 var f2 = f;//这里又将f2指向f1函数, </script>
-
-
函数的调用
- 可以主动调用
- 也可以通过事件机制调用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script> function hi(){ console.log("杨逸,你好"); alert("hi()函数被调用"); } hi();//主动调用 </script> <title>函数的快速入门</title> </head> <body> <!--onclick表示鼠标左键单击事件,当鼠标点击时会调用hi()函数--> <!--通过事件调用--> <button onclick="hi()">点击触发函数</button> </body> </html> -
函数重载会覆盖先前的函数,只生效最后一个编写的函数
-
函数的参数默认带一个隐藏的形参arguments,arguments是一个可边的数组,传进来的实参都会先存放到arguments可变数组,然后再赋值给相应的形参,
<script> function f1(){ console.log("定义的函数f1()"); } //重载f1() function f1(){ console.log("我是重载的f1函数"); } //调用f1函数,这里调用的是最下面的f1函数 f1(); //函数隐藏形参演示 function f2(){ //使用 "+" 拼接.显示的是arguments的数据类型 console.log("arguments隐藏参数数组的内容=" +arguments); //使用逗号连接,显示的是数组里的参数 console.log("arguments隐藏参数数组的内容=" ,arguments); } f2(1,2,3,"传给隐藏参数的字符串"); </script>
javascirpt的对象
- 创建自定义对象的方式一
- 先创建一个空对象
- 再给对象添加属性和方法
- 使用自定义的对象
- 对象的使用与Java类似
<script>
var person = new Object();//创建一个空对象
person.name = "kk";//给对象添加一个属性并赋值
person.say = function (){//给对象添加了一个函数
console.log("person对象的函数");
console.log(this.name + " ");//javaScript也可以使用this关键字,但需要对象内部
}
//调用对象的方法
person.say();
</script>
-
创建自定义对象的方式二
- 使用大括号包裹
- 属性与值用冒号隔开
- 属性也可以使用双引号("")或单引号('')括起来,不带引号也是可以的
- 每定义一个属性或函数都要用逗号分隔
- 最后大括号后面可以使用分号表示语句结束,也可以不加
<script>
var person = {
"name" : "jj",//定义一个属性,并赋值,
// 属性名与值用冒号(':')分隔,
// 每定义一个属性或函数都要用逗号分隔
job:"",
age : 12,
hi:function (){
console.log("我是方式二创建对象的函数");
}
};
</script>
- 对象的遍历
- 对象类似于哈希表
var obj = {
avatar:'https://a.jpg',
nickName:'昵称',
UID:'5616259',
}
for(key in obj){
console.log(obj[key])
}
JavaScript的事件(event)
- 事件的注册(事件的绑定)
- 当事件发生(触发)后,会执行一段代码或函数,将指定代码或函数关联到事件的操作交事件的注册
- 事件的静态注册(绑定)
- 通过html标签直接绑定事件的方式,叫作事件的静态注册
- 如果需要接受返回值,就要在事件里加上return,对应的html标签里的事件也要带上return
- 事件的动态注册(绑定)
- 通过JavaScript代码得到标签对应的dom对象,然后通过dom对象绑定事件的方式叫作事件的动态注册
dom对象.事件名 = function(){},动态绑定的语法- 动态注册一定要在页面加载完成后,再进行注册
- 如果页面元素没有加载,就得不到对应元素的dom,只能得到一个null
- 具体步骤
- 获得dom对象
- 将dom对象绑定到对应的事件
- 编写事件的具体内容
- 代码演示
- 点击事件(onclick)
- 页面加载完成事件(onload)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script>
//绑定到按钮一被点击的函数
var say = function(){
alert("按钮一被点击");
}
//动态注册一定要在页面加载完成后,再进行注册,
// 如果页面元素没有加载,就得不到对应元素的dom,只能得到一个null
//页面加载完成事件
window.onload = function (){
//通过id得到按钮二的dom对象
var button2 = document.getElementById("button2");
//绑定点击事件
button2.onclick = function (){
//事件的具体内容
alert("按钮二被点击事件");
}
}
</script>
<title>事件的快速入门</title>
</head>
<body>
<!--事件的静态注册,注册到按钮一上-->
<button onclick="say()">点击按钮一事件</button>
<!--事件的动态注册,注册到按钮二上-->
<button id="button2">点击按钮二事件</button>
</body>
</html>
-
失去焦点事件(onblur)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script> function f1(){ //先获得对应的dom(document)对象 var text1 = document.getElementById("text1"); //获得对应的属性,将字母转为大写,然后重新赋值 text1.value = text1.value.toUpperCase(); } //页面加载完成后,动态注册事件 window.onload = function (){ //1.获得dom对象 var text2 = document.getElementById("text2"); //2.绑定事件 text2.onblur = function (){ //3.获得对应的属性,将字母转为大写,然后重新赋值 text2.value = text2.value.toUpperCase(); } } </script> <title>失去焦点事件</title> </head> <body> <h1>失去焦点事件,触发后将字母转为大写</h1> <!--静态注册--> 输入英文单词<input type="text" id="text1" onblur="f1()"> <!--动态注册--> 输入英文单词<input type="text" id="text2"> </body> </html> -
内容改变事件(onchange)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script> function f1(){ alert("工资发生改变"); } //页面加载完成事件 window.onload = function (){ //获得dom对象 var select2 = document.getElementById("select2"); //绑定事件 select2.onchange = function (){ alert("女友发生改变"); } } </script> <title>内容改变事件</title> </head> <body> <!--静态绑定--> <select onchange="f1()"> <option>--工资范围--</option> <option>--5k~10k--</option> <option>--10k~20k--</option> <option>--30k以上--</option> </select><br> <!--动态绑定--> <select id="select2"> <option>--你的女友--</option> <option>--美美--</option> <option>--丽丽--</option> <option>--莉莉--</option> </select><br> </body> </html> -
表单提交事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script> function f1(){ //获得dom对象 var user1 = document.getElementById("user1"); var passwd1 = document.getElementById("passwd1"); //判断 if (user1.value == "" || passwd1.value == ""){ alert("用户名和密码不能为空"); return false; } return true; }; //动态绑定 window.onload = function (){ //获得表单dom对象 var form2 = document.getElementById("form"); //绑定事件 form2.onsubmit = function (){ //获得对应的表单值 var username = form2.username.value; var password = form2.password.value; //判断 if (username == "" || password == ""){ alert("用户名和密码不能为空"); return false; } return true; } } </script> <title>有返回的事件演示</title> </head> <body> <h1>表单一</h1> <!--静态绑定,带返回的事件,要使用return--> <form action="ok.html" onsubmit=" return f1()"> 用户名:<input type="text" id="user1" name="username"> 密 码:<input type="password" id="passwd1" name="password"> <input type="submit" value="表单提交按钮"> </form> <h1>表单二</h1> <!--动态绑定,动态绑定带的返回不需要显示使用return--> <form action="ok.html" id="form"> 用户名:<input type="text" id="user2" name="username"> 密 码:<input type="password" id="passwd2" name="password"> <input type="submit" value="表单提交按钮"> </form> </body> </html> -
事件机制的练习
-
JavaScript中正则表达式的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script>
window.onload = function (){
//获得表单对象
var event = document.getElementById("event1");
//绑定事件
event.onsubmit = function (){
//获得相应的属性值
var username = event.username.value;
var passwd1 = event.passwd1.value;
var passwd2 = event.passwd2.value;
var email = event.email.value;
//判断
if (!(username.length >= 4 && username.length <= 6) ){
alert("用户名长度不合法");
return false;
}
if (passwd1 == "" || passwd2 == ""){
alert("密码不能为空");
return false;
}else if (passwd1.length < 6 || passwd2.length < 6){
alert("密码长度不能小于6");
return false;
}else if (passwd2.length == 6 && passwd1.length == 6){
} else {
alert("密码长度不能大于6");
return false;
}
if (passwd1.length != passwd2.length || passwd1 !== passwd2){
alert("两次密码不一致");
return false;
}
//正则表达式匹配
//javaScript的正则表达式是使用斜杠括住,不是使用引号
var eamilPattern = /^([\w]+)@([\w]+\.)+([a-z]+)$/;
if (!eamilPattern.test(email)){
alert("邮箱格式不正确");
return false;
}
return true;
}
}
</script>
<title>事件的练习</title>
</head>
<body>
<form id="event1">
用户名:<input type="text" name="username">长度(4-6)<br>
密 码:<input type="password" name="passwd1">长度(6)<br>
确 认:<input type="password" name="passwd2">长度(6)<br>
邮 箱:<input type="email" name="email">(满足基本格式)<br>
确认注册<input type="submit" value="注册">
</form>
</body>
</html>
使用JavaScript发出http请求
- 使用的是JavaScript的location对象的href属性发出http请求
- 使用方法是,给href属性设置url地址就会发出一个http请求,一般结合点击事件使用
//使用JavaScript发出http请求
//使用JavaScript的内置对象,location的href属性
location.href = "cartServlet?action=addCart&id="+furnId;
JavaScript的DOM
-
DOM的全称Document Object Mod 文档对象模型
-
document对象的属性也被叫作节点
-
获取dom对象(节点)的四种方式
- 通过标签的id获得对应的一个dom对象,document.getElementById()
- 通过标签的类名获得对应的一个dom对象,document.getElementByClassName()
- 通过标签的name获得一组具有相同name的标签的dom对象,document.getElementsByName()
- 通过标签的名字(如果img标签)获得所有同标签的dom对象,document.getElementsByTagName
-
节点常用属性
- childNodes属性，获取当前节点的所有子节点
- firstChild属性，获取当前节点的第一个子节点
- lastChild属性，获取当前节点的最后一个子节点
- parentNode属性，获取当前节点的父节点
- nextSibling属性，获取当前节点的下一个节点（后一个）
- previousSibling属性，获取当前节点的上一个节点（前一个）
- className用于获取或设置标签的class属性值
- innerHTML属性，表示获取/设置起始标签和结束标签中的内容
- innerText属性，表示获取/设置起始标签和结束标签中的文本
-
获取标签内的信息(innerText,innerHTML)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript"> window.onload = function (){ //获得dom对象 var content = document.getElementById("content"); //绑定事件 content.onclick = function (){ //获得dom对象的便签内容 //innerText获得的是文本内容 //innerHTML获得的是该标签的所有内容 var innerText = content.innerText;//这里得到是"dom学习" var innerHTML = content.innerHTML;//这里获得的是"<div>dom学习</div>",整个h1标签包裹的内容 alert(innerText); alert(innerHTML); } } </script> <title>点击事件,获取便签对象内的文本</title> </head> <body> <h1 id="content"><div>dom学习</div></h1> </body> </html> -
复选框的选择修改
-
通过document.getElementsByName()函数获得,存放复选框数据的集合,然后遍历修改
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script> function selectAll(){ //获得dom对象 //这里通过name获得的是一个,存放所有name=sport复选框的数据的Map集合 var sports = document.getElementsByName("sport"); //遍历修改属性 for (var i = 0; i < sports.length; i++) { sports[i].checked = true; } } function selectNone(){ //获得dom对象 //这里通过name获得的是一个,存放所有name=sport复选框的数据的Map集合 var sports = document.getElementsByName("sport"); //遍历修改属性 for (var i = 0; i < sports.length; i++) { sports[i].checked = false; } } function select(){ //获得dom对象 //这里通过name获得的是一个,存放所有name=sport复选框的数据的Map集合 var sports = document.getElementsByName("sport"); //遍历修改属性 for (var i = 0; i < sports.length; i++) { sports[i].checked = !sports[i].checked; } } </script> <title>复选框的修改</title> </head> <body> 篮球<input type="checkbox" name="sport" value="篮球"> 足球<input type="checkbox" name="sport" value="足球"> 羽毛球<input type="checkbox" name="sport" value="羽毛球"><br> <button value="全选" onclick="selectAll()">全选</button> <button value="全不选" onclick="selectNone()">全不选</button> <button value="反选" onclick="select()">反选</button> </body> </html> -
图片的切换
-
通过标签获得存放所有img标签的dom对象HTMLCollection集合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script>
window.onload = function (){
//获得按钮的dom对象
var button = document.getElementById("button");
//绑定事件
button.onclick = function (){
//获得img标签的dom对象
//通过标签获得一组对象,这里的imgs是一个HTMLCollection集合
var imgs = document.getElementsByTagName("img");
//获得按钮的文本
var innerText = button.value;
//判断
if (innerText == "切换为狗的图片"){
//遍历修改图片的url
for (let i = 0; i < imgs.length; i++) {
imgs[i].src = (i + 4) + ".png";
}
button.value = "切换为猫的图片";
}else {
//遍历修改图片的url
for (let i = 0; i < imgs.length; i++) {
imgs[i].src = (i + 1) + ".png";
}
button.value = "切换为狗的图片";
}
}
}
</script>
<title>图片的替换</title>
</head>
<body>
<img src="1.png">
<img src="2.png">
<img src="3.png"><br>
<input type="button" value="切换为狗的图片" id="button">
</body>
</html>
-
动态添加HTML元素
-
点击按钮添加图片的案例
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script> window.onload = function (){ //获得dom对象 var addElement = document.getElementById("addElement"); //绑定事件 addElement.onclick = function (){ //1.创建一个img标签的dom对象 var img = document.createElement("img"); //2.设置img标签的属性 img.src = "./1.png"; img.width = "100"; //3.最后将img标签加入到body的dom对象中 document.body.appendChild(img); } } </script> <title>动态添加元素</title> </head> <body> <input type="button" id="addElement" value="添加一只小猫"> </body> </html>
JavaScript事件DOM练习
- 实现一个乌龟吃吃鸡的小游戏
- 乌龟碰撞到鸡就游戏胜利
- 使用dom对象得到的像素坐标是字符串,需要进行处理,才能进行坐标的比较
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>乌龟游戏</title>
<style>
*{
border: 0;
margin:0;
}
</style>
<script type="text/javascript">
function move(object){
var value = object.value;
//获得乌龟的dom对象
var wugui = document.getElementById("wugui");
//获得坐标
var top = wugui.style.top;
var left = wugui.style.left;
//这里得到的是字符串"120px"
//截取字符串并转为数字类型
top = parseInt(top.substring(0,top.indexOf("p")));
left = parseInt(left.substring(0,left.indexOf("p")));
switch(value){
case "向上走":
top = (top - 10);
wugui.style.top = top + "px" ;
break;
case "向左走":
left = (left - 10);
wugui.style.left = left + "px";
break;
case "向下走":
top = (top + 10);
wugui.style.top = top + "px" ;
break;
case "向右走":
left = (left + 10);
wugui.style.left = left + "px";
break;
}
//记录鸡的坐标
var cock_x = 200;
var cock_y = 200;
//记录鸡的宽高
var cock_height = 73;
var cock_width = 76;
//乌龟的宽高
var wugui_height = 67;
var wugui_width = 94;
//碰撞判定
var flag1 = 0;
var flag2 = 0;
if (top < cock_y){//乌龟的顶点在鸡的上面
if (top+wugui_height > cock_y){
flag1 = 1;
}
}else {//乌龟的顶点在鸡的下面
if (top < cock_y + cock_height){
flag1 = 1;
}
}
if (left < cock_x){//乌龟的顶点在鸡的左面
if (left + wugui_width > cock_x){
flag2 = 1;
}
}else {//乌龟的顶点在鸡的右面
if (left < cock_x + cock_width){
flag2 = 1;
}
}
//最后判定是否真的碰撞
if (flag2 && flag1){
alert("小鸡真厉害");
wugui.style.top = "120px";
wugui.style.left = "100px";
}
}
</script>
</head>
<body>
<table border="1">
<tr>
<td></td>
<td><input type="button" value="向上走" onclick="move(this)"/></td>
<td></td>
</tr>
<tr>
<td><input type="button" value="向左走" onclick="move(this)"/></td>
<td></td>
<td><input type="button" value="向右走" onclick="move(this)"/></td>
</tr>
<tr>
<td></td>
<td><input type="button" value="向下走" onclick="move(this)"/></td>
<td></td>
</tr>
</table>
<!--把乌龟放在一个div-->
<div id="wugui" style="position: absolute ;left:100px;top:120px;">
<img src="1.bmp" border="1" alt=""/>
</div>
<!--公鸡图片div-->
<div id="cock" style="left:200px;position:absolute;top:200px;">
<img src="2.bmp" border="1" alt=""/>
</div>
</body>
</html>