JavaScript概述

概述

1、JavaScript是互联网上最流行的脚本语言(Web的编程语言),这门语言可用于HTML和web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
2、JavaScript是脚本语言;是一种轻量级的编程语言;是可插入HTML页面的编程代码;插入 HTML 页面后,可由所有的现代浏览器执行;很容易学习。
3、所有现代的 HTML 页面都使用JavaScript,可以用于改进设计、验证表单、检测浏览器、创建cookies等。
4、Java运行在JVM当中;JavaScript运行在浏览器的内存当中,JavaScript程序不需要手动编译,编写完源代码之后,浏览器直接打开解释执行。
5、JavaScript的“目标程序"以普通文本形式保存,这种语言都叫做"脚本语言"。Java的目标程序以.class形式存在,不能使用文本编辑器打开,不是脚本语言。

为什么学习JavaScript?

JavaScript是web开发人员必须学习的3门语言中的一门:
1、HTML定义了网页的内容。
2、CSS描述了网页的布局。
3、JavaScript网页的行为。

我的第一个JavaScript程序

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>我的第一个JS程序</title>
		<script>
			function displayDate(){
				document.getElementById("demo").innerHTML=Date();
			}
		</script>
    </head>
	<body>
		<p id="demo">点击显示日期会在这里显示!</p>
		<button type="button" onclick="displayDate()">显示日期</button>
	</body>
</html>

在这里插入图片描述
在这里插入图片描述

HTML嵌入JavaScript代码的方式

第一种方式
  • 实现功能:用户点击按钮,弹出消息框。
    1、JS是一门事件驱动型的编程语言,依靠事件去驱动,然后执行对应的程序。
    2、在JS中有很多事件,并且任何事件都会对应一个事件句柄。
    3、其中有一个事件叫做:鼠标单击(click),事件句柄叫做:onclick。(事件和事件句柄的区别是:事件句柄是在事件单词前添加一个on)
    4、事件句柄是以HTML标签的属性存在的。
    5、onclick="js代码",执行原理是什么?
    页面打开的时候,JS代码并不会执行,只是把这段JS代码注册到按钮的click事件上了。等这个按钮发生click事件之后,注册在onclick后面的js代码会被浏览器自动调用。
    6、怎么使用JS代码弹出消息框?
    在JS中有一个内置的对象叫做window(全部小写),可以直接拿来使用,window代表的是浏览器对象。window对象有一个函数叫:alert,用法是:window.alert("消息内容");这样就可以实现弹窗了。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML嵌入JS代码的第一种方式</title>
    </head>
	<body>
		<input type="button" value="按钮1" 
			onClick="window.alert('JS')" />
		<!--window可以省略-->
		<input type="button" value="按钮2" 
			onClick="alert('This is')
			alert('Java')
			alert('Script')" />
	</body>
</html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

第二种方式

1、暴露在脚本块当中的程序,在页面打开的时候执行,并且遵守自上而下的顺序依次逐行执行。(这个代码的执行不需要事件)
2、脚本块在页面中可出现多次且位置随意。
3、alert函数会阻塞整个HTML页面的加载。

<!--
	脚本块在页面中可出现多次且位置随意。
-->
<script type="text/javascript">
	window.alert("脚本块出现位置随意");
</script>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第二种方式</title>
		<input type="button" value="按钮1" />
		<script type="text/javascript">
			/**/
			window.alert("head");
		</script>
    </head>
	<body>
		<script type="text/javascript">
			window.alert("body");
		</script>
		<input type="button" value="按钮2" />
	</body>
</html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

第三种方式

1、引入外部js文件,这种方式更加常用。
2、<script>标签中使用type="text/javascript"。现在已经不必这样做了,JavaScript是所有现代浏览器以及HTML5中的默认脚本语言。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>引入外部js文件</title>
    </head>
	<body>
		<!--
			1、同一个js文件可以被引入多次。
			2、结束的</script>标签必须有。
		-->
		<script type="text/javascript" src="js/myjs.js">
			/*这里的代码不会执行,
			 * 引入js文件的同时不能写js代码。
			 * window.alert("test");*/
		</script>
		<script>
			alert("haha");
		</script>
	</body>
</html>

js代码:

window.alert("myjs");

在这里插入图片描述
在这里插入图片描述

原文地址:https://www.cnblogs.com/yu011/p/13527876.html