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

文章目录

  • 1 编程基础知识
    • 1.1 脚本
        • 含义
        • 编写步骤
    • 1.2 计算机建模方式
        • 使用数据创建模型
        • web浏览器
    • 1.3 编写web脚本
        • 关注点分离
        • 渐进式增强
        • 创建JavaScript脚本
        • 调用对象的方法
        • `

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文件
    • 语法:
    • web页面的源代码中只显示JavaScript文件的链接(脚本与浏览器创建的页面模型进行交互)
  • 在页面上放置脚本(不建议使用)
    • 语法:

调用对象的方法

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

你可能感兴趣的:(web前端)