当前位置 : 主页 > 编程语言 > 其它开发 >

前端学习之路一

来源:互联网 收集:自由互联 发布时间:2022-05-30
前端 一、什么是前端 任何与用户直接打交道的操作界面都可以称之为前端。比如:电脑界面、手机界面、平板界面 什么是后端? 暂时先理解成 幕后操作者 不直接与用户打交道 二、为

前端

一、什么是前端

  • 任何与用户直接打交道的操作界面都可以称之为前端。比如:电脑界面、手机界面、平板界面
    什么是后端? 暂时先理解成 幕后操作者 不直接与用户打交道

二、为什么要学前端

全栈开发工程师

三、前端学习之路

  • HTML 内容 网页的骨架 标签
  • CSS 外观 网页的样式 选择器 属性
  • JavaScript 动作 网页的动态效果 基础语法 BOM&DOM
  • 前端框架 Bootstrap

Web服务的本质

浏览器中敲入网址回车发生了几件事?

1.浏览器向服务端发送请求

2.服务端接收请求

3.服务端返回相应的响应

4.浏览器接收响应 根据特定的规则渲染页面展示给用户看

四、HTTP协议

超文本传输协议

规定了浏览器与服务端之间消息传输的数据格式

四大特性:

1.基于请求响应

2.基于TCP/IP之上的作用于应用层的协议

3.无状态(服务端无法保存用户的状态,一个人来一千次 我都记不住 还当你如初见)

4.无连接(请求来一次我响应一次 之后立马断开连接 两者之间就不再有任何关系)

websocket  相当于是HTTP协议的一个大的补丁 它支持长链接

请求数据格式

请求首行(标识HTTP协议版本 当前请求方式)

请求头(一大堆k,v键值对)



请求体(携带的是一些敏感信息比如 密码 身份证号...)

响应数据格式

响应首行(标识HTTP协议版本 响应状态码)

响应头  (一大堆k,v键值对)



响应体  (携带的是一些敏感信息比如 密码 身份证号...)

响应状态码

用一串简单的数字来标识一些复杂的状态或者提示信息

1xx:服务端已经成功接收了你的数据正在处理 你可以继续提交额外的数据

2xx:服务端成功响应 你想要的数据(请求成功200)

3xx:重定向(当你在访问一个需要登录之后才能访问的页面 你会发现窗口会自动调到登录页面 301 302)

4xx:请求错误(请求资源不存在404 请求不合法不符合内部规定会权限不够 403)

5xx:服务器内部错误(500)

请求方式

  • get请求
    向服务端要资源(比如浏览器窗口输入www.baidu.com)
  • post请求
    超服务端提交数据(比如用户登录 提交用户名和密码)

URL: 统一资源定位服务(网址)

HTML

超文本标记语言

HTML5

要想让你的页面能够正常被浏览器显示出来 你所写的页面 就必须遵循HTML标记语法

也就意味着所有能够被浏览器显示出来的页面 内部都是HTML代码

浏览器只认识html css js

web本质

浏览器

服务器

文件(后缀名.html结尾的文件  前端页面文件)

文件的后缀名仅仅是给人看的 计算机无所谓 因为都是二进制数据

HTML注释

写网页的一套标准

注释是代码之母

	<!--单行注释-->

	<!--

	多行注释

	多行注释

	-->

一般情况下 html的注释都会按照下面的方式书写

HTML文档结构

<head></head>:head内的标签 不是用来展示给用户看的 而是定义一些配置 主要是给浏览器看的 <body></body>:body内的标签 就是浏览器展示给用户看的内容

打开HTML页面的两种方式

1.招到文件路径 选择浏览器打开

2.pycharm快捷方式直接打开

标签的分类1

1.双标签(<h1></h1> <a></a>)

2.单标签(自闭和标签 <img/>)

head内常用标签

title用来显示网银标题

style用来控制样式 内部支持写css代码

script内部支持写js代码 也支持导入外部的js文件

emmet插件

1.服务器渲染:在服务器那边直接把数据和html整合在一起,统一返回给浏览器

在页面源代码中能看到数据

2.客户端渲染:第一次请求只要一个html骨架 第二次请求拿到数据 进行数据展示

在页面源代码中 看不到数据

熟练使用浏览器抓包工具 右键检查 F12

network 网络工作状态

day01 html

1.容器类标签

容器类标签可以简单的理解为能嵌套其他所有标签的标签

常见容器级的标签:

h标签系列

ul>li

ol>li

dl>dt+dd

div

2.文本类标签

文本级的标签对应容器级标签,只能嵌套文字/图片/超链接的标签

常见文本级的标签:

p

span

strong

em

ins

del

上网的过程就是一个上传下载过程

html标签与文档结构

html:5 tab健

table 表格

浏览器相当于一个解释器

js解释型 弱类型 动态语言

for (var i=0;i<=3;i++){console.log(i);}
VM254:1 0
VM254:1 1
VM254:1 2
VM254:1 3

for(let j=0;j<=3;j++){console.log(j);}
VM369:1 0
VM369:1 1
VM369:1 2
VM369:1 3

var x=111
undefined
typeof x
"number"
var y=3.3333
undefined
typeof y
"number"

var z=13e5
undefined
z
1300000
typeof z
"number"

var n = NaN
undefined
typeof n
"number"

var salary = 3.467
undefined
salary.toFixed(2)  四舍五入保留2位小数
"3.47"

var x=parseInt("abc")
undefined
x
NaN  用来记录转换数字失败的一种状态  非数
typeof x
    
"number"

var x = parseInt("18爱上范德萨发达")
undefined
x
18

parseFloat("3.3333")
3.3333
parseInt("3.45") + parseInt("2.3")
5

parseFloat("3.45") + parseFloat("2.3")
5.75

var x=10
undefined
typeof x
"number"
var z = String(x)
undefined
z
"10"
typeof z
"string"

x
10
x.toString()
"10"

var a = "Hello"
undefined
var b = "world";
undefined
var c = a + b;
undefined
console.log(c);
VM255:1 Helloworld

var msg = "hello world"
undefined
msg + "abc"
"hello worldabc"
msg.length
11
var msg = "    hello    "
undefined
msg.trim()
"hello"

msg.trimLeft()
"hello    "
msg.trimRight()
"    hello"

msg.charAt(0)
"h"
msg.charAt(1)
"e"
msg.charAt(2)
"l"
msg.charAt(-1)
""
msg[0]
"h"
msg[1]
"e"
msg[-1]
undefined

var msg="   hello   "
undefined
msg.trimLeft()
"hello   "
msg.trimLeft().trimRight()
"hello"
msg.trimLeft().length
8

var msg="   hello   "
undefined
msg.trimLeft()
"hello   "
msg.trimLeft().trimRight()
"hello"
msg.trimLeft().length
8
var msg = "hello"
undefined
msg + "egon"
"helloegon"
msg.concat("egon")
"helloegon"
msg.concat("egon","xxx")
"helloegonxxx"

msg
"hello"
msg.indexOf("el")
1
msg.indexOf("el",2)
-1
msg.substring(0,3)
"hel"
msg[0:3]
VM1320:1 Uncaught SyntaxError: Unexpected token ':'
msg[0:3]
VM1359:1 Uncaught SyntaxError: Unexpected token ':'

msg
"hello"
msg.indexOf("el")
1
msg.indexOf("el",2)
-1
msg.substring(0,3)
"hel"
msg[0:3]
VM1320:1 Uncaught SyntaxError: Unexpected token ':'
msg[0:3]
VM1359:1 Uncaught SyntaxError: Unexpected token ':'
msg.slice(0,3)
"hel"
msg.toUpperCase()
"HELLO"
msg.toLowerCase()
"hello"
msg.toUpperCase().tolowercase()
VM1573:1 Uncaught TypeError: msg.toUpperCase(...).tolowercase is not a function
    at <anonymous>:1:19
(anonymous) @ VM1573:1
msg.toUpperCase().tolowerCase()
VM1623:1 Uncaught TypeError: msg.toUpperCase(...).tolowerCase is not a function
    at <anonymous>:1:19
(anonymous) @ VM1623:1
msg.toUpperCase().toLowerCase()
"hello"

var msg = "a:b:c"
undefined

msg.split(":")
(3) ["a", "b", "c"]
msg.split(":")[0]
"a"
msg.split(":")[1]
"b"
msg.split(":")[-1]
undefined
msg[msg.length-1]
    
"c"

var msg = `
aaa
vvv
bbb
`
undefined
msg
"\naaa\nvvv\nbbb\n"


var name = "egon"
undefined
var age = 18
undefined
var msg = `my name is ${name} my age is $(age)`
undefined
msg
"my name is egon my age is $(age)"

var x = true
undefined
var y = false
undefined
typeof x
"boolean"
typeof y
"boolean"

if(10){console.log("ok")}
VM2355:1 ok
undefined
if(0){console.log("ok")}
undefined

z
VM2478:1 Uncaught ReferenceError: z is not defined
    at <anonymous>:1:1
(anonymous) @ VM2478:1
var z
undefined
z
undefined

Boolean("")
false
Boolean(" ")
true
Boolean([])
true

var x = 10
undefined
x = null
null
x
null

var arr=[111,33,333,"aaa"]
undefined
arr
(4) [111, 33, 333, "aaa"]
arr.length
4
arr.push("bbb")
5
arr
(5) [111, 33, 333, "aaa", "bbb"]
arr.pop()
"bbb"
arr
(4) [111, 33, 333, "aaa"]
arr.unshift(0)
5
arr
(5) [0, 111, 33, 333, "aaa"]

arr.shift()
0
arr
(4) [111, 33, 333, "aaa"]
arr
(6) [111, 33, 333, "aaa", 444, 5555]
arr.slice(0,3)
(3) [111, 33, 333]
arr[0:3]
VM3164:1 Uncaught SyntaxError: Unexpected token ':'
arr
(6) [111, 33, 333, "aaa", 444, 5555]
var arr=[99,33,44,17,19]
undefined
arr.reverse()
(5) [19, 17, 44, 33, 99]

arr
(5) [19, 17, 44, 33, 99]
arr.join(":")
"19:17:44:33:99"
arr.concat([22,16])

(7) [19, 17, 44, 33, 99, 22, 16]

var arr = [123,9,1211,11]
undefined
arr.sort()
(4) [11, 1211, 123, 9]
arr
(4) [11, 1211, 123, 9]
function f (v1,v2){return v1-v2;}
undefined
arr.sort(f)
(4) [9, 11, 123, 1211]

arr.sort(function f (v1,v2){return v1-v2;})
(4) [9, 11, 123, 1211]0: 91: 112: 1233: 1211length: 4[[Prototype]]: Array(0)
arr.sort(function (v1,v2){return v1-v2;})
(4) [9, 11, 123, 1211]

var arr = [3,9,2,11]
undefined
arr.sort(function (v1,v2){return v1-v2;})
(4) [2, 3, 9, 11]

arr.forEach(function (v,i,all){console.log(i,v,all)})
VM3951:1 0 2 (4) [2, 3, 9, 11]
VM3951:1 1 3 (4) [2, 3, 9, 11]
VM3951:1 2 9 (4) [2, 3, 9, 11]
VM3951:1 3 11 (4) [2, 3, 9, 11]

arr.forEach(function (v){console.log(v)})
VM4013:1 2
VM4013:1 3
VM4013:1 9
VM4013:1 11

arr.forEach(function (v,i){console.log(v,i)})
VM4043:1 2 0
VM4043:1 3 1
VM4043:1 9 2
VM4043:1 11 3

arr.forEach(function (v,i){console.log(v,i,this[0])},"abcdefg")
VM4090:1 2 0 "a"
VM4090:1 3 1 "a"
VM4090:1 9 2 "a"
VM4090:1 11 3 "a"

arr.forEach(function(v,i){console.log(i,v)})
VM4296:1 0 2
VM4296:1 1 3
VM4296:1 2 9
VM4296:1 3 11

for (var i=0;i<arr.length;i++){console.log(arr[i])}
VM4497:1 2
VM4497:1 3
VM4497:1 9
VM4497:1 11
undefined
for (var i=0;i<arr.length;i++){console.log(i,arr[i])}
VM4520:1 0 2
VM4520:1 1 3
VM4520:1 2 9
VM4520:1 3 11

arr.map(function(v,i){console.log(i,v)})
VM4571:1 0 2
VM4571:1 1 3
VM4571:1 2 9
VM4571:1 3 11
(4) [undefined, undefined, undefined, undefined]
arr.forEach(function(v,i){console.log(i,v)})
VM4586:1 0 2
VM4586:1 1 3
VM4586:1 2 9
VM4586:1 3 11
undefined

var res=arr.map(function(v,i){console.log(i,v);return 111})
VM4628:1 0 2
VM4628:1 1 3
VM4628:1 2 9
VM4628:1 3 11
undefined

res
(4) [111, 111, 111, 111]

var names = ["lxx","hxx","yxx"]
undefined
var res=names.map(function(v){return v+"sb"})
undefined
res
(3) ["lxxsb", "hxxsb", "yxxsb"]


var names = ["lxx","hxx","yxx"]
undefined
var res=names.map(function(v){return v+"sb"})
undefined
res
(3) ["lxxsb", "hxxsb", "yxxsb"]
names.splice(1,1)
["hxx"]
names
(2) ["lxx", "yxx"]
names.splice(0,2)
(2) ["lxx", "yxx"]
names
[]
var names = [111,222,333,444,555,666]
undefined
names.splice(2,2,"xxxx")
(2) [333, 444]
names
(5) [111, 222, "xxxx", 555, 666]

var d1 = new Date()
undefined
d1
Fri Sep 17 2021 23:17:01 GMT+0800 (中国标准时间)
var d2 = new Date("2022/03/01 11:32:45")
undefined
d2
Tue Mar 01 2022 11:32:45 GMT+0800 (中国标准时间)
var d2 = new Date(8000)
undefined
d2
Thu Jan 01 1970 08:00:08 GMT+0800 (中国标准时间)
var d2 = new Date (2022,11,11,12,20,35)
undefined
d2
Sun Dec 11 2022 12:20:35 GMT+0800 (中国标准时间)
d1
Fri Sep 17 2021 23:17:01 GMT+0800 (中国标准时间)
d1.toLocaleDateString()
"2021/9/17"
d1.toLocaleString()
"2021/9/17 下午11:17:01"
d1.toUTCString()
"Fri, 17 Sep 2021 15:17:01 GMT"
d1.getDate()
17
d1.getMonth()
8
d1.getFullYear()
2021
d1.getHours()
23

Math.floor(5.9)
5
Math.floor(5.2)
5
Math.ceil(5.2)
6
Math.ceil(5.9)
6
Math.max(5.9,3,6)
6
Math.random()
0.612389932970915
3+Math.random()*4
4.1287332150142655
3+Math.random()*4
3.2531260341339117
3+Math.random()*4
3.8269497992191477
3+Math.random()*4
4.148875917022164
3+Math.random()*4
3.403875538516968

网页布局:标准流 浮动流 定位流

1.js语法

2.BOM操作

3.DOM操作

var dic = {"name":"egon","age":18}
undefined
typeof dic
"object"
dic["name"]
"egon"
JSON.stringify(dic)
"{\"name\":\"egon\",\"age\":18}"

var dic = {"name":"egon","age":18,"tag":true}
undefined
JSON.stringify(dic)
"{\"name\":\"egon\",\"age\":18,\"tag\":true}"
var jsonStr=JSON.stringify(dic)
undefined
typeof jsonStr
"string"

JSON.parse(jsonStr)["name"]
"egon"

var reg1=new RegExp("^[a-zA-Z]{3}$")
undefined
var reg2=/^[a-zA-Z]{3}$/
undefined
reg1.test("hello")
false
reg1.test("hel")
true
reg2.test("abc")
true

var msg="hello"
undefined
msg.match(/l/)
["l", index: 2, input: "hello", groups: undefined]
msg.match(/l/g)
(2) ["l", "l"]
msg.search(/l/g)
2

msg.split(/el/)
(2) ["h", "lo"]
msg.replace(/l/,"x")
"hexlo"
msg.replace(/l/g,"x")
"hexxo"

i 忽略大小写
g 全局匹配
var reg3=/egon/g
undefined
reg3.lastIndex
0
reg3.test("egon")
true
reg3.lastIndex
4
reg3.test("egon")
false
reg3.lastIndex
4
reg3.test("egon")
false
reg3.lastIndex
0
reg3.test("egon")
true
reg3.test("egon")
false
reg3.lastIndex=0
0
reg3.test("egon")
true
var reg4=/^undefined$/
undefined
reg4.test()
true
reg4.test("undefined")
true
reg4.test(undefined)
true

10%3
1
var x=1
undefined
var res=x++
undefined
res
1
x
2
var res=++x
undefined
res
3
x
3

1 == 1
true
1 == "1"
true
1 === "1"
false
10 > 3 && 3>2
true
10 < 3 || 3>2
true
10 < 3 || ! 3>2
false

1 === "1"
false
! 1 === "1"
false
! (1==="1")
true

for(var i=0;i<=3;i++){console.log(i)}
VM2419:1 0
VM2419:1 1
VM2419:1 2
VM2419:1 3

var i=0
undefined
while (i<=3){
    console.log(i);
    i+=1;
}
VM2545:2 0
VM2545:2 1
VM2545:2 2
VM2545:2 3
4

var res=条件?res1:res2

window.history.back()
undefined
window.history.forward()
undefined

js中函数的声明比变量的优先级高

let pEle = document.getElementsByTagName('p')[0]
undefined
pEle
<p>111</p>
pEle.style.color = 'red'
"red"



$('p').css('color','green')
S.fn.init [p, prevObject: S.fn.init(1)]
$('p').css('color','red')
S.fn.init [p, prevObject: S.fn.init(1)]

jQuery

jQuery对象相当于一个数组里面是一个个源生js对象

$($('#d1')[0])

jQuery简介

jQuery选择器

表单选择器

筛选器方法

操作标签各项数据

事件

绑定事件

$('#d1').on('input',function(){
	console.log($(this).val())
})

动画效果

前端框架Bootstrap(复制粘贴)

$('#d2').next()
S.fn.init [p, prevObject: S.fn.init(1)]0: plength: 1prevObject: S.fn.init [span#d2][[Prototype]]: Object(0)
$('#d2').nextAll()
S.fn.init(2) [p, span.c1, prevObject: S.fn.init(1)]
$('#d2').nextUntil('.c1')
S.fn.init [p, prevObject: S.fn.init(1)]

$('#d1').prev()
S.fn.init [span, prevObject: S.fn.init(1)]0: spanlength: 1prevObject: S.fn.init [div#d1][[Prototype]]: Object(0)
$('#d1').prevAll()
S.fn.init(2) [span, span, prevObject: S.fn.init(1)]
$('#d1').prevUntil('span')
S.fn.init [prevObject: S.fn.init(1)]

$('.c1').parent()
S.fn.init [div#d1, prevObject: S.fn.init(1)]
$('.c1').parent().parent()
S.fn.init [body, prevObject: S.fn.init(1)]
$('.c1').parent().parent().parent()
S.fn.init [html, prevObject: S.fn.init(1)]
$('.c1').parent().parent().parent().parent()
S.fn.init [document, prevObject: S.fn.init(1)]
$('.c1').parents()
S.fn.init(3) [div#d1, body, html, prevObject: S.fn.init(1)]
              

$('#d1').children()
S.fn.init(3) [span#d2, p, span.c1, prevObject: S.fn.init(1)]

$($('#d1').children()[1]).children()
S.fn.init [span, prevObject: S.fn.init(1)]

$('#d1').siblings()
S.fn.init(4) [span, span, span, span, prevObject: S.fn.init(1)]

$('#d1').find('p')
S.fn.init [p, prevObject: S.fn.init(1)]0: plength: 1prevObject: S.fn.init [div#d1][[Prototype]]: Object(0)
$('#d1 p')
S.fn.init [p, prevObject: S.fn.init(1)]

# 拿到用户上传的文件
$('#d1')[0].files[0]
document。getElementById('d1').files[0]

我们使用框架操作标签样式,只需要修改class属性即可

布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意,由于 padding 等属性的原因,这两种 容器类不能互相嵌套。

.container 类用于固定宽度并支持响应式布局的容器。

.container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。

栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。它包含了易于使用的预定义类,还有强大的mixin 用于生成更具语义的布局。

<!--左右两边留白-->
<div class="container">
    <div class="row">
        <div class="col-md-6 c1"></div>
        <div class="col-md-6 c1"></div>
    </div>

</div>
<!--左右两边不留白-->
<!--<div class="container-fluid c1">-->

<!--</div>-->

知识点越往后学越简单 学的是思路 怎么用

上一篇:6.S081-2021-Lab4 Traps学习笔记
下一篇:没有了
网友评论