java之JavaScript的使用

最新推荐文章于 2024-06-28 09:52:57 发布

缘来源去

最新推荐文章于 2024-06-28 09:52:57 发布

阅读量284

点赞数 1

本文链接：https://blog.csdn.net/weixin_45137910/article/details/93161056

版权

学习java的第十九天

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 = "<a href=''>百度一下</a>";
// 通过标签名称获取元素， 能够获得所有的该标签元素，结果为一个数组
var divArr = document.getElementsByTagName("div");
for (var i =0; i < divArr.length; i++) {
    // 给元素内部添加内容（文本内容）
    divArr[i].innerText = "<a href=''>千锋一下</a>";
}
// 给多个元素添加了name属性（可能没有提示，强行添加即可），能够获得所有的有该name的元素，结果为一个数组
var divArr = document.getElementsByName("aa");
for (var i =0; i < divArr.length; i++) {
    divArr[i].innerText = "<a href=''>千锋一下</a>";
}
// 给多个元素添加类样式（class属性），能够获得所有的有该样式的元素，结果为一个数组
var divArr = document.getElementsByClassName("aa");
for (var i =0; i < divArr.length; i++) {
    divArr[i].innerText = "<a href=''>千锋一下</a>";
}
// 获得一个元素的所有子元素(数组)
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>