JavaScript

  • 一、JavaScript概述
  • 1、为什么使用JavaScript
  • 2、JavaScript是什么
  • 二、HelloWorld案例
  • 三、Java Script 基本语法案例
  • 1、变量
  • 2、函数
  • 3、函数是对象
  • 4、回调函数
  • 5、this关键字
  • 6、Object
  • 四、事件
  • 五、加载方式


一、JavaScript概述

1、为什么使用JavaScript

拨号上网Time:网速很慢，数据提交到服务器端验证，体验很差，JavaScript横空出世，担当了浏览器端数据验证的重任，从此一发不可收拾
五彩缤纷的现在:时至今日JavaScript已经不仅仅局限于表单验证，她还能为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。

2、JavaScript是什么

JavaScript是一门客户端脚本语言，主要运行在浏览器中，浏览器中负责运行JavaScript脚本代码的程序叫JavaScript引擎。
只有当浏览器读取javaScript代码时，才进行解释、执行。所以查看HTML源文件就能查看JavaScript源代码。

案例

Java解析前端文件 java 解析javascript_javascript

二、HelloWorld案例

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
	<!-- 1.JavaScript代码写在HTML中的script标签中 -->
 	<script type="text/javascript">
 
  		//2.借助window.onload事件在文档加载完成后执行程序
 		window.onload = function() {
   
   			//3.从文档中获取<button id="btnId">SayHello</button>标签对应的元素节点对象
   			var btnEle = document.getElementById("btnId");
   
   			//4.绑定单击事件响应函数
   			//给按钮对象的单击事件属性赋值一个函数的引用
   			btnEle.onclick = function() {
    
    				//5.在事件的响应函数中弹出警告框
    				window.alert("大数据专业");
			};
		};
	</script>
</head>
<body>
	<button id="btnId">SayHello</button>
</body>
</html>

结果：

Java解析前端文件 java 解析javascript_HTML_02

三、Java Script 基本语法案例

1、变量

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	//01.使用var关键字声明变量，声明时不需要指定类型
 	var a = 20;
 	var b = 'abc';
 	var c = true;
	alert(a+" "+b+" "+c);
	//02.变量在使用过程中可以接受不同类型的值
 	a = "Hello";
 	b = 230.53;
 	c = ["good",true,20];
	alert(a+" "+b+" "+c);
</script>
</head>
<body>
</body>
</html>

结果：

Java解析前端文件 java 解析javascript_HTML_03

2、函数

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	//01.声明函数使用function关键字，不需要指定返回值类型，形参也不需要指定类型
 	function sum(a,b) {
  		return a+b;
 	}
	//02.调用函数：不检查实参的类型，个数
 	var result = sum(5,10);
 	alert(result);
	result = sum("Hello ","Tom");
 	alert(result);
	result = sum("Hello ");
 	alert(result);
</script>
</head>
<body>
</body>
</html>

结果：

Java解析前端文件 java 解析javascript_HTML_04

3、函数是对象

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	//在JavaScript中，函数也作为一种数据类型存在，而且是引用数据类型，函数名就是指向其内存空间地址的引用
 	function sum(a,b) {
  		return a+b;
 	}
 	alert(sum);
	var ref01 = sum;
 	alert("ref01="+ref01);
	var ref02 = sum;
 	alert("ref02="+ref01);
</script>
</head>
<body>
</body>
</html>

结果：

Java解析前端文件 java 解析javascript_javascript_05

4、回调函数

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	//回调函数：声明后，不由自己调用，而是交给系统或其他函数执行的函数
 	function callBack() {
  		window.alert("I am call back!");
 	}
	function call(fun) {
  		fun();
 	}
	window.callBack();
	call(callBack);
</script>
</head>
<body>
</body>
</html>

结果：

Java解析前端文件 java 解析javascript_html_06

5、this关键字

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	//在JavaScript中，任何一个函数都是由对象调用的，在函数中可以通过this关键字引用调用这个函数的对象
	var obj01 = {
  		name : "obj01 name",
  		getName : showName
 	};
	var obj02 = {
  		name : "obj02 name",
  		getName : showName
 	};
	function showName() {
  		alert(this.name);
 	}
	//对象的属性指向了一个函数，所以也是函数的一个引用
 	//函数的引用加上()就是执行引用的函数
 	obj01.getName();
 	obj02.getName();
</script>
</head>
<body>
</body>
</html>

结果：

Java解析前端文件 java 解析javascript_Java解析前端文件_07

6、Object

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	//在JavaScript中创建对象
 	//1.new Object()
 	var objByNew = new Object();
 	objByNew.userName = "Tom2014";
 	objByNew.password = "123456";
	alert(objByNew.userName+" "+objByNew.password);
	//2.JSON格式
 	//{属性名01:属性值01,属性名02:属性值02,...}
 	var objByJSON = {
   		userName : "Jerry",
   		password : "654321"
  	};
 	alert(objByJSON.userName+" "+objByJSON.password);
</script>
</head>
<body>
</body>
</html>

结果：

Java解析前端文件 java 解析javascript_html_08

四、事件

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
/*
 地雷     事件监听和响应
 生产     声明一个事件响应函数
 找一个埋设的位置   从文档中获取一个按钮对象
 埋设     将响应函数绑定到按钮对象上
 触发引信爆炸   在浏览器捕获到用户对按钮的单击事件时执行响应函数
 */
	window.onload = function(){
  		//1.从文档中获取按钮对象
  		var btn = document.getElementById("btnId");
  		//2.声明一个事件响应函数
  		/* function myClick() {
   			alert("Bom!");
  		} */
		//3.将响应函数的引用赋值给按钮对象的onclick属性——绑定
  		/* btn.onclick = myClick; */
		btn.onclick = function () {
   			alert("Bom!~~~");
  		};
  	}
</script>
</head>
<body>
	<button id="btnId">SayHello</button>
</body>
</html>

结果：

Java解析前端文件 java 解析javascript_Java解析前端文件_09

五、加载方式

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!-- 使用window.onload -->
<script type="text/javascript">
	//在整个文档加载完成后执行这个函数
 	function myPrograme() {
  		var btn = document.getElementById("btnId");
		alert(btn);
		//4.给按钮对象绑定单击响应函数
  		btn.onclick = function() {
		//5.在响应函数中弹出Hello
   		alert("Hello!Success!~~~");
   		}；
   	}
   	//将myPrograme绑定到“文档加载完成”这个事件上
 	//window代表当前浏览器窗口，它加载HTML文档完成后触发“文档加载完成”这个事件
 	window.onload = myPrograme;
</script>
</head>
<body>
	<button id="btnId">SayHello</button>
</body>
</html>

结果：

Java解析前端文件 java 解析javascript_javascript_10