Web前端开发技术

Appearance

什么是javascript ​

元信息 ​

  • 目标：确立 javascript 在三层分离（结构/样式/行为）中的角色——浏览器里唯一的行为层载体；能区分外联/嵌入/内联三种引入方式，并用控制台即写即跑
  • 关键概念：行为层、脚本语言、分离原则、外联、嵌入、内联、动态语言、函数一级公民、原型链
  • 关联阶段：cp3
  • 常见误区：把 js 当"网页的附属小功能"（它是一门完整的编程语言，寄生于浏览器）；以为必须先建项目才能跑 js（控制台即写即运行）；混淆引入方式与 css 引入的差异记忆点（js 内联需挂事件，css 内联是属性）

内容、结构、样式、行为 ​

示例：一曲新词酒一杯

  • 内容 txt、image：页面所要传递的信息(文本及二进制资源), 自然语言
  • 结构 html：内容的结构和语义，标记语言
  • 样式 css： 内容的呈现，声明式语言
  • 行为 javascript ：用户与内容的交互方式，编程语言

软件工程的利器: 分离原则 ​

  • 标记（名词）、规则（形容词）、编程（动词）
  • 无穷的组合与变化，利于重用与扩展，
  • 形与色、动与静、变与常

Javascript的基本特点 ​

JavaScript 是一门运行在浏览器中的脚本语言

  • 脚本(script)语言: 面向特定用途的,倾向于描述性、声明性的编程语言
  • 寄生于浏览器之中,类似于浏览器的shell

引入 Javascript 代码的方式 ​

  • 外联
  • 嵌入
  • 内联

类似 css 的引入方式

嵌入 ​

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>
Open on CodeSandboxOpen Sandbox

一般放置于<body>之中

内联 ​

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>
Open on CodeSandboxOpen Sandbox

需要与onclick等事件相关联

外联 ​

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>
Open on CodeSandboxOpen Sandbox

一般放置于<head>区域之中

快速运行 Javascript ​

  • 打开浏览器并打开任何一个网页，单击右键选择检查元素(inspect element)菜单项，进入浏览者开发者工具
  • 点击切换到控制台(console)标签栏，看到输入框(光标闪烁处)
  • 敲入下面的javascript代码
import "./styles.css";

document.getElementById("app").innerHTML = `
<h1>Hello world</h1>
`;
Open on CodeSandboxOpen Sandbox

语法特性 ​

  • 动态语言：弱类型，可以动态定义类或对象
  • 解释性语言或即时编译性语言：即写即运行
  • 面向过程语言风格: C style
  • 面向对象风格：支持类似对象的方法调用，并内置一组标准对象
  • 函数式编程风格：函数是一级公民，支持将函数本身作为函数的参数和返回值
import "./styles.css";

document.getElementById("app").innerHTML = `
<h1>Hello world</h1>
`;
Open on CodeSandboxOpen Sandbox
  • 基于原型链：继承、混入等模块化方法均通过原型链实现

快速教程 ​

cheatsheet ​

参考 ​