一.脚本语言
JavaScripts在前端开发中的作用:
- HTML 定义了网页的内容
- CSS 描述了网页的布局
- JavaScript 网页的行为
简介:
JavaScripts是一门脚本语言,可以插入HTML页面的编程代码。
二.嵌入JavaScript代码的第一种方式
Js是一门事件驱动型的编程语言,依靠事件去执行程序,其中有一个事件叫做:鼠标点击,click,并且任何事件都会对应一个事件句柄,(事件句柄和事件的区别是事件句柄会在事件上加一个on,例如onclick),事件句柄是以HTML标签的属性存在的。
onclick = "js代码"的执行原理:
当打开页面的时候,js代码并不会执行,只是会把js代码注册到按钮的click事件上,等这个按钮发生click事件后,注册在事件onclick后面的js代码就会被浏览器自动调用。
js代码中有一个内置的对象window,对象window里面有一个内置的函数alert(“消息”),可以弹窗。
实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Js</title>
</head>
<body>
<label><input type = "button" name = "button" onclick = "window.alert('我的第一个js')"></label>
</body>
</html>
点击按钮就会出现如下界面。
二.嵌入JavaScript代码的第二种方式
脚本块方式:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Js</title>
</head>
<body>
<script type = "text/javascripts">
js代码块
</script>
</body>
</html>
实例:
<script type = "text/javascript">
window.alert("Hello World1");
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Js</title>
</head>
<body>
<script type = "text/javascript">
window.alert("Hello World2");
</script>
</body>
</html>
<script type = "text/javascript">
window.alert("Hello World3");
</script>
结果:三个弹窗Hello World1,Hello World2,Hello World3依次弹出。
注意:脚本块方式可以放到HTML页面的任何位置。
暴露在脚本块当中的程序,在页面打开的时候执行,并且遵循自上而下的循序依次执行。(这个代码的执行不需要事件)
三.嵌入JavaScript代码的第三种方式
引入外部独立的js文件
JSdemo1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Js</title>
</head>
<body>
<script type = "text/javascript" src = "JS1.js"></script>
</body>
</html>
JS1.js
window.alert("Hello World")
最近笔者也在运营公众号,欢迎大家的关注!我们一起学习Java,一起进步。