JavaScript变量声明提升,网站前端开发学习

第一个阶段,开发环境和工具准备

  • 浏览器 (Google,FireFox,…)
  • 下载,安装前端开发工具vscode,
  • 下载、安装 node、npm、webpack、webpack-cli、cnpm,配置前端开发环境
  • 下载、配置PHP和MySQL

第二个阶段,前端入门,网页制作

1,HTML:
  • 常用标签(div标签,p标签,span标签,a标签,img标签)
  • 锚点
  • 列表标签(有序列表,无序列表,自定义列表)
  • 表单标签
  • 表格标签
  • 标签分类
  • 标签语义化
  • 注释
  • 字符实体
2,CSS:
  • CSS介绍

  • 全局样式

  • 行内元素

  • 内联元素

  • 选择器
    (1)基础选择器(标签选择器,类选择器,ID选择器)
    (2)复合选择器(后代选择器,兄弟选择器,相邻元素选择器,交集选择器,并集选择器)
    (3)选择器优先级

  • 字体样式值

  • 文本样式值

  • 颜色样式值

  • 盒模型(标准盒模型,怪异盒模型)

  • 控制台使用

  • 清除默认样式

  • 盒模型居中

  • 标准文档流

  • 块元素

  • 行内元素

  • 行内块元素

  • 多种伪类元素

  • 浮动
    (1)浮动元素脱离文档流
    (2)外边距塌陷问题
    (3)N种清除浮动的方式

  • 定位(相对定位,固定定位,绝对定位,z-index)

第三个阶段,JavaScript动态交互

1,JavaScript初阶
  • 变量和运算符
    (1)JS用途
    (2)JS书写规则
    (3)内置函数使用
    (4)字面量
    (5)变量
    (6)命名标识符规范
    (7)变量声明提升
    (8)运算符(数学运算符,比较运算符,逻辑运算符,赋值运算符)
    (9)页面修改(innerHTML,innerText,value)
  • 逻辑控制
    (1)if关键字(if…else,if…else if…else,多分支条件语句,嵌套if语句)
    (2)for关键字(for循环,双重for循环)
    (3)自增
    (4)自减
    (5)switch条件语句
    (6)累加器
    (7)累乘器
    (8)while(continue关键字,break关键字,while循环语句,do…while循环语句)
    (9)js控制HTML标签
    (10)三目运算符
    (11)运算符优先级
  • Math类
    (1)Math属性(Math.PI,Math.E,…)
    (2)Math函数(round,floor,ceil,…)
  • 函数
    (1)无参函数
    (2)函数定义
    (3)函数调用
    (4)作用域
    (5)参数(形参,实参,入参,出参)
    (6)不定参函数
    (7)arguments
  • Object类
    (1)对象的定义
    (2)对象的使用
  • 定时器
  • Array类
  • String类
  • Date类
2,JavaScript进阶
  • JavaScript DOM基础
    (1)DOM元素遍历
    (2)DOM元素查找
    (3)DOM元素增加
    (4)DOM元素删除
    (5)DOM元素修改
    (6)DOM元素剪切
    (7)属性操作
    (8)样式操作
    (9)文档碎片
  • this(在各个环境下this的指向)
  • 事件
    (1)普通事件回顾
    (2)绑定事件
    (3)取消普通事件
    (4)取消绑定事件
    (5)事件类型(键盘事件,鼠标事件,聚焦&失焦事件)
  • 事件流
    (1)事件源
    (2)事件流
    (3)事件冒泡
    (4)事件捕获
    (5)事件委托
  • JavaScript BOM 基础
    (1)offset
    (2)client
    (3)scroll
    (4)getBoundingClientRect()
    (5)滚动事件
  • call&apply&bind
    (1)深入探究作用域
    (2)偏函数的使用
  • 自定义属性
  • 面向对象编程
    (1)封装
    (2)构造方法
    (3)instanceof
    (4)constructor
    (5)继承(函数继承,构造函数继承,类继承)
    (6)原型
    (7)原型链
    (8)多态
3,ES6
  • ECMAScript6简介
  • let和const
  • ES6+的作用域
  • 对象的扩展
  • 函数的扩展
  • 字符串的扩展
  • Symbol
  • Set&Map
  • Promise对象
  • async&awiat
  • 箭头函数
  • 模板字符串
  • rest参数
  • Class
  • Module模块
4,JavaScript高阶
  • 闭包
    (1)深入理解闭包
    (2)深入理解闭包原理
    (3)闭包面试题权威解析
  • 立即执行函数
  • 惰性函数
  • 插件开发
  • 多人协作
  • 深复制与浅复制
  • 数组扁平化
  • 递归
    (1)斐波那契数列详解
    (2)递归深复制与浅复制
    (3)柯里化思想
    (4)柯里化及递归面试题权威解析
  • 正则表达式全解
  • 函数防抖
  • 函数节流

第四阶段,移动端开发技术实战

1,HTML5
  • HTML5简介
  • HTML5新语法
  • HTML5新语义化标签
  • HTML5新表单元素属性
  • HTML5手机端新事件处理
  • HTML5新增多媒体实战
  • 本地存储(cookie,localStorage,sessionStorage)
  • Canvas
  • HTML5地理组件GeoLocation
2,CSS3
  • CSS3新增属性
  • 圆角制作企业级方案
  • CSS3背景属性
  • 过渡动画 transition
  • 变化属性 transform
  • 特效轮播图实战
  • 企业级flex布局实战
  • grid布局实战
3,Bootstrap
  • 响应式
  • 媒体查询(媒体类型,媒体特性,媒体查询企业级应用)
  • 栅格系统
  • 栅格参数
  • 组合模式
  • 列偏移/列排序/自动列
  • 列对齐/列嵌套
  • 文本与颜色
  • 按钮
  • 导航
  • 图文混排
  • 模态框
  • 轮播图
4,移动端开发
  • 移动端简介
  • 移动端视口约束
  • 移动端flex移动端实践
  • rem
  • vw
  • flexible企业级实战

第五阶段,前后端分离技术及常用类库

1,ajax
  • AJAX简介
  • AJAX作用
  • 封装AJAX
  • 创建XMLhttpRquest对象
  • 同步和异步
  • AJAX分页
2,JQuery
  • jQuery介绍
  • jQuery链式语法
  • jQuery选择器
    (1)基础选择器
    (2)复合选择器
    (3)jQuery独有选择器
  • jQuery核心
    (1)jQuery核心函数
    (2)jQuery对象访问
    (3)数据缓存
    (4)队列控制
    (5)插件机制
    (6)多库共存
  • jQuery工具
    (1)浏览器及特性检测
    (2)数组和对象操作
    (3)函数操作
    (4)测试操作
    (5)字符串操作
    (6)URL
    (7)插件编写
  • jQuery事件
    (1)原始事件
    (2)创建事件
    (3)页面载入
    (4)事件处理
    (5)事件委派
    (6)事件切换
    (7)事件
  • jQuery事件对象
  • jQuery特效(基本,滑动,淡入淡出,自定义,设置)
  • jQuery回调函数
  • jQuery文档处理(内部插入,外部插入,包裹,替换,删除,复制)
  • jQuery筛选(过滤,查找,串联)
  • jQuery属性(属性,CSS类,HTML代码/文本/值)
  • jQueryCSS(CSS,位置,尺寸)
Echarts
  • Echarts概述
  • Echarts使用
  • 坐标系
  • 雷达图/饼状图/折线图

第六阶段,企业级高级WEB架构开发

1,Webpack

Webpack的安装和使用

  • 项目模块打包
  • 静态打包模块器
  • Webpack入口
戳这里领取完整开源项目:【一线大厂前端面试题解析+核心总结学习笔记+Web真实项目实战+最新讲解视频】

Webpack输出

  • Webpack插件
  • webpack模块
2,Vue
  • Vue使用
  • Vue响应式
  • Vue双向数据绑定
  • Vue相关指令
    (1)条件渲染v-if
    (2)v-bind指令
    (3)v-on指令
    (4)v-on的修饰符
    (5)列表渲染
    (6)v-model指令
    (7)v-model详细讲解
    (8)v-cloak
  • vue-resource
  • axios
  • template选项
  • Vue生命周期
  • Vue组件
    (1)Prop
    (2)监听组件事件
    (3)插槽
    (4)动态组件
    (5)组件通信(父子,子父,其他组件)
    (6)函数式组件
    (7)异步组件
  • 自定义指令
  • 过滤器
  • computed属性
  • Vue-cli 2.x和3.x 脚手架配置
  • Vue-router
    (1)VueRouter基础
    (2)嵌套路由
    (3)路由重定向
    (4)动态路由
    (5)路由传参
    (6)导航守卫
  • Vuex(State,Getter,Mutation,Action,Module)
  • Element UI
3,微信小程序
  • uni-app
  • mpvue
  • 微信小程序注册
  • APPID申请
  • 生命周期
  • 小程序调试
  • 微信小程序框架组件
  • 微信小程序布局框架
  • 微信小程序条件渲染和列表渲染
  • 媒体组件audio
  • 视图容器
  • 网络api
  • 相机api
  • 地图api
4,uniapp
  • uniapp基础
  • uniapp初始化配置
  • uniapp视图模板使用
  • uniapp生命周期
  • uniapp路由跳转
  • uniapp常用组件
  • uniappScrollView的使用
  • uniapp-ui使用
  • uniapp-Vuex使用

更多面试题

**《350页前端校招面试题精编解析大全》**内容大纲主要包括 HTML,CSS,前端基础,前端核心,前端进阶,移动端开发,计算机基础,算法与数据结构,项目,职业发展等等

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  • uniapp基础
  • uniapp初始化配置
  • uniapp视图模板使用
  • uniapp生命周期
  • uniapp路由跳转
  • uniapp常用组件
  • uniappScrollView的使用
  • uniapp-ui使用
  • uniapp-Vuex使用

更多面试题

**《350页前端校招面试题精编解析大全》**内容大纲主要包括 HTML,CSS,前端基础,前端核心,前端进阶,移动端开发,计算机基础,算法与数据结构,项目,职业发展等等

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-pQES5xjZ-1709690668488)]

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/433094.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【数据结构】队列 循环队列 双端队列——顺序队列+链式队列完整代码(创建、入队、出队)

2.队列 2.1 队列的定义 定义 只允许在一端进行插入,另一端删除的线性表。 特征:先进先出(First In First Out->FIFO) 重要术语:队头、队尾、空队列 2.2 队列的顺序存储 2.2.1 初始化 结构体 typedef struct{…

unity学习(44)——选择角色菜单——顺利收到服务器的数据

本节的思路参考自,内容并不相同:13ARPG网络游戏编程实践(十三):角色选择UI及创建面板制作(四)_哔哩哔哩_bilibili 现在的代码写在MessageManager.cs中,函数名UserHandler(是从OnMess…

蓝牙系列三:BLE协议栈各层数据格式解析

继续蓝牙的学习,本篇还是根据韦东山老师的视频理解以及整理。 对于BLE系统,它分为上下两块。上面那一块,我们称为host主机。下面这一块是controller,你可以简单的认为它就是一个蓝牙芯片。如下图所示(Host + Controller,他们的接口是HCI) 对于host这一块,它运行于linu…

YOLOv8-Openvino-ByteTrack【CPU】

纯检测如下: YOLOv5-Openvino和ONNXRuntime推理【CPU】 YOLOv6-Openvino和ONNXRuntime推理【CPU】 YOLOv8-Openvino和ONNXRuntime推理【CPU】 YOLOv9-Openvino和ONNXRuntime推理【CPU】 注:YOLOv8和YOLOv9代码内容基本一致! 全部代码Github&…

OJ_链表合并

题干 C实现 #include <stdio.h> #include <list>using namespace std;int main() {int s1, s2, val;scanf("%d", &s1);list<int> ls1, ls2;for (int i 0; i < s1; i) {scanf("%d", &val);ls1.push_back(val);}scanf("…

论文笔记 Where Would I Go Next? Large Language Models as Human Mobility Predictor

arxiv 2023 08的论文 1 intro 1.1 人类流动性的独特性 人类流动性的独特特性在于其固有的规律性、随机性以及复杂的时空依赖性 ——>准确预测人们的行踪变得困难近期的研究利用深度学习模型的时空建模能力实现了更好的预测性能 但准确性仍然不足&#xff0c;且产生的结果…

GIS之深度学习06:CUDA12安装(适配版)

CUDA&#xff08;Compute Unified Device Architecture&#xff09;是NVIDIA开发的并行计算平台和编程模型&#xff0c;用于利用NVIDIA GPU的并行计算能力&#xff0c;它允许开发者使用类似于C语言的编程语言编写并行程序&#xff0c;利用GPU的大规模并行计算能力加速各种类型的…

3D行业趋势2024

3D 行业似乎总是想出新的方法来加快自身的变革速度&#xff0c;并一路上给我们带来惊喜。 2024 年&#xff0c;3D 景观将会发生前所未有的变化&#xff0c;但仍有一些线索可以帮助我们指明正确的方向。 话虽如此&#xff0c;以下是 3D 工程行业正在着手、扩大或可能在来年深入参…

矩阵爆破逆向-条件断点的妙用

不知道你是否使用过IDA的条件断点呢&#xff1f;在IDA进阶使用中&#xff0c;它的很多功能都有大作用&#xff0c;比如&#xff1a;ida-trace来跟踪调用流程。同时IDA的断点功能也十分强大&#xff0c;配合IDA-python的输出语句能够大杀特杀&#xff01; 那么本文就介绍一下这个…

Kaggle竞赛入门级---泰坦尼克号飞船(0.80)

由于数据集需要翻墙&#xff0c;先附上数据集 链接&#xff1a;https://pan.baidu.com/s/10MTlK_3kXMRw6JsSTT8tVg?pwd6666 提取码&#xff1a;6666 注意正文会讲述我的步骤处理思路&#xff08;代码可能并不会完整的放在正文中&#xff08;这过于繁琐了&#xff09;&#…

ArmSoM Rockchip系列产品 通用教程 之 HDMI-IN使用

1. HDMI-IN简介 HDMI IN功能可以通过桥接芯⽚的⽅式实现&#xff0c;将HDMI信号转换成MIPI信号接收RK3588芯⽚平台⾃带HDMI RX模块&#xff0c;可以直接接收HDMI信号&#xff0c;无需通过桥接芯⽚实现。在ArmSoM系列产品中&#xff0c;ArmSoM-W3支持HDMI-IN功能HDMI-IN功能框图…

华大基因护航沙特“2030愿景”实现,将“中国技术”带到中东市场

沙特“2030愿景”提出&#xff0c;要将国民平均寿命从74岁提高到80岁。沙特人民日益增长的医疗健康需求亟待更加全面、高效的医疗卫生体系。2023年&#xff0c;在沙特首都利雅得&#xff0c;由华大基因沙特全资子公司与当地合作方共同成立的综合精准医学检验实验室Genalive开业…

基于单片机的数字温度计设计

目 录 摘 要 I Abstract II 引 言 1 1 整体方案设计 3 1.1 主控芯片类型选择 3 1.2 测温电路选择 3 1.3 系统总体方案 4 2 系统的硬件电路设计 5 2.1 单片机系统设计 5 2.2 显示模块设计 8 2.3 温度读取电路的设计 10 3 系统软件设计 13 3.1 软件开发环境的介绍 13 3.2 系统重…

图像分类技术在城市垃圾分类与处理中的应用与实践

一、引言 在当今世界&#xff0c;城市化进程不断加快&#xff0c;随之而来的是日益增长的垃圾处理压力。城市生活垃圾、工业固体废物和危险废物的处理已经成为环境保护领域的一大挑战。为了应对这一挑战&#xff0c;卫生填埋、垃圾堆肥和垃圾焚烧等技术路线应运而生。其中&…

(文末送书)直击前沿技术:《低代码平台开发实践:基于React》

目录 前言 一、React与低代码平台的结合优势 二、基于React的低代码平台开发挑战 三、基于React的低代码平台开发实践 四、书籍推荐 《低代码平台开发实践&#xff1a;基于React》 1、图书介绍 2、适用人群 3、 作者简介 4、写书原由 5、解决问题 6、书…

2024年冲刺年薪40w,java面试常问知识点

前言 刚刚过去的双十一&#xff0c;让“高性能”“高可用”“亿级”这3个词变成了技术热点词汇&#xff0c;也让很多人再次萌发成为「架构师」的想法。先问大家一个问题&#xff1a;你觉得把代码熟练、完成需求加上点勤奋&#xff0c;就能成为架构师么&#xff1f;如果你这么认…

数据结构详解①——诸论

目录 前言 引入&#xff1a; 基本概念和术语 数据 数据元素 数据项 数据对象 数据结构 逻辑结构 物理结构 数据类型 为什么要设计出来数据类型呢&#xff1f; 数据类型的分类 抽象数据类型 数据结构与算法的关系 算法 定义 特性 设计要求 效率度量方法 事…

nodejs版本管理工具nvm安装和环境变量配置

1、下载nvm.exe https://github.com/coreybutler/nvm-windows/releases2、安装 1.在D盘根目录新建一个dev文件夹&#xff0c;在dev里面再新建一个nodejs。 2.双击下载好的nvm.exe 修改文件路径&#xff0c;且路径中不能有中文 3.安装完成后在D:\dev\nvm打开settings.txt&…

网络信息安全:11个常见漏洞类型汇总

一、SQL注入漏洞 SQL注入攻击&#xff08;SQL Injection&#xff09;&#xff0c;简称注入攻击、SQL注入&#xff0c;被广泛用于非法获取网站控制权&#xff0c;是发生在应用程序的数据库层上的安全漏洞。 在设计程序&#xff0c;忽略了对输入字符串中夹带的SQL指令的检查&…

C语言写学生信息管理系统

说明:本博文来自CSDN-问答板块,题主提问。 需要:用C语言设计一个学生信息管理系统(尽量不使用指针),学生信息包括学号,姓名,数学成绩,C语言成绩,英语成绩和每个学生的总成绩这几项。系统要实现如下几个功能:1.添加学生2.删除学生3.修改学生信息4.查询学生信息5进行学…
最新文章