JavaScript前端开发

宋佳珍

目录

  • 1 课程简介
    • 1.1 为何要学习Web前端
    • 1.2 课程标准
    • 1.3 课程的主要内容及基本要求
    • 1.4 课时分配
    • 1.5 考核模式与成绩评定办法
    • 1.6 【课堂讨论】答疑解惑
  • 2 第一章 初识JavaScript
    • 2.1 本章我要学什么？
    • 2.2 任务1.1 认识JavaScript
    • 2.3 任务1.2开发工具的安装
    • 2.4 任务1.3第一个JavaScript程序
    • 2.5 第一章节测验
    • 2.6 主题讨论
  • 3 第二章 JavaScript基本语法
    • 3.1 本章我要学什么？
    • 3.2 任务2.1交换两个变量的值
    • 3.3 任务2.2数据类型
    • 3.4 任务2.3表达式
    • 3.5 任务2.4根据用户输入的数据完成求和运算
    • 3.6 任务2.5流程控制
    • 3.7 任务2.6输出“金字塔”
    • 3.8 第二章测验
    • 3.9 主题讨论
  • 4 第三章 数组
    • 4.1 本章我要学什么？
    • 4.2 任务3.1初识数组
    • 4.3 任务3.2创建数组
    • 4.4 任务3.3查找班级最高分和最低分（数组的操作）
    • 4.5 任务3.4二维数组转置（二维数组）
    • 4.6 任务3.5数据排序
    • 4.7 任务3.6 统计每位学生的总成绩
    • 4.8 第三章测验
    • 4.9 主题讨论
  • 5 第四章 函数
    • 5.1 本章我要学什么？
    • 5.2 任务4.1初识函数
    • 5.3 任务4.2使用函数求任意两数的最大值
    • 5.4 任务4.3函数内外变量的作用域
    • 5.5 任务4.4函数进阶
    • 5.6 任务4.5嵌套与递归（求斐波那契数列第N项的值）
    • 5.7 任务4.6闭包函数
    • 5.8 任务4.7获取指定年份的2月份的天数
    • 5.9 第四章测验
    • 5.10 主题讨论
  • 6 第五章 对象
    • 6.1 本章我要学什么？
    • 6.2 任务5.1初识对象
    • 6.3 任务5.2对象的创建
    • 6.4 任务5.3对象的遍历
    • 6.5 任务5.4值类型和引用类型
    • 6.6 任务5.5猜数字游戏（Math对象）
    • 6.7 任务5.6时间差计算（Data对象）
    • 6.8 任务5.7统计不及格学生的人数
    • 6.9 任务5.8判断用户名是否合法
    • 6.10 任务5.9查阅MDN Web文档
    • 6.11 任务5.10统计出现次数最多的字符
    • 6.12 第五章测验
    • 6.13 主题讨论
  • 7 第六章 DOM（上）
    • 7.1 本章我要学什么？
    • 7.2 任务6.1 Web API简介
    • 7.3 任务6.2 DOM简介
    • 7.4 任务6.3 获取元素
    • 7.5 任务6.4 事件基础
    • 7.6 任务6.5 元素内容操作
    • 7.7 任务6.6 单击按钮改变按钮颜色（元素样式操作）
    • 7.8 任务6.7 元素属性操作
    • 7.9 任务6.8 显示和隐藏密码
    • 7.10 第六章测验
    • 7.11 主题讨论
  • 8 第七章 DOM（下）
    • 8.1 本章我要学什么？
    • 8.2 任务7.1 节点基础
    • 8.3 任务7.2 简易留言板（节点操作）
    • 8.4 任务7.3 事件进阶
    • 8.5 任务7.4 事件对象
    • 8.6 任务7.5 常用事件
    • 8.7 任务7.6 元素其他操作
    • 8.8 任务7.7 鼠标拖曳效果
    • 8.9 第七章测验
    • 8.10 主题讨论
  • 9 第八章 BOM
    • 9.1 本章我要学什么？
    • 9.2 任务8.1 BOM简介
    • 9.3 任务8.2 BOM对象
    • 9.4 任务8.3 窗口事件
    • 9.5 任务8.4 定时器
    • 9.6 任务8.5 制作交通信号灯
    • 9.7 第八章测验
    • 9.8 主题讨论
  • 10 第九章 正则表达式
    • 10.1 本章我要学什么？
    • 10.2 任务9.1 认识正则表达式
    • 10.3 任务9.2 正则表达式中的元字符（身份证号码验证）
    • 10.4 任务9.3 正则表达式中的模式修饰符
    • 10.5 任务9.4 正则表达式常用方法（过滤并替换敏感词）
    • 10.6 任务9.5 表单验证
    • 10.7 第九章测验
    • 10.8 主题讨论
  • 11 第十章 web服务器Ajax
    • 11.1 本章我要学什么 ？
    • 11.2 任务10.1 Web基础知识
    • 11.3 任务10.2 Web服务器搭建
    • 11.4 任务10.3 Ajax入门
    • 11.5 任务10.4 数据交换格式
    • 11.6 任务10.5 同源策略
    • 11.7 任务10.6 Ajax表单验证
    • 11.8 第十章测验
    • 11.9 主题讨论
  • 12 第十一章 jQuery
    • 12.1 本章我要学什么？
    • 12.2 任务11.1 jQuery快速入门
    • 12.3 任务11.2 获取元素
    • 12.4 任务11.3 元素操作
    • 12.5 任务11.4 事件操作
    • 12.6 任务11.5 动画特效（导航跟随效果）
    • 12.7 任务11.6 jQuery操作Ajax
    • 12.8 任务11.7 返回页面顶部
    • 12.9 第十一章测验
    • 12.10 主题讨论
  • 13 项目实战（实践）
    • 13.1 项目分析
    • 13.2 项目实现
      • 13.2.1 首页技术实现
      • 13.2.2 影片详情页面的实现
  • 14 1+X前端开发考证
    • 14.1 Web前端开发1+X职业技术等级证书的学习目标和学习线路图
    • 14.2 JavaScript专项练习一
    • 14.3 JavaScript专项练习二
    • 14.4 jQuery专项练习一
    • 14.5 jQuery专项练习二
    • 14.6 jQuery专项练习三
    • 14.7 jQuery专项练习四
  • 15 web前端面试资源库
    • 15.1 web前端企业面试真题汇编
      • 15.1.1 Web前端企业面试真题(一)
      • 15.1.2 Web前端企业面试真题(二)
      • 15.1.3 Web前端企业面试真题(三)
      • 15.1.4 Web前端企业面试真题(四)
      • 15.1.5 Web前端企业面试真题(五)
    • 15.2 Vue.js 企业面试真题汇编
      • 15.2.1 Vue.js 企业面试真题（一）
      • 15.2.2 Vue.js 企业面试真题（二）
      • 15.2.3 Vue.js 企业面试真题（三）
      • 15.2.4 Vue.js 企业面试真题（四）
      • 15.2.5 Vue.js 企业面试真题（五）
    • 15.3 Node.js企业面试真题汇编
      • 15.3.1 Node.js企业面试真题（一）
      • 15.3.2 Node.js企业面试真题（二）
      • 15.3.3 Node.js 企业面试真题（三）
      • 15.3.4 Node.js 企业面试真题（四）
      • 15.3.5 Node.js 企业面试真题（五）
项目分析
  • 1 项目分析
  • 2 教学课件



一、项目导入

在互联网技术高度发达的今天，很多人已经习惯在网站上看电影，很多影视网站应运而生，并广受欢迎。VOD（video on demand，视频点播）的概念已经被越来越多的人所接受，多媒体应用逐渐成为网络发展的必然趋势之一。未来试听生活的新空间也必然在宽度互联网上开启。这个项目是开发一个电影网。

二、系统分析



三、系统设计

1、系统目标

结合实际情况及对用户需求的分析，星光电影网应该具有如下特点：

（1）操作简单方便、界面简洁美观。

（2）能够全面展示影片分类，及影片详细信息。

（3）浏览速度快，尽量避免长时间打不开页面的情况发生。

（4）影片图片清楚，文字醒目。

（5）系统运行稳定、安全可靠。

（6）易维护，并提供二次开发支持。

2、系统功能结构


3、系统业务流程



4、网页预览



四、系统开发必备

1、开发环境

在开发星光电影网时，该项目使用的软件开发环境如下：

（1）操作系统：Windows10。

（2） PHP运行环境：phpStudy v8.1

（3）开发工具：WebStorm 2022.2.3/Visual Studio Code。

（4）浏览器：Chrome。

（5）分辨率：最佳效果1680×1050像素。

由于该项目中使用了Ajax技术请求PHP文件，所以需要在计算机中安装PHP运行环境。

2、文件夹组织结构

五、关键技术

1、JavaScript脚本技术

导航菜单设计

2、Ajax请求

XMLHttpRequest对象

3、Vue.js技术


六、首页技术实现

1、JavaScript实现导航菜单

在网站的首页index.html中，通过导航菜单实现在不同页面之间的跳转。

2、JavaScript实现图片的轮换效果

 在index.html首页中，应用JavaScript实现电影图片轮换效果的网页特效，以此来展示近期较热门的电影。

3、Ajax实现热门专题页面

 热门专题页面主要显示热门电影的相关信息，应用Ajax技术，每隔一定时间就会无刷新获取最新的热门专题信息

4、Vue.js实现电影图片不间断滚动

在index.html页面中，以图片滚动的形式来展示电影信息


5、JavaScript实现浮动窗口

在index.html页面中，通过JavaScript脚本插入了一个浮动的窗口，通过这个浮动窗口可以实现一些扩展功能

6、JavaScript实现滑动门效果

在index.html页面中，使用JavaScript实现了滑动门的效果，通过编写JavaScript代码，实现电影排行中热播影片和经典影片之间的切换

7、JavaScript实现向上间断滚动效果

在网站的首页中实现了即将上线影片信息向上间断滚动的效果

8、查看影片详情页面

 在影片分类展示的页面中，用户不但可以通过单击电影图片、电影名称或     图标打开影片播放页面进行观看，还可以单击     图标打开电影详情页面查看影片详情。

七、总结


素材下载：