JavaScript的概述

最新推荐文章于 2023-03-24 21:26:21 发布

向上Claire

最新推荐文章于 2023-03-24 21:26:21 发布

阅读量1.5k

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44522477/article/details/103195936

版权

JavaScript基础应用

JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言
是由Brendan Eich（艾兰登·艾奇）

简单性
安全性
动态性
跨平台性
JavaScript程序不能独立运行，必须依赖于HTML文件。

【实训目标】
（1）理解JavaScript脚本放置于运用的方法
（2）掌握JavaSacript基本构成和基本语法
（3）掌握自定义函数定义与引用
【实训内容】
（1）JAVASCRIPT放置于运用
（2）JAVASCRIPT变量，标识符，表达式定义与使用
（3）自定义函数编写与调用
（4）信息对话框函数应用
（5）事件调用与简约化调用
（6）样式表定义与使用
（7）表单，表单控件的使用
【实训项目】
（1）改变新闻网页中的自号
（2）计算任意区间内连续自然数的累加和
（3）消息对话框的使用

改变新闻网页中的字号

1、实训要求
很多网站的新闻板块均设有个性化的“选择字号【大中小】”链接的功能
2、实训内容

图层的创建与应用
内部样式表的定义及应用
自定义函数的定义与应用
超链接的定义与应用

3、实训所需知识点
（1）图层div标记
<div id="content"></div>
（2）样式style标记

<style type="text/css">
#div{text-align:center;font-seize:12px;}
	#content{font-size:12px;line-height:2em;background:#000099;
		padding:10px;color:white;border:2px groove #0000cc;
	p{text-indent:2em;}
</style>

（3）脚本script标记
script标记是成对标记…type属性是说明脚本的类型，属性值"text/javascript”意思是使用JavaScript编写的程序是文本文件。src属性是可选属性，用于加载指定的外部Js文件。如果设置此属性，将忽略script标记内的所有语句
script标记既可以放在HEML的头部，也可以放在主题部分，只是装载的时间不同。

<head>
	<script type="text/javascript" scr="外部js">```</script>

（4）超链接a标记

<a href="javascript:setFont('12px')"小</a>
<a href="#"onclick="setFont('12px')">小</a>

（5）标题字h3标记

<h3 align="center">用JavaScript代码改变网页字体大小</h3>

4.javaScript放置的位置与函数
JavaScript代码一般放置在页面的head或Body部分。当页面载入时，会自动执行位于Body部分的javaScript。而位于Head部分的javaScript只有被显示调用时才能被执行

在head标记中的脚本
script标记放在头部head标记中，javascript代码必须定义为函数形式，并在主体body标记内调用或通过事件触发。放在head标记内的脚本在页面装载时同时载入，这样在主题body标记中调用时可以直接执行，提高速度

function functionname(参数1，参数2```){
	函数体语句
	}

javaScript自定义函数必须与function关键字开始，然后给自定义函数命名，函数命名时一定遵守标识符命名规范。函数名称后面一定要有一对括号"()",括号内可以有参数，也可以无参数，多个参数之间用逗号分隔。函数体语句必须放在大括号“{}”内

在body标记中:

<body>
	<script type="text/javascript">```</script>
</body>

如果脚本放在body标记中，script标记中脚本既可以是函数，也可以是代码段。
但在body标记中可以调用已经定义过的脚本函数，调用方式可以是事件调用，也可以是简约化调用，还可以是动态调用

外部js文件中的脚本
除了将javascript代码写在head和body部分以外，也可以将javascript函数单独写成一个js文件，在heml文档中引用该文件。

<!--dome.js-->
function message()
{
	alert("调用外部js文件中的函数!");
}

上述代码将javascript函数写在一个文件demo.js中，代码第2-5行定义了一个函数Message（）,注意，在“.js”文件中不需要使用script标记来包围代码

<!--1.html-->
<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>调用外部js文件的javascript函数</title>
		<script type="text/javascript" src="demo.js">
			document.write("这条语句没有执行，被忽略掉了!");
		</script>
	</head>
	<body>
		<form>
			<input name="btnCallJS" type="button" onclick="message()"
			value="调用外部js文件的javascript函数">
		</form>
	</body>
</html>

第七行引用外部的demo.js文件
第13行定义普通annual，在单击按钮时触发onclick事件，执行demo.js中定义的message()函数实现在页面上弹出告警框的功能。
很显然第8条代码没有被执行，因为设置src属性后，脚本script之间的所有语句都不会被执行，所以没有在页面上显示

而放在head文件中

<!--1.html-->
<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>head中定义的JS函数</title>
		<script type="text/javascript">
			function messae(){
				alert("调用JS函数！sum(100,200)="+sum(100,200));}
			function sum(x,y){return x+y;}
		</script>
	</head>
	<body>
		<h4>head标记内定义两个JS函数</h4>
		<p>无返回值函数：message()</p>
		<p>有返回值函数：sum(x.y)</p>
		<form>
			<input name="btnCallJS" type="button" onclick="message();"
			value="计算并显示两个数的和">
		</form>
	</body>
</html>

7-9行在head部分插入script标记，在script标记内定义javascript函数message().sum(x,y).第9行用alert函数调用告警消息框，并调用sum(100,200)函数，计算出结果并输出相关信息。第18行定义了一个普通按钮btnCallJS,当单机该按钮时触发按钮的Onclick事件，调用在head部分定义的message函数，弹出告警框

向上Claire

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript的概述

JavaScript基础应用JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言是由Brendan Eich（艾兰登·艾奇）简单性安全性动态性跨平台性JavaScript程序不能独立运行，必须依赖于HTML文件。【实训目标】（1）理解JavaScript脚本放置于运用的方法（2）掌握JavaSacript基本构成和基本语法（3）掌握自定义函数定义与...
复制链接

扫一扫