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");