跳到主要内容

01-JS简介

JavaScript介绍​

JavaScript简称JS，是前端开发的一门脚本语言(解释型语言)

  • 解释型语言：程序执行之前，不需要编译就可以直接运行, 运行时再边解析边执行的语言

层级描述
User Interface用户界面，我们所看到的浏览器
Browser engine浏览器引擎，用来查询和操作渲染引擎
Rendering engine用来显示请求的内容，负责解析HTML、CSS，并把解析的内容显示出来
Networking网络，负责发送网络请求
JavaScript InterpreterJavaScript解析器，负责执行JavaScript的代码
UI BackendUI后端，用来绘制类似组合框和弹出窗口
Data Persistence数据持久化，数据存储 cookie、HTML5中的sessionStorage

JavaScript作用​

  • HTML提供网页显示内容（结构）
  • CSS美化网页（样式）
  • JavaScript用来控制网页行为（人机交互）

JavaScript发展史​

  • 1992年，Nombas公司开发一种叫C减减（C-minus-minus，简称 Cmm）的嵌入式脚本语言，为保持与C（和C++）足够的相似性。由于名字过于消极，最终把名字改为「ScriptEase」
  • 1995年，Netscape公司（网景）录用Brendan Eich(布兰登·艾奇)，在 10 天内开发出 LiveScript。随后改名为「JavaScript」目的是为了蹭Java的热度，除命名外两者并没联系。
  • 1996年，微软在IE3.0搭载JavaScript的克隆板，叫JScript，这时候JavaScript就有三个不同版本的存在。
  • 1997 年，JavaScript 1.1 作为一个草案提交给欧洲计算机制造商协会（ECMA）。最后来自 Netscape、Sun、微软、Borland 和其他一些对脚本编程感兴趣的公司的程序员组成的 TC39 锤炼出了 ECMA-262，该标准定义了名为 ECMAScript 的全新脚本语言。
  • 最终将 ECMAScript 作为 JavaScript 实现的基础。

JavaScript组成​

三大结构

组成结构描述备注
ECMAScriptECMAScript是ECMA制定的脚本语言的标准，也叫JavaScript的语法标准JavaScript也必须遵守ECMAScript标准,包含ECMAScript标准中规定的基本内容
DOM(Document Object Model)JavaScript操作网页上的元素(标签)的APIDOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作
BOM(Browser Object Model)JavaScript操作浏览器的部分功能的API通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等

JavaScript书写格式​

  1. 行内样式
    • 直接将JS代码写到HTML标签里面<div onclick="alert('hello world');">我是div</div>
  2. 内嵌样式
    • 在HTML头部<head>标签内添加<script>标签
    • 通常将js代码放在body的最后, 因为HTML是从上至下加载，否则如果执行js代码时HTML还未被加载，那么js代码无效；
    • 为了保证执行js代码时HTML一定已经被加载了, 那么需要添加一些额外代码.(不推荐)
	window.onload = function () {
            alert("hello world");
        }
  1. 外链样式
    • 单独建立.js文件，将js代码写到文件中。通过<script type="路径/文件名">把文件.html文件关联起来
    • 由于每次加载外链式的js文件都会发送一次请求, 这样非常消耗性能, 在开发中推荐将多个JS文件合成为一个JS文件,以提升网页的性能和加载速度.

JS中的常见输出方式​

在浏览器弹窗中显示内容​

alert("hello world");  //单行提示
prompt("请输入内容：");  //用户输入内容
confirm("你好吗?");  //确认|取消
document.write("hello world2");  //在页面中显示内容

在控制台中显示内容
console.log("hello world3");
console.error("错误信息");
console.warn("警告信息");

在chrome开发者工具查看

⚠️注意

  • js代码严格区分大小写
  • 每一条JS语句以分号(;)结尾，即便浏览器会自动添加，但是耗损系统资源，并且有时会加错分号。
  • js中同样会忽略多个空格和换行