JavaScript 基础

146 阅读3分钟

了解变量、数据类型、运算符等基础概念,能够实现数据类型的转换,结合四则运算体会如何编程。 MDN:mdn.dev/ 现代 JavaScript 教程:zh.javascript.info/

1 JavaScript介绍

掌握 JavaScript 的引入方式,初步认识 JavaScript 的作用

1.1 JavaScript是什么

JavaScript是一种运行在客户端(浏览器)的编程语言,实现人机交互效果。

1.2 JavaScript作用

JavaScript作用:确定网页的行为交互(教网页做事情)

1.3 JavaScript组成

1653223741(1).jpg

ECMAScript - JavaScript的核心
    1. ECMAScript定义了JavaScript的语言规范
    1. JavaScript的核心:描述了语言的基本语法和数据类型,ECMAScript 是一套标准,定义了一种语言的标准与具体实现无关
DOM - 文档对象模型
    1. 一套操作页面元素的API
    1. DOM可以把HTML看做是文档树,通过DOM提供的API可以对树上的节点进行操作
BOM - 浏览器对象模型
    1. 一套操作浏览器功能的API
    1. 通过BOM可以操作浏览器窗口,比如:弹出框、控制浏览器跳转、获取分辨率等

1.4 体验JavaScript

Snipaste_2022-05-22_21-06-27.png

Snipaste_2022-05-22_21-06-53.png

Snipaste_2022-05-22_21-07-03.png

1.5 JavaScript书写位置

JavaScript 程序不能独立运行,它需要被嵌入 HTML 中,然后浏览器才能执行 JavaScript 代码。通过 script 标签将 JavaScript 代码引入到 HTML 中。

  • 内部样式(内嵌式) 通过 script 标签包裹 JavaScript 代码 如果js代码较少较少的话可以使用,比较复杂的话不推荐 Snipaste_2022-05-22_21-11-02.png

  • 外部样式 一般将 JavaScript 代码写在独立的以 .js 结尾的文件中,然后通过 script 标签的 src 属性引入 Snipaste_2022-05-22_21-14-41.png

  • 行内样式 此处了解即可,后面Vue框架会使用这种模式 Snipaste_2022-05-22_21-16-29.png

1.6 注释和结束符

  • 单行注释 使用 // 注释单行代码 通过注释可以屏蔽代码被执行或者添加备注信息,JavaScript 支持两种形式注释语法: 快捷键:ctrl + / Snipaste_2022-05-22_21-19-34.png

  • 多行注释 使用 /* */ 注释多行代码 快捷键:shift + alt + A (或ctrl+shift+/) Snipaste_2022-05-22_21-21-13.png

  • 结束符 在 JavaScript 中 ; 代表一段代码的结束,多数情况下可以省略 ; 使用回车(enter)替代。 Snipaste_2022-05-22_21-23-19.png 实际开发中有许多人主张书写 JavaScript 代码时省略结束符 `;

1.7 输入和输出语法

输出和输入也可理解为人和计算机的交互,用户通过键盘、鼠标等向计算机输入信息,计算机处理后再展示结果给用户,这便是一次输入和输出的过程。 举例说明:如按键盘上的方向键,向上/下键可以滚动页面,按向上/下键这个动作叫作输入,页面发生了滚动了这便叫输出。

  • 输入 在网页弹出一个输入框,让用户输入数据

Snipaste_2022-05-22_21-26-08.png

在网页弹出一个确认框,让用户输入 确认/取消 二选一

Snipaste_2022-05-22_21-27-46.png

  • 输出 将数据显示到网页

Snipaste_2022-05-22_21-28-41.png

在网页弹出一个提示框,输出数据

Snipaste_2022-05-22_21-29-14.png

控制台输出语法,程序员调试使用

Snipaste_2022-05-22_21-44-30.png