前端基础开发
2024-02-21 18:03:05 0 举报AI智能生成
前端 web前端 VUE vuex
作者其他创作
大纲/内容
JavaScript
计算机
软硬件
硬
输入、输出设备
硬盘→运行内存→CPU
数据存储及其单位
软
系统、应用
基础编程
概念
语言
机器
二进制
编程
汇编
高级
解释器
初识JS
运行在客户端，减少请求服务器次数
脚本编程
无需编译，由浏览器内置的js引擎（如chrome的V8，相当于解释器）读取JS代码，逐行解释为二进制，然后由计算机执行，而非浏览器
js引擎
预解析
代码执行
作用
组成工业标准
ECMA欧洲计算机制造协会
JavaSctript网景公司
JS语法（含ES）
DOM文档对象模型
对页面元素
BOM浏览器对象模型
对页面窗口
Jscript微软公司
引入代码
行内、内嵌、外部src
注释
单行与多行alt+ctrl+/
语句
用户表单
1-输入prompt(' ')
3-输出alart(' ')
2-程序内部处理
声明变量var
浏览器控制台输出F12
程序员内部测试console.log( )
alart('num.length')；对变量操作前要加小点
变量
是内存的一个存储数据的容器
声明变量并赋值（变量的初始化）
向内存申请空间
数据类型
简单--栈空间
操作系统自动分配释放
Number数字
包含整数和浮点小数
进制开头
八0
十六0x
NaN
不是一个数字Not A Number
Srting字符串
外单引，内双引
+ 号：数字相加，字符相连
引入变量，引引加加
转义符\
n换行newline
t缩进tab
b空格blank
Boolean布尔值
true当1，false当0
Underfined声明无值
加数字=NaN
Null空值
空对象
复杂--堆空间
程序员分配释放，否则垃圾回收
object
获取类型简单typeof/复杂instanceof
console.log(typeof str)
console颜色辨认
蓝色数字；黑色字符串；浅灰underfined/null
console字面量
1,2数字；'red','blue'字符；false布尔；()函数；[]数组
数据转换
转数字
parseInt（str）取整数，去单位
parseFloat（str）取浮点小数，去单位
Number（str）
隐式转换：str -*/ 变量
转字符
隐式转换：num + ' '
（String（num））
num.toString()
布尔
转false
空、否定值（Boolean（' '））、（Boolean（0））、（Boolean（null））、（Boolean（underfied））、（Boolean（NaN））
变量的语句使用
变量命名规范
标识符
关键字
保留字
交换变量
diagram画图实现逻辑思路
文档中文注释步骤
编写代码
构建临时空变量temp
运算符
一元算数
（） + - * /
% 取余取模
变量 % 数字 = 0 整除
! 非
布尔值的取反符
浮点运算有出入
返回值=表达式（数字、运算符、变量）
递增/减
单独一行，前后置一致
复合运算差异
前置
先变量自加1，后参与表达式运算，返回值【先己后人】
后置
先返回原值，后参与表达式运算，再返回值，后变量自加1【先人后己】
比较运算
等
赋值 =
判等 ==
判断值，有隐式转换
全等 ===
判断值和数据类型
不等 != !==
逻辑运算
与 &&
二真即真
前真，返回最后
前假，返回最前
或 ||
一真即真
前真，返回最前
前假，返回最后
逻辑中断短路
多个表达式，左边表达式为真，不再执行运算右表达式
赋值运算
直接等于 =
每自 加 减 乘 除 余 等于
1 ++
2以上 +=2
流程控制
直流
分支
if (条件表达式为真) { 条件成立执行的代码 }
} else { 否则执行的代码 }
for
} else if (条件2) { 条件成立2执行语句 }
swtich (表达式为true) { case 特定值 : 执行语句；break； default : }
变量值与case值 全等
break中断执行并输出结果，default以上没有匹配执行的代码语句
continue跳过本次继续执行剩余代码
三元表达式，又称条件运算符
条件表达式 ? 表达式1 : 表达式2
倒计时
循环
for
单for
for ( var i = 1 ; i <= 100 ; i++ ) { }
可嵌入分支语句
双for
外层循环一次，内层循环全部次
九九乘法表
while
var 变量初始化 ; while (条件表达式为真) { 执行循环语句 ; 变量递增/减 }
do while
var 变量初始化 ; do { 循环执行语句; } while (条件表达式为真)
数组
是内存的变量集合存储的一个容器
创建
var arr = [ ]
var arr = new Array( )
获取
索引号下标从0开始
console.log( arr[ 0 ] )
没有索引号进行赋值会丢失原数据
遍历
从头到尾访问一次数组元素 arr[ i ]
用循环for ()
检测长度 for (var i = 0; i < arr.length; i++)
最大值
累加和
新增
修改length
刚开始/末尾追加arr [arr.length]=
修改索引号
追加与替换
冒泡排序
函数
封装可重复被调用执行的一段代码块
封装
声明
命名函数（又称自定义函数）
function 函数名( ) { }
匿名函数 ，又称函数表达式
var 变量名 = function ( ) { }
调用
命名 函数名( )
匿名 变量名( )
相互调用
参数
function 函数名( 形式参数1 , 形式参数2... ) { }
形参默认underfined
return退出循环中断执行，且返回函数形参
用单变量来接收函数的返回单值、字符串、数组输出
函数名( 实际参数1 , 实际参数2... )
arguments
不确定量形参，可传递实参是函数内置的一个对象
伪数组，具有长度、索引号特征
作用域
作用域
变量在某范围起作用
全局作用域
局部作用域（又称函数作用域）
变量的作用域
全局变量（包括函数内无声明变量）
局部变量（包括函数形参）
作用域链
内部函数访问外部函数变量，遵循就近原则查找输出
预解析
变量提升
把var提升到当前作用域最上面
不赋值则underfined
函数提升
把function提升到当前作用域最上面
不调用则报错
JavaScript没有块级作用域
for循环里的变量结束遍历在外部仍可传递
对象
自定义对象
具体的一个事物
声明
var obj = { }
属性
名词（键：值对），属性间用逗号隔开
方法
动词（值为匿名函数）
var obj =new Object ( )
追加属性obj.age = 18
追加方法obj.sing = function ( ) { }
function Obj(形参) { this.属性 = 形参1; }
调用函数new Obj(实参)
调用
属性
对象名.属性名
.可理解为“的”
对象名[ '属性名' ]
方法
对象名.方法名（）
遍历对象
for...in...循环
内置对象
查阅文档MDN/w3c
功能
参数
返回值
demo测试
Math静态对象
自己封装数学对象的方法
Math.max()
Math.abs()
Math.floor()
Math.cell()
Math.round()
Math.randomI()
求一个两数中随机整数
date构造函数
Date.prototype
date.getFullYear()
date.getMonth()
返回值小1个月
date.getDate()
date.getDay()
周日返回的是0
数组索引字符"星期"
date.getHours()
时分秒+‘0’（三元表达式）
var 变量名 =+ new Date()
时间戳（用于独一无二的时间，邮件加密）
Array
检测
运算符instanceof
H5新增Array.isarray()
加/删
末push/pop
始unshift/shift
执行完毕：输出长度/元素
索引
indexOf只返回第一个
lastIndexOf返回最后一个
翻转与冒泡
sort（function(a,b) {return a - b //升序}）
join转字符串
concat连接两数组
slice数组截取
splice数组删除
字符串
基本包装类型
不可变性
拼接改，后原地址还在占内存
索引字符indexOf（‘字符’,默认0开始）
字符位置返回索引charAt(index)（H5新增str[index]）、返回ASCII码charCodeAt、
为对象属性赋值str[index]=1
截取字符串substr（索引号，截几个）
替换第一个字符replace（'a','b'）
转数组要一致分隔符split
浏览器对象
HTTP
认识WEB
浏览器Browser
Chrome
Safari
IE
Firefox
Opera
标准WEB
结构HTML身体
表现CSS着装
行为JavaScript动作
搜索引擎优化SEO
LOGO
IDE
集成开发环境，即开发工具
Dreamweaver
SublimeText
WebStorm
HBuilder
VScode
Emmet语法
HTML
简史History
HTML
1.0→2.0→3.2→4.0→4.01→5.0
XHTML
1.0→1.1
语法
文档类型（!doctype html）
页面语言lang
<head>
字符编码charset
标签页标题title
<body>
元素=<开始标签>+内容+<结束标签>
常用元素Element
双标签tags
块级元素block
div、p、h1~h6、li、ul、ol塌陷
行内标签inline
span、a、em、strong、del、ins、quote
title、style、script、table、form
单/void标签
行内块标签inline-block
img尺寸显示
.jpg
.png
.gif
input、td、br、hr
meta
name：keywords、description
http-equiv：content-type
link
media引入资源
伪元素
注释标签
<!-- 注释语句 --> 快捷键： ctrl + /
单独占一行（状态描述、属性描述）
属性Attributes
key键值对格式=“值value”
title、alt
url、src、href
height、line-height、width
px
rem
em
%
color
预定义
rgb255
#十六进制
position
static
relative
absolute
fixed
sticky
method
post
get
font、background、margin
display、visibility
opacity
overflow
cursor
outline
resize
target
spacing
布尔属性Boolean
checked、required、disabled、multiple、controls、aotoplay、loop、muted
声明属性 @keyframes
动画
字体
首选候选通用
格式
媒体查询
层叠书写
主流框架界限
CSS 特定属性 -moz-transform
特殊字符
>> <<
HTML5新特性
观念【兼容、化繁为简】
新标签
画布canvas、iframe
视音svg、audio、video
三种解析码
mp4主流浏览器都支持
webm
ogg
表单控件date、number、tel、search
属性autofocus、autocomplete
语义化header、footer、nav、main、section、引文aside、article、time、数据figure、过程progress
local与sessionStorage
WebSocket
CSS
初识
语法及规范写法
三性质
外联样式表<link rel="stylesheet" href="">
内部样式表<style></style>
行内元素表<style="color:red;"
选择器
单一
通配符/全局 *
元素 p、a
属性 [ ]
类 .class
id #
复合
后代div a｛｝
子代ol>li｛｝
代弟input~label { }
相邻兄弟h1+p｛｝
并集div，a｛｝
伪类：hover ｛｝
常见
结构伪类：
伪元素：：
注释符号
常用布局
基础
div网格
浮动float
清除clear
改变了display属性
定位position
静态static
相对relative
绝对absolute
固定fixed
粘性sticky
flex、grid
设计
竖列
圣杯
双飞翼
预处理器
less
认识
安装
编译
引入
less嵌套
less运算
scss
sass
stylus
postcss
处理兼容，浏览器公共前缀
CSS3新特性
盒模型box-sizing
w3c（C3怪异标准）即border-box
盒子以边框算起，真正占位是设定好的宽高width
IE标准（传统标准）即content-box
盒子以设定宽高的内容向外算起，真正占位是（content width + 2padding + 2border ） ，改变参数p、b会撑大原设定宽高的盒子
增加属性
圆角border-radius
转换中心点 transform-origin
转换transform
2D
位移translate
旋转rotate
缩放scale
3D
SketchUp + 左手准则
3D呈现transform-style
给body透视 perspective
缩写形式
动画animation
帧动画、GPU加速
过渡transition
渐变gradients
阴影shadow
min.css
Cutterman
PS
倍图@2 @3
FW精灵图
二倍
Moblie移动端
基础认识
浏览器
兼容主流内核 -webkit-
屏幕
碎片化严重
尺寸使用px
调试
视口
分类
meta视口标签
二倍图
物理像素（分辨率）与物理像素比
Retina（视网膜屏幕）
多倍图（实际开发公司需求）
backgroundsize
单位
开发方案及布局技术选型
单独制作（主流）
流式百分比布局
京东m.jd.com
flex弹性伸缩布局
携程m.ctrip.com
rem+less+媒体查询布局
苏宁m.suning.com
rem+flexble.js（推荐）
淘宝m.taobao.com
响应式兼容（其次）
媒体查询+bootstarp布局
框架使用
grid栅格系统
技术解决
初始化normalize.css
特殊样式
点击链接背景高亮清除
-webkit-tap-highlight-color: transparent;
ios按钮和输入框清除
-webkit-appearance: none;
禁止长按页面弹出菜单
img,a { -webkit-touch-callout: none; }
代码步骤
0 条评论
下一页
