SI 539 网站开发（二）

Week 6: Flexbox
- Flex Container
- Flex Items
Week 7: Transforms, Transitions and prefers Reduced-Motion
- Transition
- Transform
- Animation
- Prefers Reduced Motion
Week 9: Forms
- HTML Form
- - **Form Attributes**
  - **Form Elements**
- CSS Form
Week 10 & Week 11: JavaScript
- 如何定义
- 用JS来展示数据
- 怎么写JS
- HTML DOM
- - querySelector() Method
  - querySelectorAll() Method
- EventListener
Week 13: APIs and JSON
- JSON
- - Sending Data
  - Receiving Data
  - JSON Syntax

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

CSS3的动画属性

Transition

允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。

div {width: 100px;height: 100px;background: red;在div的width属性添加transition效果，持续时间2stransition: 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上一秒后开始transitiontransition-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>

example

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

JavaScript Tutorial

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"];

SI 539 网站开发（二）：week6相关推荐

flask专题-小说网站开发二（抓取数据）
上一篇准备好了数据库,现在开始填充数据库,数据来源为小说网站,爬虫库为requests库,多线程爬取,总共爬取数据5万多条.开始干吧! 框架分析 1.网站组成,手机版 3.分页组成,共页,每页50条数 ...
WAP网站开发二-WML语言基础(转)
http://bbs.lz8.net/dispbbs.asp?boardID=66&ID=4480&page=1 完成WAP服务器的建立和WAP浏览器的安装之后,我们接下来就可以使用W ...
多乐影视电影网站开发——HTML+CSS+JavaScript+PHP
多乐影视电影网站 xxlzdf-多乐影视电影网站一.系统使用展示二.系统主要结构 1.系统功能介绍 2.MySQL数据库表设计用户表user_s 评论区表comment 三.项目结构: MySQ ...
电脑分辨率自适用网页php代码,网站开发：如何让网页自适应电脑屏幕分辨率？...
网站开发:如何让网页自适应电脑屏幕分辨率? 网站开发很多人会遇到这样的问题,当你自己的电脑上精心制作好网页,却发现在他人的不同分辨率的电脑上浏览你页面时,自己的网页排版乱得一塌糊涂,或者被拉伸,或者被 ...
weui移动商城源码.zip_商城网站建设二次开发需要多久？难度大吗？
很多人在早期建设了当时较为流行的商城网站进行使用,但随着市场的变化以及消费者年龄层的变化,以往的商城形式已经不能帮助商家获得新用户了,这时就需要商家将网站进行二次开发或是重新建设网站.那今天就来看看, ...
ASP.NET MVC5 网站开发实践(二) Member区域 - 用户部分（2）用户登录、注销
上次实现了用户注册,这次来实现用户登录,用到IAuthenticationManager的SignOut.SignIn方法和基于声明的标识.最后修改用户注册代码实现注册成功后直接登录. 目录: ASP ...
电商生鲜网站开发（二）——后台开发：用户模块
电商生鲜网站开发(二)--后台开发:用户模块文章目录电商生鲜网站开发(二)--后台开发:用户模块接口设计开发任务与知识点案例:注册接口统一处理异常 Java异常体系案例:登录接口接口设 ...
第二章网站开发基础之HTML教程 - 二、常用HTML标签：frameset，框架集（块级元素）
2.frameset,框架集(块级元素) frameset标签可以在网页中嵌入框架集(框架的集合),即多个框架. iframe虽然可以在网页中嵌入单个的框架,但要在一个页面中嵌入多个框架(比如 ...
如何做好网站开发项目需求分析（转）
一个网站项目的确立是建立在各种各样的需求上面的,这种需求往往来自于客户的实际需求或者是出于公司自身发展的需要,其中客户的实际需求也就是说这种交易性质的需求占了绝大部分.面对对网站开发拥有不同知识层面 ...

SI 539 网站开发（二）：week6