第一讲_JavaScript概述及三种使用方式

JavaScript概述及三种使用方式

  • 1. JavaScript概述
    • 1.1 JavaScript 的作用
  • 2 JavaScript使用方式
    • 2.1 行内使用
    • 2.2 内部使用
    • 2.3 外部使用

1. JavaScript概述

JavaScript主页由三部分组成:

  • ECMAScript:规定 JavaScript 核心,定义了语言的基本语法和数据类型。
  • DOM(文档对象模型):用于操作文档元素。
  • BOM(浏览器对象模型):用于操作浏览器本身的功能。

1.1 JavaScript 的作用

  • 数据校验:数据合法性的检查
  • 数据交互:前后端数据交互
  • 页面特效:根据用户的行为,呈现特定的响应
  • 开发服务端:采用node.js开发服务端应用

2 JavaScript使用方式

2.1 行内使用

JavaScript代码写在html的标签里,实际开发中基本不用。

<html>
  <style>
    div {
      background-color: palevioletred;
    }
  style>
  <div class="outer" onclick="alert('hello, 我是行内JavaScript')">
    行内JavaScript
  div>
html>

2.2 内部使用

JavaScript代码写在html文件里,放在script标签中,实际开发中使用较多。

<html>
  <style>
    div {
      background-color: palevioletred;
    }
  style>
  <div class="outer">
    内部JavaScript
  div>

  <script>
    let element = document.querySelector('.outer');
    element.addEventListener('click', () => {alert('hello, 我是内部JavaScript')});
  script>
html>

2.3 外部使用

JavaScript代码单独写在js文件中,在html文件中通过script标签引入,实际开发中使用最多。

  1. 新建一个.js后缀的文件
let element = document.querySelector('.outer');
element.addEventListener('click', () => {alert('hello, 我是外部JavaScript')});
  1. html文件中,通过script标签引入js文件
<html>
  <style>
    div {
      background-color: palevioletred;
    }
  style>
  <div class="outer">
    外部JavaScript
  div>

  <script src="./test.js" type="text/javascript">script>
html>

你可能感兴趣的:(JavaScript,javascript,开发语言)