Let's control our webpage!
Presentor: Flower, YoYo
Date: 2016/12/1, 2016/12/15
Link: https://goo.gl/7zntkd
大家應該都忘了吧Q
來幫大家複習個:
http://slides.com/jerryshey/javascript
該怎麼讓網頁上的東西(element)動起來呢?
1. 先選取那個element,也可以是一個group
2. 想對它做什麼事
>///<
If we write in vanilla.js
(也就是沒有使用任何套件、框架、函式庫的js)
1. select by tag (multiple)
document.getElementsByTagName("p")
3. select by id (single)
document.getElementById("super")
2. select by class (multiple)
document.getElementsByClassName("super")
QAQ
1. select by selector (single)
document.querySelector('<selector>')
2. select by selector (multiple)
document.querySelectorAll('<selector>')
We DO need a candy
jQuery
A JavaScript Library, it simplifies the mentioned queries.
Furthermore, it extends some basic function of JavaScript.
Child is added to the parent
Parent adds child
Only for tag <input>, <textarea>, and so on.
The common usage
It's easy, just call
Find children
Find parents
Find siblings
// 給個範例?
<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
Simple Notelist
<div id="main">
<div class="form">
<div class="field">
<input type="text" name="work" id="input-note" placeholder="Please enter something..."/>
<button class="btn-add">Submit</button>
</div>
</div>
<div id="note-list"></div>
</div>
<div class="item" id="list-template">
<span class="text"></span>
<span class="action">
<button class="btn-edit">edit</button>
<button class="btn-delete">delete</button>
</span>
</div>
body {
background: #ccc;
}
#main {
width: 400px;
}
#list-template {
display: none;
}
.form .field {
display: flex;
width: 100%;
}
.form .field input {
display: flex;
width: 100%;
}
.item {
position: relative;
margin-bottom: 4px;
min-height: 24px;
max-height: 24px;
}
.item .text {
position: absolute;
height: 40px;
line-height: 40px;
top: 0;
left: 0;
bottom: 0;
padding: 0 5px;
}
.item .action {
position: absolute;
top: 5px;
right: 0;
bottom: 0;
}
$(document).ready(function() {
/*
When code here start to execute, it indicates that every DOM element is ready.
That is, you can manipulate them safely.
Therefore, you should write down your code here this time and almost time.
Such as clicking-event of buttons, manipulating elements,
activating plugins and so on.
*/
});
Code inside this block will not run until every DOM(element) has ready.
文件物件模型(Document Object Model, DOM)是 HTML、XML 和 SVG 文件的程式介面。它提供了一個文件(樹)的結構化表示法,並定義讓程式可以存取並改變文件架構、風格和內容的方法。
// After clicking the form, it should submit.
function submit() {
// get the value of input
var note = $("#input-note").val();
if (note === '') {
alert("Please type something...");
return;
}
// append a new note
appendNote(note);
// clear the input
clearInput();
}
// 1. Append note
function appendNote(note) {
// The parameter "note" represents the text of new note.
console.log("new note: ", note);
// new note: '這是即將被新增的note'
// next part
}
// 1. Append note
function appendNote(note) {
// First, since we've already have a template, we can just clone it and use it without rewriting;
// however, don't forget that the attribute "id" should be unique.
var newNote = $("#note-template").clone().removeAttr("id");
// Second, find the 'text' part and modify it
newNote.find(".text").text(note);
}
// A basic function with name (具名函數)
function sayHi() {
return "Hi";
}
sayHi();
// Basic function definition
// A anonymous function (匿名函數)
var sayHi = function() {
return "Hi";
}
$("#btn").click(sayHi);
// One common use for anonymous functions is as arguments to other function.
function appendNote(note) {
var newNote = $("#note-template").clone().removeAttr("id");
newNote.find(".text").text(note);
// Third, bind the click event to both buttons.
// The keyword 'this' indicates the element which triggers the function.
newNote.find(".action .btn-edit").click(function() {
console.log("this: ", this);
modifyNote(this);
});
newNote.find(".action .btn-delete").click(function() {
deleteNote(this);
});
}
// 1. Append note
function appendNote(note) {
var newNote = $("#note-template").clone().removeAttr("id");
newNote.find(".text").text(note);
newNote.find(".action .btn-edit").click(function() {
console.log("this: ", this);
modifyNote(this);
});
newNote.find(".action .btn-delete").click(function() {
deleteNote(this);
});
// Finally, we could append the new note to the list ^_^.
newNote.appendTo("#note-list");
}
// modify a note
function modifyNote(target) {
// target is from the 'this' of click callback
// Show a popup and ask you to enter something.
var new_note_text = prompt();
// If there is text, assign it to the note text.
if (new_note_text) {
$(target).parents(".item").find(".text").text();
}
}
// delete a note
function deleteNote(target) {
$(target).parents(".item").remove();
}
// Bind the click event to addButton
$(".btn-add").click(function() {
submit();
});
// Bind the keypress event to input
$("#input-note").keypress(function(e) {
var keycode = e.which;
// 13 === enter
if (keycode == 13) {
submit();
}
})
RWD: Responsive Web Design 響應式設計
UI Framework:
AWD: Adaptive Web Design 適應式設計
套用制式的排版、網格、元件、樣式,以幫助開發者快速構築畫面
A modern web layout solution
Split page into grid blocks in rows.
Then you may deal with your layout without mess pain.
Bootstrap
Semantic
Link:note list demo (with Semantic UI)
<div class="ui stackable grid container">
<div class="ui four wide column"></div>
<div class="ui eight wide column">
<div class="ui segments">
<!-- ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ -->
<div class="ui segment form">
<div class="field">
<label for="work"></label>
<div class="ui action input">
<input type="text" name="work" id="input-note" placeholder="Please enter something..."/>
<div type="submit" class="ui teal submit button btn-submit">Submit</div>
</div>
</div>
</div>
<div class="ui segment">
<div id="note-list"></div>
</div>
<!-- ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ -->
</div>
</div>
<div class="ui four wide column"></div>
</div>
<div class="item" id="note-template">
<div class="text">123</div>
<div class="action">
<div class="ui circular blue icon button btn-edit">
<i class="write icon"></i>
</div>
<div class="ui circular red icon button btn-delete">
<i class="remove icon"></i>
</div>
</div>
</div>
html, body {
height: 100%;
}
body {
background: linear-gradient(to left, #348F50 , #56B4D3);
/* use flex to align it */
}
#note-template {
display: none;
opacity: 0;
}
#note-list .item {
/* use flex to align it */
position: relative;
margin-bottom: 4px;
height: 40px;
border: 1px dashed #ddd;
opacity: 1;
animation: fadeIn .65s;
-webkit-animation: fadeIn .65s;
}
.item .text {
height: 40px;
line-height: 40px;
padding: 0 10px;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}