Frontend 入门笔记

时间:2022-09-24 16:16:40 作者:快盘下载人气:

上一次学习 web 开发还是在上一次。

经过了三天的前端学习后，我终于准备开始学习 FullStack 了。

仔细想了想，还是不要待在 comfort zone 里，干脆直接学 js 全栈，也可以提高 js 的熟练度。

Day0

衔接上一次的 Day3.

小学数学训练的项目暂且搁置了，等我神功小成再回来重构吧……

这几天可能学习一下 vue 和 tailwind css(或者 bootstrap?)

Intermedaite HTML and CSS

Position

relative，相对于原本位置的 position。通过定义 left/right/top/bottom 来确定相对位置。注意这里定义的是偏移量，即相对于其原本应在的位置的偏移。 absolute，绝对位置，相对于 parent 的 position，通过定义 left/right/top/bottom 来确定其位置。 note: 这里的 parent 是祖先中第一个 position 为 relative 或 absolute 的，因此使用时一般设置 parent container 的 position 为 relative. fixed，固定于屏幕上某个位置，不会随着翻页而改变。 sticky，经常在导航栏上使用的东西。

一个基础的 Form:

<form action="http://httpbin.org/post" method="post">
  <div>
    <label for="first_name">First Name:</label>
    <input type="text" name="first_name" id="first_name">
  </div>

  <div>
    <label for="last_name">Last Name:</label>
    <input type="text" name="last_name" id="last_name">
  </div>

  <div>
    <label for="age">Age:</label>
    <input type="number" name="age" id="age">
  </div>

  <button type="submit">Submit</button>
</form>

name 是传参的名字，id 跟其他 html element 中是一个意义的。

<textarea></textarea>

<textarea rows="20" cols="60"></textarea>

textarea 是可缩放的多行编辑框，用 rows 和 cols 来定义初始大小。

<select name="Car">
  <option value="mercedes">Mercedes</option>
  <option value="tesla">Tesla</option>
  <option value="volvo">Volvo</option>
  <option value="bmw">BMW</option>
  <option value="mini">Mini</option>
  <option value="ford">Ford</option>
</select>

select 是下拉选项，value 是传参时的值。

<option value="volvo" selected>Volvo</option>

可以设置默认选项。

可以分组。

<select name="fashion">
  <optgroup label="Clothing">
    <option value="t_shirt">T-Shirts</option>
    <option value="sweater">Sweaters</option>
    <option value="coats">Coats</option>
  </optgroup>
  <optgroup label="Foot Wear">
    <option value="sneakers">Sneakers</option>
    <option value="boots">Boots</option>
    <option value="sandals">Sandals</option>
  </optgroup>
</select>

Radio Button 是列表单选项，通过 name 来判定为同一组。同组中只能选一个。

<h1>Ticket Type</h1>
<div>
  <input type="radio" id="child" name="ticket_type" value="child">
  <label for="child">Child</label>
</div>

<div>
  <input type="radio" id="adult" name="ticket_type" value="adult">
  <label for="adult">Adult</label>
</div>

<div>
  <input type="radio" id="senior" name="ticket_type" value="senior">
  <label for="senior">Senior</label>
</div>

用 checked 来默认选中。

<input type="radio" id="adult" name="ticket_type" value="adult" checked>

Checkbox，多选。

<div>
  <input type="checkbox" id="sausage" name="topping" value="sausage">
  <label for="sausage">Sausage</label>
</div>

<div>
  <input type="checkbox" id="onions" name="topping" value="onions">
  <label for="onions">Onions</label>
</div>

<div>
  <input type="checkbox" id="pepperoni" name="topping" value="pepperoni">
  <label for="pepperoni">Pepperoni</label>
</div>

<div>
  <input type="checkbox" id="mushrooms" name="topping" value="mushrooms">
  <label for="mushrooms">Mushrooms</label>
</div>

Button 就更常用了。可以在 form 中定义 submit 类型的 button，一键提交。还有 reset，回归默认。如果想要朴素的 button，那得手动设定 type.

form 中 button 的 type 默认是 submit，这个需要注意。

1 2 3	<button type="submit">Submit</button> <button type="reset">Reset</button> <button type="button">Click to Toggle</button>

fieldset 可以给 field 分组。

1 2 3 4 5 6 7	<fieldset> <label for="first_name">First Name</label> <input type="text" id="first_name" name="first_name"> <label for="last_name">Last Name</label> <input type="text" id="last_name" name="last_name"> </fieldset>

在 fieldset 后面添加 legend 可以加一个小标题。

1 2 3	<fieldset> <legend>Contact Details</legend> ...

给 form control 添加 required attribute，表示必填。

1 2 3 4	<div> <label for="user_email">*Email:</label> <input type="email" id="user_email" name="user_email" required> </div>

可以给 input 设置 minlength maxlength，给 type 为 number 的 input 设置 min/max 上下界，可以设置 pattern attribute 检验输入是否符合某个正则串。

过了 validation 的 control 会有一个 valid state，没过的对应 invalid.

1 2 3 4 5 6 7	input:invalid { border-color: red; } input:valid { border-color: green; }

在前端检验完了，后端也依然要继续检验数据合法性，不然被抓包塞脏数据就不好了(

Project: Sign Up Form

Frontend 入门笔记

乍一看，还挺好看的……这一节的 Assignment 就是仿制一个这东西。

横向划分为两个部分，右侧划分为三个部分。

那个鬼畜的 ODIN logo 用 position 解决。

字体懒得设置了，看起来差不太多就行。

总感觉有点不对劲、、、

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sign Up</title> <style> body { display: flex; height: 100vh; margin: 0; padding: 0; } div#left { position: relative; height: 100%; width: 35vw; background-color: black; background-image: url("https://images.unsplash.com/photo-1585202900225-6d3ac20a6962?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80"); background-size: cover; background-position: center; } div#logo { position: absolute; top: 22%; background-color: rgba(0, 0, 0, 0.6); height: 15%; width: 100%; display: flex; justify-content: center; align-items: center; } div#logo div { font-family: 'Times New Roman', Times, serif; opacity: 80%; font-size: 15vh; color: aliceblue; } div#right { flex: 1 1 auto; background-color: WhiteSmoke; display: flex; flex-direction: column; justify-content: center; } div#right>#one { display: flex; align-items: flex-end; height: 25vh; position: relative; } div#right>#one>#intro { position: absolute; left: 2vw; bottom: 3vh; font-size: 1.2vw; font-weight: 500; width: 80%; } div#right>#two { height: 40vh; background-color: white; border: 1px solid antiquewhite; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; padding: 2vh 2vw; } .main { width: 50vw; display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto auto auto; column-gap: 2vw; } h2 { font-size: 2vw; } label { font-size: 1.2vw; color: rgb(50,50,50); } input { height: 2.5vh; border: 1px solid rgb(240,240,240); box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 2px, rgba(0, 0, 0, 0.23) 0px 1px 2px; font-size: 1vw; } input:focus{ outline: 3px dashed skyblue; box-shadow: none; } .field { display: flex; flex-direction: column; width: 16vw; height: 8vh; } div#right>#three { height: 25vh; padding: 3vh 2vw; } button { width: 14vw; height: 6vh; background-color:darkolivegreen; box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px; border: 0; border-radius: 0.5vw; color:ivory; font-size: 1.5vw; } div#right>#three>p { font-size: 1.1vw; margin-top: 3vh; } div#right>#three>p>a { color:darkolivegreen; font-weight:700; } </style> </head> <body> <div id="left"> <div id="logo"> <div>ODIN</div> </div> </div> <div id="right"> <div id="one"> <div id="intro"> <p>This is not a real online service! You know you need something like this in your life to help you realize your deepest dreams. <br> Sign up <em> now </em> to get started.</p> <p>You <em> know </em>you want to.</p> </div> </div> <div id="two"> <h2>Let's do this!</h2> <form class="main" id="myForm"> <div class="field"> <label for="firstName">FIRST NAME</label> <input type="text" name="firstName" required></input> </div> <div class="field"> <label for="lastName">LAST NAME</label> <input type="text" name="lastName" required></input> </div> <div class="field"> <label for="email">EMAIL</label> <input type="email" name="email" required></input> </div> <div class="field"> <label for="phone">PHONE NUMBER</label> <input type="number" name="phoneNumber" required></input> </div> <div class="field"> <label for="password">PASSWORD</label> <input type="password" name="password" required></input> </div> <div class="field"> <label for="password">CONFIRM PASSWORD</label> <input type="password" name="password" required></input> </div> </form> </div> <div id="three"> <button form="myForm" type="submit">Create Account</button> <p>Already have an account? <a>Log in</a></p> </div> </div> </body> </html>

还有一个 Grid 相关的 project，既然我已经做过了 numpad，那就不做这个了……

Intermediate HTML and CSS 这个 Course 就到此结束了。

Javascript

在 js 中，property 可以用两种方式访问：

1 2	obj.property obj["property"]

后者的好处是可以处理带空格的 property name(不会真的有人起这样的名字吧、、)

object constructor 可以这么写：

1 2 3 4 5 6 7 8 9 10 11 12	function Player(name, marker) { this.name = name this.marker = marker this.sayName = function() { console.log(name) } } const player1 = new Player('steve', 'X') const player2 = new Player('also steve', 'O') player1.sayName() // logs 'steve' player2.sayName() // logs 'also steve'

后面又引入了一个 prototype 的概念。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17	function Student() { } Student.prototype.sayName = function() { console.log(this.name) } function EighthGrader(name) { this.name = name this.grade = 8 } EighthGrader.prototype = Object.create(Student.prototype) const carl = new EighthGrader("carl") carl.sayName() // console.logs "carl" carl.grade // 8

应该说所有的 instance 会共用一个 prototype. 那么在 prototype 上挂载函数，就可以避免每次 new instance 的时候现场创建，降低一些开销。此外，还可以在 prototype 上挂些变量，读的时候会读到 prototype 上，但写了之后就在当前 obj 上声明了新变量，从而覆写 prototype 上的变量。

在寻找 property 时，obj 与其 prototype 及其各路祖先构成了一条 prototype chain，从这个链一路向上查找对应的 property. 跟继承有些类似。

似乎有建议说尽量写 factory function 而不要用 constructor 生成 obj.

1 2 3 4 5 6 7 8 9 10	const personFactory = (name, age) => { const sayHello = () => console.log('hello!'); return { name, age, sayHello }; }; const jeff = personFactory('jeff', 27); console.log(jeff.name); // 'jeff' jeff.sayHello(); // calls the function and logs 'hello!'

在 factory function 中可以写出类似继承的效果。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

也可以靠 prototype 直接继承。

1 2 3 4 5	const Nerd = (name) => { const prototype = Person(name); const doSomethingNerdy = () => console.log('nerd stuff'); return Object.assign({}, prototype, {doSomethingNerdy}); }

getter 和 setter:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18	let user = { name: "John", surname: "Smith", get fullName() { return `${this.name} ${this.surname}`; }, set fullName(value) { [this.name, this.surname] = value.split(" "); } }; // set fullName is executed with the given value. user.fullName = "Alice Cooper"; alert(user.name); // Alice alert(user.surname); // Cooper

也可以用 defineProperty 来定义 accesssor.

1 2 3 4 5 6 7 8 9	Object.defineProperty(user, 'fullName', { get() { return `${this.name} ${this.surname}`; }, set(value) { [this.name, this.surname] = value.split(" "); } });

有的时候，class method 会出现 losing this 的情况。这往往是在将 method 作为 function 传参后出现的问题。

1 2 3 4 5 6 7 8 9 10 11 12 13	class Button { constructor(value) { this.value = value; } click() { alert(this.value); } } let button = new Button("hello"); setTimeout(button.click, 1000); // undefined

解决方案是套一层皮。

1	setTimeout(() => button.click(), 1000)

可以直接 bind function

1 2 3 4 5 6 7 8 9 10	let user = { firstName: "John" }; function func() { alert(this.firstName); } let funcUser = func.bind(user); funcUser(); // John

还有一个 class specific 的优雅方法，在 new obj 的时候新建一个 closure.

1 2 3 4 5 6 7 8	class Button { constructor(value) { this.value = value; } click = () => { alert(this.value); } }

1 2 3 4 5 6 7 8 9	class User { ['say' + 'Hi']() { alert("Hello"); } } new User().sayHi();

用 extends 来继承，只能拥有唯一的 parent.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22	class Animal { constructor(name) { this.name = name; } speak() { console.log(`${this.name} makes a noise.`); } } class Dog extends Animal { constructor(name) { super(name); // call the super class constructor and pass in the name parameter } speak() { console.log(`${this.name} barks.`); } } const d = new Dog('Mitzie'); d.speak(); // Mitzie barks.

可以用一些奇技淫巧来实现类似于继承多个 interface 的功能。

1 2 3 4 5 6 7 8 9	const calculatorMixin = (Base) => class extends Base { calc() { } }; const randomizerMixin = (Base) => class extends Base { randomize() { } }; class Foo { } class Bar extends calculatorMixin(randomizerMixin(Foo)) { }

Day1

Async

异步。js 和 backend 的交互需要用到。

一个比较传统的异步写法是利用 callback，比如执行完 IO 操作后执行传入的函数来传递结果。

1 2 3 4 5 6 7 8 9 10	function myDisplayer(some) { document.getElementById("demo").innerHTML = some; } function myCalculator(num1, num2, myCallback) { let sum = num1 + num2; myCallback(sum); } myCalculator(5, 5, myDisplayer);

setTimeout 可以在超时时执行对应的 callback，setInterval 可以定期执行。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16	setTimeout(myFunction, 3000); function myFunction() { document.getElementById("demo").innerHTML = "I love You !!"; } setInterval(myFunction, 1000); function myFunction() { let d = new Date(); document.getElementById("demo").innerHTML= d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds(); }

举一个 irl 的例子，File IO:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18	function myDisplayer(some) { document.getElementById("demo").innerHTML = some; } function getFile(myCallback) { let req = new XMLHttpRequest(); req.open('GET', "mycar.html"); req.onload = function() { if (req.status == 200) { myCallback(this.responseText); } else { myCallback("Error: " + req.status); } } req.send(); } getFile(myDisplayer);

这里利用了 eventListener，设置 onload event 的 callback.

API

接下来就学习调用 Web API 了。

当今时代，应当使用 fetch.

1 2 3 4 5 6 7 8	// URL (required), options (optional) fetch('https://url.com/some/url') .then(function(response) { // Successful response :) }) .catch(function(err) { // Error :( });

默认情况下，浏览器不允许本站对其他站的 http 请求。设置 Cross Origin Resource Sharing (CORS) 的模式就可以解决这个问题。

1 2 3	fetch('url.url.com/api', { mode: 'cors' });

Project Weather APP

调用 API 写一个天气预报的页面。

刚刚突然下雨把晒的被子淋湿了，有点应景、、、

首先找一个 API，这里选用 openweathermap.

申请了一个 API key，用 get 调用 API 就可以了，感觉还比较简单。

具体的显示懒得搞了，就这样吧。。。

加载全部内容

Frontend 入门笔记

Day0

Intermedaite HTML and CSS

Project: Sign Up Form

Javascript

Day1

Async

API

Project Weather APP

Day2

Project Primary-Math-Trainer