SI 539 网站开发(二)
Week 6: Flexbox
CSS Flexbox详解
Flexbox布局(Flexible Box)模块旨在提供一个更加有效的方式制定、调整和分布一个容器里的项目布局,即使他们的大小是未知或者是动态的。简单的理解,就是可以自动调整,计算元素在容器空间中的大小,并进行有效合理的布局。
如何使用?
对Flex container设置flex
或者inline-flex
html
<div class="container">
<div class="wrap">
<div></div>
<div></div>
<div></div>
</div>
</div>
css
.container {
width: 70%;
height: 500px;
margin:20px auto;
border: 1px solid black;
}
.container .wrap {
/* 设置display:flex 来使用flex*/
display: flex;
border: 3px solid #a448cf;
margin:20px;
width:80%;
height:80%
}
.container .wrap div {
width:150px;
height:150px;
background-color: #c75a5a;
margin:10px;
}
Flex Container
flex-direction
Property
决定flex container中flex items的排序顺序,row(横向)排序 or column(纵向)排序
flex-direction: column; 从上到下
flex-direction: column-reverse; 从下到上
flex-direction: row; 从左到右
flex-direction: row-reverse; 从右到左
flex-wrap
Property
flex-wrap属性控制Flex items是否换行。默认情况下,Flex容器会在一行内容纳所有的Flex项目,因为flex-wrap属性的默认值是nowrap,也就是不换行。
flex-flow
Property
flex-flow是flex-direction
和flex-wrap
两个属性的速记属性。
justify-content
Property
控制flex-item在整个Main-Axis(横向)对齐方式
作用于整个container
.flex-container {
display: flex;
justify-content: center;
background-color: DodgerBlue;
}
space-between让flex项目两端对齐。
space-around让每个flex项目具有相同的空间
align-items
Property
align-items控制Flex项目在Cross-Axis(纵向)对齐方式。
align-items的默认值是stretch,让所有的Flex项目高度和Flex容器高度一样,铺展开。
.flex-container {
display: flex;
height: 200px;
align-items: center;
background-color: DodgerBlue;
}
其中stretch和baseline在不设置具体高度值,才会如上表现,否则会显示固定的高度。
align-content
Property
The align-content Property
控制每一个flex-item的每一行之间的space
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-between; 各行之间space相同
align-content: space-around; 各行四周的sapce相同
align-content: stretch; 拉伸items来填充所有space(default)
align-content: center; items放在container中间
align-content: flex-start; 放在container开始(上)
align-content: flex-end; 放在container结束(下)
background-color: DodgerBlue;
}
如何将item放在container正中心(横纵均为中间)?
.flex-container {
display: flex;
height: 300px;
justify-content: center;
align-items: center;
}
Flex Items
The direct child elements of a flex container automatically becomes flexible (flex) items.
order
定义items在layout中的排列顺序
<div class="flex-container">
<div style="order: 3">1</div>
<div style="order: 2">2</div>
<div style="order: 4">3</div>
<div style="order: 1">4</div>
</div>
flex-grow
定义一个item最多能延长多少(会变大的更快)
<div class="flex-container">
<div style="flex-grow: 1">1</div>
<div style="flex-grow: 3">2</div>
<div style="flex-grow: 8">3</div>
</div>
flex-shrink
定义item可以被压缩多少
不被压缩
<div style="flex-shrink: 0">3</div>
flex-basis
设置item的main-axis方向的初始长度(会缩小的更慢)
<div style="flex-basis: 200px">3</div>
flex
flex: flex-grow, flex-shrink, flex-basis
align-self
设置cross-axis方向的对齐方式
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="align-self: center">3</div>
<div>4</div>
</div>
Week 7: Transforms, Transitions and prefers Reduced-Motion
Transition
允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。
div {
width: 100px;
height: 100px;
background: red;
在div的width属性添加transition效果,持续时间2s
transition: width 2s;
}
div:hover {
width: 300px;
}
- transition-timing-function
定义transition效果
#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}
- transition-delay
是用来指定一个动画开始执行的时间,也就是说当改变元素属性值后多长时间开始执行transition效果,其取值time为数值,单位为s(秒)或者ms(毫秒), 默认大小是"0",也就是变换立即执行,没有延迟。
div {
width: 100px;
height: 100px;
background: red;
transition: width 3s;
鼠标放在div上一秒后开始transition
transition-delay: 1s;
}
div:hover {
width: 300px;
}
- transition-property
div {
transition-property: width; 指定一个属性有过渡效果
transition-property: none; 没有属性有过渡效果
transition-property: all; 所有属性有过渡效果
}
- transition-duration
指定元素 转换过程的持续时间,取值time为数值,单位为s(秒)或者ms(毫秒),其默认值是0,也就是变换时是即时的。
Transform
对元素进行变形操作,旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。
div {
transform: translate(50px, 100px); 变形要用的函数
}
Animation
不同于transition只能定义首尾两个状态,animation可以定义任意多的关键帧,因而能实现更复杂的动画效果。
div {
width: 100px;
height: 100px;
background-color: red;
将keyframe和element绑定
animation-name: example;
animation-duration: 4s;
}
@keyframe中定义第一帧和最后一帧的style,命名为“example”
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
</style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 4s;
}
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
animation-iteration-count
定义动画重复多少次
div {
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
animation-iteration-count: infinite; 一直重复
}
animation-direction
定义动画播放的方向
- normal - The animation is played as normal (forwards). This is default
- reverse - The animation is played in reverse direction (backwards)
- alternate - The animation is played forwards first, then backwards
- alternate-reverse - The animation is played backwards first, then forwards
animation-fill-mode
定义动画结束时保持的状态
- none:默认值,回到动画没开始时的状态。
- forwards:当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)。
- backwards:在 animation-delay所指定的一段时间内,在动画显示之前,应用开始属性值(在第一个关键帧中定义)。
- both: 根据animation-direction轮流应用forwards和backwards规则。
Prefers Reduced Motion
引入一个新的media query:Reduced Motion Query 来减少动作
.animation {
animation: vibrate 0.3s linear infinite both;
}
当reduced-motion开启后,animation减弱运动
@media screen (prefers-reduced-motion: reduce) {
.animation {
animation: none;
}
当没有做pirefer时,执行操作
@media screen and (prefers-reduced-motion) { }
}
Week 9: Forms
HTML Form
HTML Form
收集用户数据,将数据发送给server进行处理
<form>
element
为用户输入创建HTML表单
<form>
element is a container for different types of input elements, such as: text fields, checkboxes, radio buttons, submit buttons, etc.
<form action="demo-form.php">
First name: <input type="text" name="FirstName" value="Mickey"><br>
Last name: <input type="text" name="LastName" value="Mouse"><br>
<input type="submit" value="提交">
</form>
在这门课,用formspree 来处理表单信息,不用php
Form Attributes
-
action
点击"提交"按钮,表单数据将被发送到服务器上的“demo-form.php”。submit执行什么操作由action
属性定义。 -
target
提交表单后如何展示响应
<form action="/action_page.php" target="_blank">
-
method
定义在提交表单时的HTTP方法
The form-data can be sent as URL variables (with method=“get”) or as HTTP post transaction (with method=“post”). The default HTTP method when submitting form data is GET.
GET:- 在URL后面追加刚刚提交的表单信息 (https://www.w3schools.com/action_page.php?fname=John&lname=Doe),会暴露信息
- 长度上限2048characters
- 可被bookmark
POST:
- 表单信息放在HTTP请求内部,url不显示表单信息(https://www.w3schools.com/action_page.php)
- 没有长度限制
- 不可被bookma
-
autocomplete
是否打开自动填写,会自动填写之前填过的信息。
<form action="/action_page.php" autocomplete="on">
novalidate
当这个attribute出现时,当前表单不会进行输入合法性检查
<form action="/action_page.php" novalidate>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit">
</form>
Form Elements
<input>
Input Types
name
每一个input
都必须有一个name
属性,如果没有name
属性,那么submit时将不会提交!value
定义input field的初始值
<input type="text" id="fname" name="fname" value="John"><br>
readonly
该input field为只读,不可修改
<input type="text" id="fname" name="fname" value="John" readonly><br>
disable
将当前input field不可用size
明确input field的大小。默认为20
<input type="text" id="fname" name="fname" size="50"><br>
Input form* Attributes
用来将<form>
外的<input>
和form绑定
<form action="/action_page.php" id="form1">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="submit" value="Submit">
</form>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname" form="form1">
<label>
label的for属性名字(fname)和input的id属性名字相同,则两者绑定在一起。点击lable就会触发这个控件,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
注意!!! 每一个input都应当绑定一个label!
<form>
<!-- <label> 标签的 for 属性应当与相关元素的 id 属性相同。-->
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
<input type="radio" id="other" name="gender" value="other">
<label for="other">Other</label>
</form>
<select>
The element defines a drop-down list:
<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="3" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi" selected>Audi</option>
</select>
<option>
来定义所有可选项
selected
来定义当前option为默认被选择的值
size
=“3” 来定义一次有几个option被显示
multiple
来表示可以有多个值被选择
<textarea>
定义一个多行的文本输入框
<form action="/action_page.php">
<textarea name="message" rows="10" cols="30">这是文本框默认初始显示的文字</textarea>
<br><br>
<input type="submit">
</form>
<button>
定义一个可以点击互动的button
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
onclik
: 点击以后弹窗显示“Hello World!”
<fieldset>
and<legend>
<fieldset>
可以将多个element整合到一个form
<legend>
为这个整合的fieldset命名
<form action="/action_page.php">
<fieldset>
<legend>Personalia:</legend>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
<datalist>
为文本输入提供一些了写好的下拉菜单供选择。
The list attribute of the<input>
element, must refer to the id attribute of the<datalist>
element.
<form action="/action_page.php">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
<output>
在当前网页实时展示表单结果
<form action="/action_page.php"
oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0
<input type="range" id="a" name="a" value="50">
100 +
<input type="number" id="b" name="b" value="50">
=
<output name="x" for="a b"></output>
<br><br>
<input type="submit">
</form>
CSS Form
/*只选中input的text部分*/
input[type=text] {
/*加边界*/
border: 2px solid red;
/*只加一个下边界*/
border-bottom: 2px solid red;
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
当被focus时
文本框背景变色
input[type=text]:focus {
background-color: lightblue;
}
文本框边框变色
input[type=text]:focus {
border: 3px solid #555;
}
Week 10 & Week 11: JavaScript
In HTML, JavaScript code is inserted between<script>
and</script>
tags.
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
如何定义
-
JavaScript可以直接被定义带HTML的
<head>
和<body>
中
Scripts can be placed in the<body>
, or in the<head>
section of an HTML page, or in both. -
外部引用JavaScript
External file: myScript.js
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
HTML中(head和body中)
<script src="myScript.js"></script>
用JS来展示数据
- Writing into an HTML element, using
innerHTML
document.getElementById(id)
- Writing into the HTML output using
document.write()
- Writing into an alert box, using
window.alert()
使用弹窗显示信息 - Writing into the browser console, using
console.log()
- 打印页面
window.print()
怎么写JS
not a type specific language
var x, y, z; // Declare Variables
x = 5; y = 6; // Assign Values
z = x + y; // Compute Values
var
has global scope
let
has block scope
JavaScript identifiers (names) must begin with:
- A letter (A-Z or a-z)
- A dollar sign ($) (don’t use for variable)
- Or an underscore (_)
txt1 = "What a very ";
txt1 += "nice day";
document.getElementById("demo").innerHTML = txt1;
demo元素展示“What a very nice day”
innerHTML
返回或者设定所在element的内容和
HTML DOM
DOM (Document Object Model) 译为文档对象模型,是 HTML 和 XML 文档的编程接口。
HTML DOM 定义了访问和操作 HTML 文档的标准方法。
DOM 以树结构表达 HTML 文档。
querySelector() Method
Get the first element in the document with class=“example”:
function myFunction() {
document.querySelector(".example").style.backgroundColor = "red";
}
Change the text of an element with id=“demo”:
function myFunction() {
document.querySelector("#demo").innerHTML = "Hello World!";
}
Get the first <p>
element in the document with class=“example”:
function myFunction() {
document.querySelector("p.example").style.backgroundColor = "red";
}
Get the first<p>
element in the document where the parent is a<div>
element.
function myFunction() {
var x = document.querySelector("div > p");
x.style.backgroundColor = "red";
Get the first<a>
element in the document that has a “target” attribute:
function myFunction() {
document.querySelector("a[target]").style.border = "10px solid red";
}
querySelectorAll() Method
Get all elements in the document with class=“example”:
function myFunction() {
var x, i;
x = document.querySelectorAll(".example");
for (i = 0; i < x.length; i++) {
x[i].style.backgroundColor = "red";
}
}
EventListener
Add an Event Handler to an Element
document.querySelector("#pause").addEventListener("click", function() {
console.log("Pause Video");
video.pause();
});
Refer to an external “named” function:
document.getElementById("myBtn").addEventListener("click", displayDate);
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
Add an Event Handler to the window Object
window.addEventListener("load", function() {
video = document.querySelector("#myVideo");
});
Event Bubbling or Event Capturing?
the default value is false
false: bubbling
从内向外处理
document.getElementById("myP").addEventListener("click", myFunction, false);
true: capture
从外向内处理
document.getElementById("myDiv").addEventListener("click", myFunction, true);
Week 13: APIs and JSON
API
Application Programming Interface
- Web API is an application programming interface for the Web.
- Browser API can extend the functionality of a web browser. 浏览器内置的函数,提供额外的功能
- Server API can extend the functionality of a web server.
API call的结果就是JSON
JSON
JavaScript Object Notation
JSON is a syntax for storing and exchanging data.
JSON is text, written with JavaScript object notation.
浏览器和服务器之间只能依靠text来交换信息。
JSON是text,而且任何JS object都可以被转换成JSON,然后发送JSON给server;可以把从server接收到的JSON转换成JS object
Sending Data
将储存在Javascript object中的数据转换成JSON,并发送给server
JSON.stringify()
var myObj = { name: "John", age: 31, city: "New York" };
var myJSON = JSON.stringify(myObj); // convert JS object(any type) to string as JSON
window.location = "demo_json.php?x=" + myJSON;
Receiving Data
接收到JSON,并转化为Javascript object
JSON.parse()
var myJSON = '{"name":"John", "age":31, "city":"New York"}';
var myObj = JSON.parse(myJSON);
document.getElementById("demo").innerHTML = myObj.name;
JSON Syntax
SON data is written as name/value pairs.
{ "name":"John" }
一个{} 一个object
- In JSON, keys must be strings, written with double quotes;
In JavaScript, keys can be strings, numbers, or identifier names - In JSON, string values must be written with double quotes " ";
In JavaScript, you can write string values with double or single quotes ’ ’
JavaScript Object
create an object
var person = { name: "John", age: 31, city: "New York" };
access a JavaScript object
// returns John
person.name;
person["name"];