Java日记之JavaScript基础

最新推荐文章于 2021-02-25 05:36:32 发布

尬尬_

最新推荐文章于 2021-02-25 05:36:32 发布

阅读量116

点赞数

分类专栏： # Web前端文章标签： js javascript java python html

本文链接：https://blog.csdn.net/qq_45596525/article/details/107522226

版权

Web前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

😴

一.基本概念

带Java的不一定与Java有关 , 属于脚本语言 ,在浏览器下能直接运行 , 具有很好的动态效果和交互
几个必须知道的概念:

innerHTML可以读取div元素包含的字符串

document对象代表的是当前的文档

document.getElementById()的返回值类型是object
而document.getElementById().value的返回值类型是string

info.innerHTML="用户名是必填项";是将 "用户名是必填项" 写入span元素的文本

span是专门用来做提示的

二.创建与连接方式

还是老三样 ,在HTML标签内直接使用 , 在<head>标签内写<script></script>使用 ,采用外链式在另外创建一个JS文件使用

下面就挨个演示代码

1.HTML标签内直接使用 :
2.在<head>标签内写<script></script>使用 :
3.采用外链式在另外创建一个JS文件使用 :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/style.js"></script> 
<!-- 外链式的指令 -->
<script>
	/**在script标签内写JS代码,需要一个函数关键字function*/
	function myAlert(x) { 
	//跟Java的函数一样,也需要一个参数 ,不过无需指定数据类型
		alert(x);
	}
</script>

</head>
<body>
	<div>
		<!-- 在button标签内直接写JS代码,属于第一类 -->
		<!-- alert(参数),其中参数是需要在提示框中显示的文本,
		用单引号修饰 -->
		
		<button onclick="alert('你好')">点我弹出一个标签Test1</button> 
		<button onclick="myAlert('我好')">点我弹出一个标签Test2</button>
		<button onclick="myAlert2()">点我弹出一个标签Test3</button> 
	</div>
</body>
</html>

function myAlert2(){
	alert('大家好');
}

三.数据类型

由于是弱类型的编程语言 ,JS可以说是并不存在数据类型 ,因此 ,这里简单介绍一下变量 , 数组 , 的定义方法 ,

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/style.js"></script> <!-- 外链式的指令 -->
<script>
	/**在script标签内写JS代码,需要一个函数关键字function*/
	function myAlert(x) { //跟Java的函数一样,也需要一个参数 ,不过无需指定数据类型
		alert(x);
	}
	
	function test(x){
		//测试定义变量功能
		var number=1;
		var s = "ok";
		var array = new Array();
		array[0] = "dog";
		array[5] = "cat";
		
		var person = {
			name:"Bill",
			age:18
		}
		
		
		console.log(person);
		alert(x);
	}
	
</script>

</head>
<body>
	<div>
		<!-- 在button标签内直接写JS代码,属于第一类 -->
		
		<!-- alert(参数),其中参数是需要在提示框中显示的文本,
		用单引号修饰 -->
		<button onclick="alert('你好')">点我弹出一个标签Test1</button> 
		<button onclick="myAlert('我好')">点我弹出一个标签Test2</button>
		<button onclick="myAlert2()">点我弹出一个标签Test3</button> 
		<button onclick="test('测试成功')">点我测试数据类型功能Test4</button>
	</div>
</body>
</html>

四.常用事件

1.onsubmit事件 当form表单提交时调用的事件 ,写在<form></form>中,
常用于验证表单中的数据是否正确


function valid() {
		//根据键值关系映射获取值
		//innerHTML可以读取div元素包含的字符串
		//document对象代表的是当前的文档
		var username = document.getElementById("username").value;
		if(username ==''){
			//document.getElementById()的返回值类型是object , 而document.getElementById().value的返回值类型是string
			var info = document.getElementById("info"); 
			info.innerHTML="用户名是必填项"; //将 "用户名是必填项" 写入span元素的文本
			return false;
			
		}else{
			return true;
		}
	}
//表单
<form action="TestServlet" method="post" enctype="application/x-www-form-urlencoded" onsubmit="return valid()"> 
		<span id="info"></span> <!-- 这里把span换成div也行 ,而span是专门用来做提示的 -->																					<!-- 必须要带return -->
		
		<input type="text" id="username" name="username">
		<br/>
		<input type="submit">
	</form>

2.onmouseover / onmouseout: 鼠标移入 ,鼠标移出

3.定时器 : setTimeout(hiddenRight , 300); 参数一是函数 ,参数二是定时数

4.焦点onblur :
onblur

<html>

<head>
<script type="text/javascript">
function upperCase()
{
var x=document.getElementById("fname").value
document.getElementById("fname").value=x.toUpperCase()
                           <!-- 这里的toUpperCase()是将字母转大写 -->
}
</script>
</head>

<body>

Enter your name: <input type="text" id="fname" onblur="upperCase()"><br />
Enter your age: <input type="text" id="age" onblur="alert(this.id)">
<!-- 在我们点击页面其它地方时,age栏会抛出一个交互,提示你输入age -->
</body>
</html>