第1章:初识JavaScript编程语言

本章目标

  1. 了解为什么要学习JavaScipt编程语言
  2. 掌握JS的基本结构
  3. 掌握JS的执行原理
  4. 掌握JS的基本语法结构
  5. 掌握JS的几种输出方式
  6. 掌握JS的注释

课程回顾

  1. 什么是HTML?
  2. HTML的标签分为块级元素和行级元素,他们的区别是什么?
  3. HTML的表单元素有那些?
  4. HTML的列表有那些?
  5. CSS的作用有那些?
  6. CSS盒子模型由几部分组成?

讲解内容

1. JavaScript的基本概念

  1. 为什么要学习JavaScript?、

    1. 所有现代HTML网页中都要用到JavaScript
    2. JavaScript是web前端开发必须具备的编程语言技术
    3. JavaScript是web三大语言之一
      1. HTML:定义网页的内容
      2. CSS:实现网页的样式和实现布局
      3. JavaScript:控制网页的行为
    4. JavaScript是所有前端开发框架的基础
  2. JavaScript概念

    概念:JavaScript 是互联网上最流行的脚本语言,这门语言可用于 HTML 和 web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

  3. JavaScript特点:

    1. JavaScript 是一种轻量级的编程语言。
    2. JavaScript 是可插入 HTML 页面的编程代码。
    3. JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。
    4. JavaScript 严格区分大小写。
    5. JavaScript 很容易学习。
  4. JavaScript能做什么?(由老师演示,引起学生的兴趣)

    1. 直接写入 HTML 标签效果

      1
      2
      document.write("<h1>这是一个标题</h1>");
      document.write("<p>这是一个段落。</p>");
    2. JavaScript:对事件的反应

      1
      <button type="button" onclick="alert('欢迎!')">点我!</button>
    3. JavaScript:改变 HTML 内容

      1
      2
      x=document.getElementById("demo");  //查找元素,Demo是网页标签的id
      x.innerHTML="Hello JavaScript"; //改变内容
    4. JavaScript:改变 HTML 图像

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      <script>
      function changeImage()
      {
      element=document.getElementById('myimage')
      if (element.src.match("bulbon"))
      {
      element.src="/img/JavaScript/pic_bulboff.gif";
      }
      else
      {
      element.src="/img/JavaScript/pic_bulbon.gif";
      }
      }
      </script>
      <img loading="lazy" id="myimage" onclick="changeImage()" src="/img/JavaScript/pic_bulboff.gif" width="100" height="180">

      当点击灯泡看效果,效果如下:

      1. 改变前:

        image-20211208205301643

      2. 改变后:

        image-20211208205334917

    5. JavaScript:改变 HTML 样式

      1
      2
      x=document.getElementById("demo")  //找到元素 
      x.style.color="#ff0000"; //改变样式
    6. JavaScript:验证输入

      1
      2
      3
      if isNaN(x) {
      alert("不是数字");
      }
  5. JavaScript用什么工具开发呢?

    开发JS可以用很多工具,常用的工具如下:

    1. 记事本,原始,无提示功能,不建议使用

    2. WebStorm:是一款强大的JavaScript IDE。它支持多种框架和CSS语言,包括前端,后端,移动端以及桌面应用。WebStorm可以无缝整合第三方工具,例如构建构建、语法检查构建linter等等。它提供了代码补全,实时错误监测,导航,内置控制台,各种插件等一系统功能。

      1-8

    3. Visual Studio Code:简称:vscode,是微软开发的IDE,支持TypeScript。它提供了代码补全,语法高亮,支持Git命令等等。另外,它还有非常多的插件。

      vscode是目前公司最常用的工具,则本门课程我们使用的工具“vscode”

      1-8

2. JavaScript的组成

  1. JavaScript由三大部分组成:

    image-20211208205839348

    1. ECMAScript:

      概念:是JavaScript的语法标准,简称:ES,现在版本为ES6.0

      语法标准:

      1. 语法
      2. 变量和数据类型
      3. 运算符
      4. 逻辑控制语句
      5. 关键字、保留字
      6. 对象
      1
      2
      小知识:
      ECMAScript是一种由Ecma国际(前身为欧洲计算机制造商协会,European Computer Manufacturers Association)通过ECMA-262标准化的脚本程序设计语言。这种语言在万维网上应用广泛,它往往被称为JavaScript或JScript,所以它可以理解为是JavaScript的一个标准,但实际上后两者是ECMA-262标准的实现和扩展。
    2. DOM:

      概念:通过 HTML DOM,JavaScript 能够访问和改变 HTML 文档的所有元素。简称:“文档对象”

      image-20211208210526295

    3. BOM:

      概念:浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器”对话”。

      image-20211208210911693

3. JavaScript用法

  1. 语法:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <script type="text/javascript">
    <!--
    JavaScript 语句;
    -->
    </script >
    简写:
    <script>
    javascript语句
    </script>

    注意事项:

    1. HTML 中的脚本必须位于 <script> 与 </script> 标签之间。

    2. 脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。

    3. 如需在 HTML 页面中插入 JavaScript,请使用 <script> 标签。

    4. <script> 和 </script> 会告诉 JavaScript 在何处开始和结束。

    5. <script type="text/javascript">,那些老旧的实例可能会在 <script> 标签中使用 type="text/javascript"。现在已经不必这样做了。JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。

    <head> 或者 <body> 的JavaScript

    您可以在 HTML 文档中放入不限数量的脚本。

    脚本可位于 HTML 的<body><head> 部分中,或者同时存在于两个部分中。

    通常的做法是把函数放入 <head> 部分中,或者放在页面底部。这样就可以把它们安置到同一处位置,不会干扰页面的内容。

  2. JavaScript的执行原理:

    image-20211209200913074

  3. 第一个JavaScript程序:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <html>
    <head>
    <title>输出Hello world</title>
    <script type="text/javascript"> //type可以省略
    document.write("使用JavaScript脚本循环输出helloworld");
    </script>
    </head>
    <body>页面主体内容</body>
    </html>
  4. JavaScript的使用方式

    1. HTML页面内嵌JS代码

    2. 外部JS代码

      1
      <script src="hello.js" language="javascript"></script>

      hello.js是js文件,没有HTML代码,属于外部JS

      image-20211209210630997

    3. 简短缩写方式

      1
      <input name="btn" type="button" value="弹出消息框"  onclick="javascript:alert('欢迎你');"/>

      image-20211209210911273

    4. javascript核心语法:

    image-20211209211214012

4. JavaScript输出

JavaScript 没有任何打印或者输出的函数,但是可以通过不同的方式来输出数据。

  1. 使用 window.alert() 弹出警告框。

    1
    2
    3
    <script>
    alert("大家好,我是alert提示~");
    </script>

    image-20211209211957779

  2. 使用 document.write() 方法将内容写到 HTML 文档中,以上代码中有演示。

  3. 使用 innerHTML 写入到 HTML 元素,后续讲。

  4. 使用 console.log() 写入到浏览器的控制台。

    1
    2
    3
    <script>
    console.log("控制台输出方式,hello log...");
    </script>

    image-20211209212405842

5. JavaScript中的注释

  1. 什么是注释?

    添加注释来对 JavaScript 进行解释,或者提高代码的可读性。

    浏览器不会去解析运行

  2. JS中的注释

    1. 单行注释,以//开头,只能注释单行,//后面的会被注释

      1
      2
      3
      4
      5
      <script>
      //演示控制台输出效果
      console.log("控制台输出方式,hello log...");
      document.write("hello"); //文档输出方式
      </script>
    2. 多行注释,多行注释以/*开始,以 */ 结尾。

      1
      2
      3
      4
      5
      6
      7
      8
      9
      <script>
      /*
      以下代码
      可以在控制台输出
      也可以在文档输出
      */
      console.log("控制台输出方式,hello log...");
      document.write("hello");
      </script>

6. VSCode的使用教程

  1. 下载安装VSCode工具:官网地址下载:https://code.visualstudio.com/

    image-20211209213608300

  2. 直接安装VSCode工具,安装成功后在桌面有快捷方式

    image-20211209213709970

  3. 在电脑上创建项目目录(文件夹),存放页面

    image-20211209214034025

  4. 双击桌面VSCode快捷方式,打开程序

  5. 打开项目目录

    image-20211209214424118

  6. 项目创建OK

    image-20211209214608164

  7. 添加页面或目录,创建成功

    image-20211209214705283

课后作业

  1. 安装VSCode,且成功创建项目
  2. 用文档方式输出你的姓名,年龄,爱好,家庭地址等信息
  3. 用提示框alert方式输出以下信息
  4. 练习注释代码,看看效果