JavaScript简介

最新推荐文章于 2024-05-23 21:53:45 发布
最新推荐文章于 2024-05-23 21:53:45 发布
阅读量78 收藏
点赞数
分类专栏： JSP 基础 文章标签： javascript xhtml java ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chaoyv/article/details/84596708
版权

本章目标
掌握JavaScript的基本语法；
掌握JavaScript的事件处理；
掌握window对象的使用。

 

JavaScript简介
JavaScript（Java脚本）是一种基于对象（Object）和事件驱动（Event Driven）并具有安全性能的脚本语言，是由Netscape公司的LiveScript发展而来的，使用JavaScript可以轻松的实现和HTML的互操作，并且完成丰富的页面交互效果，它是通过嵌入或调入在标准的HTML语言中实现的，它的出现弥补了HTML语言的缺陷，它是Java与HTML折衷的选择。

 

JavaScript的基本语法
JavaScript的语法本身非常的简单，就是包含了一些变量及函数的声明操作，所有的JavaScript代码是在HTML代码之中编写的，使用<script>标记完成。
一般而言，<script>标记都是出现在<head>标记之中的，当然，也可以在任意的位置上编写，但是最好在调用其操作之前进行编写。


第一个JavaScript程序

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--对于文档声明-->
<html xmlns="http://www.w3.org/1999/xhtml"><!--HTML开始标记-->
<head><!--头标记-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><!--提供有关页面的元信息-->
<title>文档标题信息</title><!--文档标题信息-->
	<script language="javascript"><!--使用JavaScript语言-->
		alert("Hello World!!!");//弹出一个警告框
		alert("Hello World!!!I am chaoyv.");//弹出一个警告框
    </script>
</head><!--完结标记-->
<body><!--网页主体-->
</body><!--完结标记-->
</html><!--完结标记-->

 效果图：

定义多个<script>元素

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--对于文档声明-->
<html xmlns="http://www.w3.org/1999/xhtml"><!--HTML开始标记-->
<head><!--头标记-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><!--提供有关页面的元信息-->
<title>文档标题信息</title><!--文档标题信息-->
	<script language="javascript"><!--使用JavaScript语言-->
		alert("Hello World!!!");//弹出一个警告框
    </script>
</head><!--完结标记-->
<body><!--网页主体-->
	<script language="javascript"><!--使用JavaScript语言-->
		alert("Hello World!!!I am chaoyv.");//弹出一个警告框
    </script>
</body><!--完结标记-->
</html><!--完结标记-->

 效果图：

 

使用document.write()方法输出内容

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--对于文档声明-->
<html xmlns="http://www.w3.org/1999/xhtml"><!--HTML开始标记-->
<head><!--头标记-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><!--提供有关页面的元信息-->
<title>文档标题信息</title><!--文档标题信息-->
	<script language="javascript"><!--使用JavaScript语言-->
		document.write("<h3>阅谁问君诵</h3>");//页面输出
		document.write("<h3>水落清香浮</h3>");//页面输出
    </script>
</head><!--完结标记-->
<body><!--网页主体-->
</body><!--完结标记-->
</html><!--完结标记-->

 效果图：

 

在JavaScript中定义变量

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--对于文档声明-->
<html xmlns="http://www.w3.org/1999/xhtml"><!--HTML开始标记-->
<head><!--头标记-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><!--提供有关页面的元信息-->
<title>文档标题信息</title><!--文档标题信息-->
	<script language="javascript"><!--使用JavaScript语言-->
		var num=30;//定义数字
		var info="聊程";//定义字符串
		alert("数字："+num+";  字符串："+info);//弹出一个警告框
    </script>
</head><!--完结标记-->
<body><!--网页主体-->
</body><!--完结标记-->
</html><!--完结标记-->

 效果图：

 

分支结构

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--对于文档声明-->
<html xmlns="http://www.w3.org/1999/xhtml"><!--HTML开始标记-->
<head><!--头标记-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><!--提供有关页面的元信息-->
<title>文档标题信息</title><!--文档标题信息-->
	<script language="javascript"><!--使用JavaScript语言-->
		str="chaoyi";//定义字符串
		if(str=="chaoyi"){//直接判断
			alert("内容符合判断！");//弹出警告框
		}else{
			alert("内容不符合判断！");	//弹出警告框
		}
    </script>
</head><!--完结标记-->
<body><!--网页主体-->
</body><!--完结标记-->
</html><!--完结标记-->

 效果图：

 

使用循环输出5行10列的表格

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--对于文档声明-->
<html xmlns="http://www.w3.org/1999/xhtml"><!--HTML开始标记-->
<head><!--头标记-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><!--提供有关页面的元信息-->
<title>文档标题信息</title><!--文档标题信息-->
	<script language="javascript"><!--使用JavaScript语言-->
		var rows=5;//定义输出行数
		var cols=10;//定义输出列数
		document.write("<table border=\"1\">");//输出表格
		for(var i=0;i<rows;i++){//循环输出
			document.write("<tr>");
			for(var j=0;j<cols;j++){//循环输出
				document.write("<td>"+i*j+"</td>");
			}
			document.write("</tr>");
		}
		document.write("</table>");
    </script>
</head><!--完结标记-->
<body><!--网页主体-->
</body><!--完结标记-->
</html><!--完结标记-->

效果图：

 


输出九九乘法口诀 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--对于文档声明-->
<html xmlns="http://www.w3.org/1999/xhtml"><!--HTML开始标记-->
<head><!--头标记-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><!--提供有关页面的元信息-->
<title>文档标题信息</title><!--文档标题信息-->
	<script language="javascript"><!--使用JavaScript语言-->
		var rows=9;//定义输出行数
		var cols=9;//定义输出列数
		document.write("<table border=\"1\">");//输出表格
		for(var i=1;i<=rows;i++){//循环输出
			document.write("<tr>");
			for(var j=1;j<=cols;j++){//循环输出
				if(j<=i){
					document.write("<td>"+i+"*"+j+"="+i*j+"</td>");
				}else{
					document.write("<td>&nbsp;</td>");
				}				
			}
			document.write("</tr>");
		}
		document.write("</table>");
    </script>
</head><!--完结标记-->
<body><!--网页主体-->
</body><!--完结标记-->
</html><!--完结标记-->

 效果图：

 
 

JavaScript函数
函数定义格式：
function 函数名称(参数1,参数2,…){
  [return 返回值] ;
  }

 

定义函数

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--对于文档声明-->
<html xmlns="http://www.w3.org/1999/xhtml"><!--HTML开始标记-->
<head><!--头标记-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><!--提供有关页面的元信息-->
<title>文档标题信息</title><!--文档标题信息-->
	<script language="javascript"><!--使用JavaScript语言-->
		function add(i,j,k){//定义了3个参数的函数
			return i+j+k;//返回数据
		}
		alert("数字相加结果："+add(10,20,30));//调用函数
    </script>
</head><!--完结标记-->
<body><!--网页主体-->
</body><!--完结标记-->
</html><!--完结标记-->

 效果图：

 

数组的静态初始化方式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--对于文档声明-->
<html xmlns="http://www.w3.org/1999/xhtml"><!--HTML开始标记-->
<head><!--头标记-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><!--提供有关页面的元信息-->
<title>文档标题信息</title><!--文档标题信息-->
	<script language="javascript"><!--使用JavaScript语言-->
		function fun(){//定义函数
			var arr=new Array(3);//创建一个包含3个元素的数组
			for(i=0;i<arr.length;i++){//循环操作数组
				arr[i]=i;//为每一个元素赋值
			}
			var str="数组的内容：";//定义返回值
			for(i=0;i<arr.length;i++){//循环输出数组
				str+=arr[i]+"、";//修改返回内容
			}
			return str;//返回结果
		}
		alert(fun());//调用函数
    </script>
</head><!--完结标记-->
<body><!--网页主体-->
</body><!--完结标记-->
</html><!--完结标记-->

 效果图：

 

数组的静态初始化方式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--对于文档声明-->
<html xmlns="http://www.w3.org/1999/xhtml"><!--HTML开始标记-->
<head><!--头标记-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><!--提供有关页面的元信息-->
<title>文档标题信息</title><!--文档标题信息-->
	<script language="javascript"><!--使用JavaScript语言-->
		function fun(){//定义函数
			//静态初始化数组，其中每一个元素都是字符串类型
			var arr=new Array("chaoyi","yike","chaoyv");
			var str="数组的内容：";//定义返回值
			for(i=0;i<arr.length;i++){//循环输出数组
				str+=arr[i]+"、";//修改返回内容
			}
			return str;//返回结果
		}
		alert(fun());//调用函数
    </script>
</head><!--完结标记-->
<body><!--网页主体-->
</body><!--完结标记-->
</html><!--完结标记-->

效果图：



 

小结
JavaScript是嵌入在HTML代码中的一种语言，主要是为了弥补HTML的不足；
JavaScript可以定义变量、函数、也可以进行各种语句的控制。

chaoyv
关注
专栏目录
Javascript简介
学会改变自己——才能突破
06-14 8801
前段时间看完了，javascript视频，包括牛腩的基础的，以及姜昊的更深一步的，对javascript有了个初步的了解。这篇博客先从理论上简单介绍一下javascript。         首先看一下Javascript的概述：     JavaScript是一种基于对象(Object)和事件驱动(EventDriven)并具有安全性能的脚本语言。使用它的目的是与HTML超文
第一章 WEB简介内容 第二章 HTML，JavaScript简介
YZJyzj_的专栏
07-22 711
第一章 WEB简介内容 1.http协议（超文本传输协议），状态字 2.搜索引擎，新闻系统，网页游戏 3.在WEB中分为两端： 客户端:使用浏览器，向WEB服务器发出请求，发出请求之后， 服务端:从WEB服务端，根据用户的请求内容，找到文件，并通过HTTP协议发回给客户端，客户端再通过浏览器进行解释，这一切都是依靠HTTP协议完成的。 4.静态WEB-Applet，Applet是作为最
javaScript简介
weixin_69252724的博客
04-16 4037
它是一种直译式的语言, 用来为网页添加各种各样的动态功能不需要编译直接通过浏览器直接运行, 通常javaScript脚本是通过嵌入HTML里来实现功能的。
JavaScript 简介
最新发布
weixin_68864415的博客
05-23 980
Javascript 简介
JavaScript是什么？JavaScript简介
unber的博客
11-19 1166
JavaScript 是面向 Web 的编程语言，获得了所有网页浏览器的支持，是目前使用最广泛的脚本编程语言之一，也是网页设计和 Web 应用必须掌握的基本工具。
javascript简介
weixin_47167235的博客
02-20 1746
JavaScript基础 JavaScript是什么 JavaScript 是一种运行在客户端 的脚本语言 ，最早是在 HTML （标准通用标记语言下的一个应用）网页上使用，用来给 HTML 网页增加动态功能。 浏览器就是一种运行 JavaScript 脚本语言的客户端， JavaScript 的解释器被称为JavaScript 引擎，为浏览器的一部分。 JavaScript组成 JavaScript 是由 ECMAScript DOM 和 BOM 三者组成的。 JavaScript书写语法 J
JavaScript简介和特点.rar
07-09
本资料包“JavaScript简介和特点.rar”提供了对JavaScript的基本介绍以及其核心特性。 JavaScript最初由Netscape公司的Brendan Eich在1995年发明，目的是为了增加网页的交互性。它并非Java语言的子集，尽管两者名字...
Myeclipse 10 激活详解过程
chaoyv
05-14 430
ipse。 2、在下载好的激活补丁目录中，双击 cracker.jar 运行激活工具（如果双击不能运行，可以双击同目录下的批处理文件 run.bat 来运行 cracker.jar） ，在 Usercode 栏输入你的注册用户名，选择你的 Myeclipse 10 相应版本，然后点击 SystemID …生成 SystemID。 3、生成 SystemID 后，点击 Active：会自动生成 License key、Activation code 和 Activation key。 4、点击菜单 To
实例操作：注册验证
chaoyv
05-26 308
本章目标通过JSP + JavaBean完成一个注册用户的验证功能。 package cn.demo2; import java.util.HashMap; import java.util.Map; public class Register {//本类用于完成提交信息的验证 private String name;//定义name属性 private String age;...
request对象
chaoyv
05-22 227
本章目标掌握request对象的主要作用掌握request对象的核心操作方法可以使用request进行传输乱码的解决可以使用request进行服务器角色验证   request内置对象 request内置对象是使用最多的一个对象了，其主要作用是用来接收客户端发送而来的请求信息，例如：请求的参数、发送的头信息等都属于客户端发来的信息，request是javax.servlet.http.Ht...
application对象
chaoyv
05-23 163
本章目标掌握application对象的主要操作；掌握application和getServletContext()方法的联系；可以通过application完成一个网站计数器的操作；   application对象 application对象是javax.servlet.ServletContext接口的实例化对象，从单词上翻译表示的是整个Servlet的上下文，ServletConte...
JSP基础：HTML速览与JavaScript简介
`<head>`部分包含了文件头内容，如文档类型声明、CSS样式表链接、JavaScript文件引用等，而`<body>`则包含网页的主体内容。 2.1.2 HTML常用标签 HTML标签分为单标签和双标签。单标签如` `用于换行，`<hr>`用于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值