《JS&jQuery 交互式web前端开发》（一）编程基础知识

1 编程基础知识

1.1 脚本

含义

• 一段脚本是一系列指令，计算机执行指令以达成目标
• 脚本运行时可能只会执行全部指令中的一部分

编写步骤

• 定义目标
• 设计脚本：使用流程图
• 写代码：使用编程语言（JavaScript）

1.2 计算机建模方式

使用数据创建模型

• 对象（物件）
  • 每个物理物件都可以被表示为一个对象
  • 每个对象都有：属性、事件、方法
  • 事件触发方法，方法获取、更新属性
• 属性（特征）
  • 每个属性都有名称、值
• 事件
  • 含义：响应用户与计算机的交互行为
  • 作用：事件发生时，触发特定的功能
• 方法
  • 含义：表示在真实世界中人们（或其他物件）如何与对象进行交互
  • 作用：方法包含许多指令，这些指令集合起来完成任务

web浏览器

• window 对象
• document 对象
  • 作用：访问、修改页面内容，响应用户与界面的交互方式
  • 属性：描述web页面的特性
  • 方法：执行与浏览器中载入文档有关的任务
  • 事件：响应交互行为
• 浏览器运行web页面
  • 步骤
    • 接收html页面
    • 创建页面的一个模型，存储在内存中
    • 使用渲染引擎显示页面
  • JavaScript的执行
    • 解释器读取指令，翻译成浏览器可以识别、执行的指令
    • 解释型编程语言：每行代码依次翻译后执行

1.3 编写web脚本

关注点分离

• 内容层html、展现层css、行为层JavaScript
• 尽可能将三种语言放在不同的文件中，然后用html页面链接css、JavaScript文件

渐进式增强

• 仅有html：可以工作在所有设备上、被所有用户访问、快速加载
• html+css
  • 单独添加css文件：
    • 让规则只关注页面的外观而非内容
    • 可以在所有网站使用相同的样式表，也可以对同样的内容使用不同的样式表
• html+css+JavaScript
  • 单独添加JavaScript文件
    • 即使用户不载入、运行JavaScript，页面也可以工作
    • 可以在不同页面重用代码（快速载入、易于维护）

创建JavaScript脚本

• 从html页面链接JS文件
  • 语法：<script scr="JavaScript文件存储位置"> </script>
  • web页面的源代码中只显示JavaScript文件的链接（脚本与浏览器创建的页面模型进行交互）
• 在页面上放置脚本（不建议使用）
  • 语法：<script> JavaScript代码 </script>

调用对象的方法

• document.write('hello!');
  • document：对象
  • .：成员操作符
  • write('hello!');：方法
  • ('hello!');：参数
  • 说明
    • document对象拥有多个方法和属性，它们被称为对象的成员

<script>元素

• 提示浏览器载入JavaScript文件