html, css, javascript, jquery, meteor應用
TRANSCRIPT
Weekly Report
Html, CSS, Javascript, Jquery, Meteor應用
2015.04.02 Kim
HTML Documents 標籤解說
<html></html> 此標籤是置於整個文件的開始和結束之處，以供瀏覽器識別此文件為合法的文件。
<head></head> 此標籤是用以表示標頭資訊的開始與結束，在<head>與</head>之間可加入其它標籤<title></title>或<meta>
等。
<title></title> 此標籤中的就是此網頁的標題，也就是您瀏覽器最左上面的標題，若沒設則只會顯示成此網頁所在的網址。
<body></body> 此標籤中所寫的內容即會顯示於網頁裡面，至於裡面要寫些什麼、可以寫些什麼。
HTML Documents
HTML Headings
HTML headings are defined with
the <h1> to <h6> tags:
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
HTML Documents
HTML Paragraph
HTML paragraphs are defined with the <p> tag:
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
HTML Documents
HTML Links
HTML links are defined with the <a> tag:
<a href="http://www.w3schools.com">This is a
link</a>
HTML Documents
HTML Images
<img src="w3schools.jpg" alt="W3Schools.com"
width="104" height="142">
HTML Documents
HTML Classes
Classing HTML elements, makes it possible to define CSS styles
for classes of elements. Equal styles for equal classes, or
different styles for different classes.
<div class="cities">
<h2>London</h2>
<p>
London is the capital city of England. It is the most populous city
in the United Kingdom, with a metropolitan area of over 13
million inhabitants.
</p>
</div>
HTML Documents HTML meta name 常用屬性
<meta name="description" content="網頁簡短描述"> 用來寫網頁的簡短描述。
<meta name="keywords" content="網頁關鍵字"> 用來放置網頁關鍵字。
<meta name="author" content="作者姓名"> 記錄網頁的作者名稱
<meta name="generator" content="編輯器名稱"> 用來記錄網頁編輯器名稱
<meta name="copyright" content="網頁版權"> 用來標示網頁的版權或著作權聲明
<meta name="distribution" content="網頁發佈地區"> 用來記錄網頁的發佈地區
HTML 5 新增的meta 功能
<meta charset="UTF-8">
設定網頁編碼，UTF-8 是萬國碼
HTML Forms
The <input> Element
The <input> element is the most important form
element.
The <input> element has many variations,
depending on the type attribute.Type Description
text Defines normal text input
radio Defines radio button input (for selecting one of
many choices)
submit Defines a submit button (for submitting the
form)
CSS body {
background-color: #d0e4fe;
}
h1 {
color: orange;
text-align: center;
}
p {
font-family: "Times New Roman";
font-size: 20px;
}
CSS
The element Selector
p {
text-align: center;
color: red;
}
#para1 {
text-align: center;
color: red;
}
.center {
text-align: center;
color: red;
}
CSS
The CSS Box Model
CSS
Content Box and Border Box
JavaScript
JavaScript is the programming language of HTML
and the Web. Programming makes computers do
what you want them to do.
JavaScript
Local JavaScript Variables
function myFunction() {
var carName = "Volvo";
// code here can use carName
}
JavaScript Global JavaScript Variables
var carName = " Volvo";
// code here can use carName
function myFunction() {
// code here can use carName
}
JavaScript
Automatically Global
// code here can use carName
function myFunction() {
carName = "Volvo";
// code here can use carName
}
JavaScript
The Lifetime of JavaScript Variables
The lifetime of a JavaScript variable starts when it
is declared.
Local variables are deleted when the function is
completed.
Global variables are deleted when you close the
page.
JavaScript
JavaScript Functions
function myFunction(p1, p2) {
return p1 * p2;
}
JavaScript JavaScript Objects
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
var person = {firstName:"John",lastName:"Doe",age:50,eyeColor:"blue"
};
person.lastName;
person["lastName"];
JavaScript
JavaScript Events
HTML events are “things” that happen to HTML
elements. When JavaScript is used in HTML
pages, JavaScript can "react" on these events.
JavaScript
JavaScript Events
<button
onclick="getElementById('demo').innerHTML=Date()">The time
is?</button>
<p id="demo"></p>
<p id="demo">Thu Apr 02 2015 11:05:33 GMT+0800 (Taipei
Standard Time)</p>
JavaScript
JavaScript Events
<button
onclick="getElementById('demo').innerHTML=Date()">The time
is?</button>
<p id="demo"></p>
<p id="demo">Thu Apr 02 2015 11:05:33 GMT+0800 (Taipei
Standard Time)</p>
<button onclick="this.innerHTML=Date()">The time is?</button>
JavaScript
The HTML DOM (Document Object Model)
Jquery
jQuery is a JavaScript Library.
jQuery greatly simplifies JavaScript programming.
jQuery is a lightweight, "write less, do more",
JavaScript library.
Jquery
The jQuery library contains the following features:
HTML/DOM manipulation
CSS manipulation
HTML event methods
Effects and animations
AJAX
Utilities
Jquery
jQuery Syntax
$(selector).action()
A $ sign to define/access jQuery
A (selector) to "query (or find)" HTML elements
A jQuery action() to be performed on the
element(s)
Jquery
$("p")
$("#test")
$(".test")
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
Jquery
jQuery Event Methods
Mouse Events Keyboard Events Form Events Document/Window Events
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload
Jquery
jQuery - Chaining
$("#p1").css("color", "red")
.slideUp(2000)
.slideDown(2000);
Meteor 應用<template name=“retrieve”> //retrieve.html
{{> ionNavBar class="bar-stable"}}
{{#contentFor "headerButtonRight"}}
<div class="buttons">
<button class="button button-clear button-dark search" >
{{> ionIcon icon='ios-search'}}
</button>
<button class="button button-clear button-dark">
{{> ionIcon icon='navicon'}}
</button>
</div>
{{/contentFor}}
{{#contentFor "headerTitle"}}
<h1 class="title init">
Webpat
</h1>
{{/contentFor}}
</template>
Meteor 應用Template.retrieve.events({ //retrieve.js
"click .search": function () {
$("h1.title")
.css ({
"margin-right": "70px",
"margin-left": "0px"
})
.empty().html('<div class="bar bar-header item-input-inset searchbar">
<button class="button button- clear button-dark cancel-searchBar"> <iclass="icon ion-ios-arrow-back"></i> </button><label class="item-input-wrapper"> <i class="icon ion-search placeholder-icon"></i> <input placeholder="Search" type="text" class="header-input-searchbar"> </label></div>');
$(".buttons .search").hide();
$(".header-input-searchbar").focus();
});
Meteor 應用 Html5 Input event
The DOM input event is fired synchronously when the
value of an <input> or <textarea> element is changed.
Meteor 應用"input .header-input-searchbar": function(event){
var headerInputSearchbar = $(".header-input-searchbar");
if(!inputFlag) {//if input text has value
if(headerInputSearchbar.val() != "") {
headerInputSearchbar.after('<i class="icon ion-ios-close-empty cancel-input"></i>');
inputFlag = true;
}
}
else {
if(headerInputSearchbar.val() == "") {
$(".cancel-input").remove();
inputFlag = false;
}
}
},
Meteor 應用 Infinite scroll
http://isotope.metafizzy.co/v1/demos/infinite-scroll.html
"scroll .listContent" : _.throttle(function() {
var threshhold = ($(".patentList").height() - $(".listContent").height())
* 0.8;
if(scrollTarget.scrollTop() > threshhold) {
//…………
}
Meteor 應用 Slide Box
http://ionicframework.com/docs/api/directive/ionSl
ideBox/
Meteor 應用 Slide Box
<template name="slideBox">
<body>
{{#ionSlideBox}}
{{#ionSlide}}Slide 1{{/ionSlide}}
{{#ionSlide}}Slide 2{{/ionSlide}}
{{#ionSlide}}Slide 3{{/ionSlide}}
{{/ionSlideBox}}
</body>
</template>