JavaScript01-CFANZ编程社区

JavaScript介绍

它是一种浏览器解释型语言,嵌套在HTML文件中交给浏览器解释执行。

主要用来实现网页的动态效果,用户交互及前后端的数据传输等

JavaScript组成部分

核心语法 规范了JavaScript的基本语法

BOM 提供了一系列操作浏览器的方法

DOM 提供了一系列操作的文档方法

JavaScript使用方法

将JavaScript嵌入页面有以下三种方式

　　元素绑定事件

　　文档内嵌

　　外部链接

元素绑定事件

事件:指用户的行为(单击,双击等)

事件处理:元素监听事件,并在事件发生后自动执行事件过程

绑定:将事件名称以标签属性的方式绑定到元素上执行事件处理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js使用</title>
</head>
<body>
<!--元素绑定事件-->
<BUTTON onclick="console.log('hello world')">click me</BUTTON>
</body>
</html>

JavaScript01_绑定事件

文档内嵌

在页面文档中使用<script>加载JavaScript代码的过程

注意:标签可以书写在文档的任意位置,书写多次,一旦加载到script标签就会立即执行内部的JavaScript代码,因此,不同的位置会影响代码最终的执行效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS使用</title>
    <style>
        /* CSS代码 */
    </style>
    <script>
        // js代码
        console.log('写在head中的代码')
    </script>
</head>
<body>
<!--文档内嵌-->
<BUTTON onclick="console.log('hello world')">click me</BUTTON>
<script>
    console.log('写在最后的代码')
</script>
</body>
</html>

JavaScript01_html_02

外部链接

创建一个外部的JavaScript文件index.js,并在HTML文档中引入使用的过程

注意:既可以实现内嵌JavaScript代码,也可以实现引入外部的JavaScript文件,但是只能二选一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS使用</title>
    <style>
        /* CSS代码 */
    </style>
    <script>
        // js代码
        console.log('写在head中的代码')
    </script>
    <!--外部链接-->
    <script scr="index.js">
        // alert 外部链接加载文件成功
    </script>
</head>
<body>
<!--文档内嵌-->
<BUTTON onclick="console.log('hello world')">click me</BUTTON>
<script>
    console.log('写在最后的代码')
</script>
</body>
</html>