java之JavaScript的使用

学习java的第十九天

    • JavaScript简介
    • JS的基本语法
    • javascript有哪些类型?
    • js里面的方法(函数):
    • js对DOM的操作
    • 对document中元素的操作:
    • 给页面元素添加事件:
    • js中常用的事件:
    • 字符串处理

JavaScript简介

原名是LiveScript,是Netscape(网景)公司开发的,后来改名JavaScript
JavaScript的作用:
1)实现网页特效
2)实现表单验证,减轻服务器压力
3)做网页游戏
4)做服务器开发(Node.js)

JS的基本语法

是一门脚本语言,也是一个弱类型的语言,Java是强类型的语言。
在页面上使用js。
// 可以写在head里,也可以写在html结束标记后面,还可以写在任意位置。尽量的写在后面,以便页面内容先加载
<script type="text/javascript">   
</script>

javascript有哪些类型?

变量定义: var i = 0; 也可以写作 i = 0;
变量类型由值决定。var i = 0; 此时i是数字类型,i = "aaa"; 此时i是字符串类型。
javascript有哪些类型?
数字(整数和小数),也就意味着 5 / 2 值为2.5
字符串类型:"aaa"
布尔类型:true或者false
数组:[], 也可以用Array
对象(字典、map):{"name":"mary", "sex":"女"}
函数类型:类似于c语言中的函数指针。

js里面的方法(函数):

function 函数名(参数列表){// 代码

}

// 求1...100的和
<script type="text/javascript">
	fn1();
	function fn1(){
		var sum = 0;
		for(var i = 1; i <= 100; i++){
			sum += i;
		}
		console.log(sum);
	}
</script>
// 数组的使用
<script type="text/javascript">
//	var arr = new Array(20);  // 直接创建集合给定大小20
//	var arr = new Array(); // 创建集合没有大小
	var arr = []; // 创建数组没有大小
	// 数组和集合操作几乎一样
	console.log(arr[1]);
	arr[3] = 4;
	console.log(arr.length);
	arr[10] = 11;
	console.log(arr.length); // 11
	console.log(arr[5]);  // 值为undefined , 表示未定义
//	console.log(a); // 一旦某一句代码出错了,后面的代码不会被执行,但是前面的代码还是可以执行
	a = 5;
	console.log(a);
	arr.push(12);  // 把数组当集合使用,可以直接用push方法赋值
	console.log(arr[11]);
</script>
// map或者对象的操作
<script type="text/javascript">
	var m = {"name" : "mary", "sex":"女", 
		"introduce": function(){
		alert("我的名字为:mary, 性别为女");
	}}; // 可以看作hashmap, 也可以看作是一个对象
	console.log(m["name"]); // 使用key来获得值
	console.log(m.sex); // 使用对象的属性获得值
	m.introduce();
</script>
// 基本的函数操作
<script type="text/javascript">
	function fn1(){
		console.log("hello, world1");
	}
	function fn2(){
		return fn1;
	}
	function fn3(){
		return fn2;
	}
	fn3()()();
</script>

<script type="text/javascript">
	// 匿名函数
	var a = function(){
		console.log("hello, world12");
	}
	a();
	function fn3(){
		return function(){
			return function(){
				console.log("hello");
			}
		}
	}
	fn3()()();
</script>

<script type="text/javascript">
    // 带参数的函数
	function sum(num1, num2){
		return num1 + num2;
	}	
	function sub(num1, num2){
		return num1 - num2;
	}	
	// 将函数作为参数传递
	function fn1(fn){
		var i = 5;
		var j = 8;
		return fn(i, j);
	}
	console.log(fn1(sub));
</script>

js对DOM的操作

整个浏览器结构如下:
​	window
​	| | |
​	document (文档) history(历史记录) location(路径)| | |
​ html 前进,后退 刷新, 跳转
| |
head body
window.history.back(); // 后退         也可以简写为history.back()
// 注意:window.document,window.history,window.location里面的window可以省略
history.forward(); // 前进
location.reload(); // 重新加载,
location.href = "https://www.baidu.com"; // 跳转到页面
// 改变页面背景颜色
document.body.style.backgroundColor = "red";
//或者
document.body.style.cssText = "background-color: blue;";

对document中元素的操作:

// 得到元素(4种常用方式)
// 通过id获取元素,由于id应该是唯一的,所以只能获取一个元素,如果id重复,只会获取第一个元素
var div1 = document.getElementById("div1");
// 给元素内部添加内容(html内容)
div1.innerHTML = "百度一下";
// 通过标签名称获取元素, 能够获得所有的该标签元素,结果为一个数组
var divArr = document.getElementsByTagName("div");
for (var i =0; i < divArr.length; i++) {
    // 给元素内部添加内容(文本内容)
    divArr[i].innerText = "千锋一下";
}
// 给多个元素添加了name属性(可能没有提示,强行添加即可),能够获得所有的有该name的元素,结果为一个数组
var divArr = document.getElementsByName("aa");
for (var i =0; i < divArr.length; i++) {
    divArr[i].innerText = "千锋一下";
}
// 给多个元素添加类样式(class属性),能够获得所有的有该样式的元素,结果为一个数组
var divArr = document.getElementsByClassName("aa");
for (var i =0; i < divArr.length; i++) {
    divArr[i].innerText = "千锋一下";
}
// 获得一个元素的所有子元素(数组)
document.getElementById("div1").children;
// 设置元素的值
// 设置属性值(通过.属性)
document.getElementById("img1").src = "img/6.jpg";
// 设置标签体(里面的内容)。使用上面的innerHTML或者innerText
// 设置样式的值,可以使用style.样式名称,也可以使用style.cssText="样式键值对"

给页面元素添加事件:

<body>
    <img id="img1" src="img/1.jpg" width="200px"/><br />
    <input type="button" value="隐藏" onclick="fnHide()"/>
    <input type="button" value="显示" onclick="fnShow()"/>
</body>
<script type="text/javascript">
	function fnShow(){
		document.getElementById("img1").style.display = "block";
	}	
	function fnHide(){
		document.getElementById("img1").style.display = "none";
	}
</script>

js中常用的事件:

onblur:失去焦点事件
onchange:值改变事件
onclick:点击事件
onfocus:获得焦点事件
onkeydown:按键按下事件
onkeyup:按键弹起事件
onkeypress:按键敲击事件
onload:一般使用在body上,表示页面加载完成事件
onmousedown:鼠标按下事件
onmouseup:鼠标弹起事件
onmousemove:鼠标指针移动到某元素上
onmouseout:鼠标指针移除某元素
onmouseleave:基本等同于onmouseout
onmouseenter:基本等同于onmousemove
onresize:浏览器调整大小事件
onselect:下拉框选择事件
onsubmit:表单提交事件
<!-- 通过键盘事件移动页面小方块 -->
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			div{
				border: 1px solid red;
				height: 40px;
				width: 40px;
				position: absolute;
				left: 0px;
				top: 0px;
			}
		</style>
	</head>
	<body onload="fn1()">
		<div id="div1">
		</div>
	</body>
</html>

<script type="text/javascript">
	function fn1(){
		var left = 0;
		var top = 0;
		var div1 = document.getElementById("div1");
		window.onkeydown = function(event){
			if(event.keyCode == 37){ // 左
				left -= 5;
				div1.style.cssText = "left: "+(left)+"px;top:"+top+"px";
			}else if(event.keyCode == 38){ // 上
				top -= 5;
				div1.style.cssText = "left: "+(left)+"px;top: "+(top)+"px;";
			}else if(event.keyCode == 39){ // 右
				left += 5;
				div1.style.cssText = "left: "+(left)+"px;top:"+top+"px";
			}else if(event.keyCode == 40){ // 下
				top += 5;
				div1.style.cssText = "left: "+(left)+"px;top: "+(top)+"px;";
			}
		}
	}
</script>

字符串处理

判断两个字符串是否相等使用==,在Java中字符串操作的方法js里面大部分都一样,但是参数可能有区别,需要在使用的时候注意。
将字符串转换成数字,parseInt("100"):转换成整数;parseFloat("100.5"):转换成小数。
并不会像Java中出现转换异常,会将能转换的就转,不能转的就不转,例如:
var a = parseInt("100abc"); a的值为100;
######表单元素处理
常见的表单元素:

<!--
get表示表单提交的方法:有get和post两种
action表示表单提交的地址,里面一般写的是一个路径
onsubmit表示表单提交事件,里面应该去调用表单验证的方法,表单验证的方法应该返回一个布尔值,当返回true时,表单能够正常提交,当返回false时,表单无法提交。注意:onsubmit中必须要有return-->
<form method="get" onsubmit="return check()" action="test.html">
    <!-- 文本框 -->
    <input type="text" id="username" name="username" value="" placeholder="用户名"/><br />
    <!-- 密码框 -->
    <input type="password" name="pwd" value="" placeholder="密码"/><br />
    <!-- 密码框 -->
    <input type="password" name="confirmPwd" value="" placeholder="验证密码"/><br />
    <!-- 文本框 -->
    <input type="text" name="email" value="" placeholder="邮箱"/><br />
    <!-- 单选按钮, 要达到单选的互斥效果,必须name一致 -->
    <input type="radio" name="sex" checked="checked" value="男"/><input type="radio" name="sex" value="女"/><br />
    <!-- 下拉框 -->
    <select name="job">
        <option value="1">法师</option>
        <option value="2">战士</option>
        <option value="3">道士</option>
    </select><br />
    <!-- 复选框 -->
    <input type="checkbox" name="hobby" value="1"/>看小说
    <input type="checkbox" name="hobby" value="2"/>打游戏
    <input type="checkbox" name="hobby" value="3"/>睡觉<br />
    <!-- 文件上传框 -->
    照片上传:<input type="file" name="photo"/><br />
    <!-- 表单提交按钮 -->
    <input type="submit" value="注册"/>
    <!-- 表单重置按钮 -->
    <input type="reset" value="重置"/>
    <!-- 普通按钮 -->
    <input type="button" value="普通按钮"/>
</form>
// 表单验证
<script type="text/javascript">
	function check(){
		var u = document.getElementById("username");
//		if(u.value.trim() == ""){
//			alert("用户名不能为空");
//			// 设置焦点
//			u.focus();
//			return false;
//		}else 
		if(u.value.trim().length < 6){
			alert("用户名长度必须是6位以上");
			u.focus();
			return false;
		}
		
		// 通过document.表单的名称.表单元素的名称得到表单元素
		var p = document.frm1.pwd;
		if(p.value.length < 6){
			alert("密码长度必须是6位以上");
			p.focus();
			return false;
		}
		
		var cp = document.frm1.confirmPwd;
		if(p.value != cp.value){
			alert("两次密码输入不一致");
			return false;
		}
		
		var email = document.frm1.email;
		if(email.value.trim() == ""){
			alert("邮箱不能为空");
			// 设置焦点
			email.focus();
			return false;
		}
		
		
		if(email.value.indexOf(".") - email.value.indexOf("@") <= 1){
			alert("邮箱格式不正确");
			// 设置焦点
			email.focus();
			return false;
		}
		
		var hobbyArr = document.frm1.hobby;
		var isSelect = false;
		for(var i= 0; i < hobbyArr.length; i++){
			if(hobbyArr[i].checked){
				isSelect = true;
				break;
			}
		}
		if(!isSelect){
			alert("请至少选择一个爱好");
			return false;
		}
		
		// 在Java中foreach,循环的是里面元素,例如此处在java中i表示数组中的元素,但是在js中此处的i表示下标
//		for(i in hobbyArr){
//			alert(hobbyArr[i].checked);
//		}
		var photo = document.frm1.photo;
		if(photo.value.trim() == ""){
			alert("上传文件不能为空");
			return false;
		}
		return true;
	}
</script>

你可能感兴趣的:(java之JavaScript的使用)