SlideShare une entreprise Scribd logo
1  sur  37
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"> <i
class="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>

Contenu connexe

Tendances

Intro to Javascript and jQuery
Intro to Javascript and jQueryIntro to Javascript and jQuery
Intro to Javascript and jQuery
Shawn Calvert
 
Class Intro / HTML Basics
Class Intro / HTML BasicsClass Intro / HTML Basics
Class Intro / HTML Basics
Shawn Calvert
 

Tendances (20)

CSC103 Web Technologies: HTML, CSS, JS
CSC103 Web Technologies: HTML, CSS, JSCSC103 Web Technologies: HTML, CSS, JS
CSC103 Web Technologies: HTML, CSS, JS
 
Intro to Javascript and jQuery
Intro to Javascript and jQueryIntro to Javascript and jQuery
Intro to Javascript and jQuery
 
Java Script
Java ScriptJava Script
Java Script
 
Html JavaScript and CSS
Html JavaScript and CSSHtml JavaScript and CSS
Html JavaScript and CSS
 
jQuery basics
jQuery basicsjQuery basics
jQuery basics
 
J Query Public
J Query PublicJ Query Public
J Query Public
 
HTML/CSS/java Script/Jquery
HTML/CSS/java Script/JqueryHTML/CSS/java Script/Jquery
HTML/CSS/java Script/Jquery
 
Introduzione JQuery
Introduzione JQueryIntroduzione JQuery
Introduzione JQuery
 
jQuery from the very beginning
jQuery from the very beginningjQuery from the very beginning
jQuery from the very beginning
 
Java script programs
Java script programsJava script programs
Java script programs
 
Class Intro / HTML Basics
Class Intro / HTML BasicsClass Intro / HTML Basics
Class Intro / HTML Basics
 
jQuery PPT
jQuery PPTjQuery PPT
jQuery PPT
 
Java script Learn Easy
Java script Learn Easy Java script Learn Easy
Java script Learn Easy
 
Javascript
JavascriptJavascript
Javascript
 
Javascript
JavascriptJavascript
Javascript
 
Introduction to Html5
Introduction to Html5Introduction to Html5
Introduction to Html5
 
Java script
Java scriptJava script
Java script
 
HTML 5 Complete Reference
HTML 5 Complete ReferenceHTML 5 Complete Reference
HTML 5 Complete Reference
 
Introduction to Prototype JS Framework
Introduction to Prototype JS FrameworkIntroduction to Prototype JS Framework
Introduction to Prototype JS Framework
 
Html,javascript & css
Html,javascript & cssHtml,javascript & css
Html,javascript & css
 

En vedette

20120518 mssql table_schema_xml_namespace
20120518 mssql table_schema_xml_namespace20120518 mssql table_schema_xml_namespace
20120518 mssql table_schema_xml_namespace
LearningTech
 
Visualization library and tools
Visualization library and toolsVisualization library and tools
Visualization library and tools
seung hyun Seo
 
20130510 assembly binding
20130510 assembly binding20130510 assembly binding
20130510 assembly binding
LearningTech
 

En vedette (20)

A practical guide to building websites with HTML5 & CSS3
A practical guide to building websites with HTML5 & CSS3A practical guide to building websites with HTML5 & CSS3
A practical guide to building websites with HTML5 & CSS3
 
HTML&CSS 3 - Introduction to CSS
HTML&CSS 3 - Introduction to CSSHTML&CSS 3 - Introduction to CSS
HTML&CSS 3 - Introduction to CSS
 
HTML&CSS 2 - Intermediate HTML
HTML&CSS 2 - Intermediate HTMLHTML&CSS 2 - Intermediate HTML
HTML&CSS 2 - Intermediate HTML
 
HTML&CSS 6 - Advanced CSS
HTML&CSS 6 - Advanced CSSHTML&CSS 6 - Advanced CSS
HTML&CSS 6 - Advanced CSS
 
Less css
Less cssLess css
Less css
 
JavaScript
JavaScriptJavaScript
JavaScript
 
An overview of java script in 2015 (ecma script 6)
An overview of java script in 2015 (ecma script 6)An overview of java script in 2015 (ecma script 6)
An overview of java script in 2015 (ecma script 6)
 
The D3 Toolbox
The D3 ToolboxThe D3 Toolbox
The D3 Toolbox
 
20120518 mssql table_schema_xml_namespace
20120518 mssql table_schema_xml_namespace20120518 mssql table_schema_xml_namespace
20120518 mssql table_schema_xml_namespace
 
Visualization library and tools
Visualization library and toolsVisualization library and tools
Visualization library and tools
 
Absolute layout
Absolute layoutAbsolute layout
Absolute layout
 
Creating Sentiment Line Chart with Watson
Creating Sentiment Line Chart with Watson Creating Sentiment Line Chart with Watson
Creating Sentiment Line Chart with Watson
 
20130510 assembly binding
20130510 assembly binding20130510 assembly binding
20130510 assembly binding
 
JavsScript OOP
JavsScript OOPJavsScript OOP
JavsScript OOP
 
Introduction to d3js (and SVG)
Introduction to d3js (and SVG)Introduction to d3js (and SVG)
Introduction to d3js (and SVG)
 
Css3 Flexible Box Layout
Css3 Flexible Box LayoutCss3 Flexible Box Layout
Css3 Flexible Box Layout
 
Data visualization with d3 may19
Data visualization with d3 may19Data visualization with d3 may19
Data visualization with d3 may19
 
A short introduction of D3js
A short introduction of D3jsA short introduction of D3js
A short introduction of D3js
 
Aspnet mvc4
Aspnet mvc4Aspnet mvc4
Aspnet mvc4
 
Data to d3
Data to d3Data to d3
Data to d3
 

Similaire à Html, CSS, Javascript, Jquery, Meteor應用

Similaire à Html, CSS, Javascript, Jquery, Meteor應用 (20)

jQuery
jQueryjQuery
jQuery
 
Introduction of Html/css/js
Introduction of Html/css/jsIntroduction of Html/css/js
Introduction of Html/css/js
 
Wt unit 2 ppts client sied technology
Wt unit 2 ppts client sied technologyWt unit 2 ppts client sied technology
Wt unit 2 ppts client sied technology
 
Wt unit 2 ppts client side technology
Wt unit 2 ppts client side technologyWt unit 2 ppts client side technology
Wt unit 2 ppts client side technology
 
Think jQuery
Think jQueryThink jQuery
Think jQuery
 
Jquery Complete Presentation along with Javascript Basics
Jquery Complete Presentation along with Javascript BasicsJquery Complete Presentation along with Javascript Basics
Jquery Complete Presentation along with Javascript Basics
 
Html5 and web technology update
Html5 and web technology updateHtml5 and web technology update
Html5 and web technology update
 
Introduction to JavaScript Basics.
Introduction to JavaScript Basics.Introduction to JavaScript Basics.
Introduction to JavaScript Basics.
 
Jquery presentation
Jquery presentationJquery presentation
Jquery presentation
 
Presentation
PresentationPresentation
Presentation
 
前端概述
前端概述前端概述
前端概述
 
Introduction to jQuery
Introduction to jQueryIntroduction to jQuery
Introduction to jQuery
 
JavaScript - Getting Started.pptx
JavaScript - Getting Started.pptxJavaScript - Getting Started.pptx
JavaScript - Getting Started.pptx
 
Html5 For Jjugccc2009fall
Html5 For Jjugccc2009fallHtml5 For Jjugccc2009fall
Html5 For Jjugccc2009fall
 
jQuery
jQueryjQuery
jQuery
 
FSJavaScript.ppt
FSJavaScript.pptFSJavaScript.ppt
FSJavaScript.ppt
 
Html5, css3 y js
Html5, css3 y jsHtml5, css3 y js
Html5, css3 y js
 
J query training
J query trainingJ query training
J query training
 
Basics of Java Script (JS)
Basics of Java Script (JS)Basics of Java Script (JS)
Basics of Java Script (JS)
 
Java script
Java scriptJava script
Java script
 

Plus de LearningTech (20)

vim
vimvim
vim
 
PostCss
PostCssPostCss
PostCss
 
ReactJs
ReactJsReactJs
ReactJs
 
Docker
DockerDocker
Docker
 
Semantic ui
Semantic uiSemantic ui
Semantic ui
 
node.js errors
node.js errorsnode.js errors
node.js errors
 
Process control nodejs
Process control nodejsProcess control nodejs
Process control nodejs
 
Expression tree
Expression treeExpression tree
Expression tree
 
SQL 效能調校
SQL 效能調校SQL 效能調校
SQL 效能調校
 
flexbox report
flexbox reportflexbox report
flexbox report
 
Vic weekly learning_20160504
Vic weekly learning_20160504Vic weekly learning_20160504
Vic weekly learning_20160504
 
Reflection &amp; activator
Reflection &amp; activatorReflection &amp; activator
Reflection &amp; activator
 
Peggy markdown
Peggy markdownPeggy markdown
Peggy markdown
 
Node child process
Node child processNode child process
Node child process
 
20160415ken.lee
20160415ken.lee20160415ken.lee
20160415ken.lee
 
Peggy elasticsearch應用
Peggy elasticsearch應用Peggy elasticsearch應用
Peggy elasticsearch應用
 
Expression tree
Expression treeExpression tree
Expression tree
 
Vic weekly learning_20160325
Vic weekly learning_20160325Vic weekly learning_20160325
Vic weekly learning_20160325
 
D3js learning tips
D3js learning tipsD3js learning tips
D3js learning tips
 
git command
git commandgit command
git command
 

Dernier

Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
WSO2
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Victor Rentea
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 

Dernier (20)

Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with Milvus
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 AmsterdamDEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf
 
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
Vector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptxVector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptx
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
WSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering DevelopersWSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering Developers
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 

Html, CSS, Javascript, Jquery, Meteor應用

  • 1. Weekly Report Html, CSS, Javascript, Jquery, Meteor應 用 2015.04.02 Kim
  • 2. HTML Documents  標籤解說  <html></html> 此標籤是置於整個文件的開始和結束之處,以供 瀏覽器識別此文件為合法的文件。  <head></head> 此標籤是用以表示標頭資訊的開始與結束, 在<head>與</head>之間可加入其它標籤<title></title>或<meta> 等。  <title></title> 此標籤中的就是此網頁的標題,也就是您瀏 覽器最左上面的標題,若沒設則只會顯示成此網頁所在的網址。  <body></body> 此標籤中所寫的內容即會顯示於網頁裡面, 至於裡面要寫些什麼、可以寫些什麼。
  • 3. 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>
  • 4. HTML Documents  HTML Paragraph  HTML paragraphs are defined with the <p> tag:  <p>This is a paragraph.</p> <p>This is another paragraph.</p>
  • 5. HTML Documents  HTML Links  HTML links are defined with the <a> tag:  <a href="http://www.w3schools.com">This is a link</a>
  • 6. HTML Documents  HTML Images  <img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
  • 7. 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>
  • 8. 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 是萬國碼
  • 9. 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)
  • 10. CSS  body {  background-color: #d0e4fe;  }  h1 {  color: orange;  text-align: center;  }  p {  font-family: "Times New Roman";  font-size: 20px;  }
  • 11. CSS  The element Selector  p { text-align: center; color: red; }  #para1 { text-align: center; color: red; }  .center { text-align: center; color: red; }
  • 12. CSS  The CSS Box Model
  • 13. CSS  Content Box and Border Box
  • 14. JavaScript  JavaScript is the programming language of HTML and the Web. Programming makes computers do what you want them to do.
  • 15. JavaScript  Local JavaScript Variables  function myFunction() { var carName = "Volvo"; // code here can use carName }
  • 16. JavaScript  Global JavaScript Variables  var carName = " Volvo"; // code here can use carName function myFunction() { // code here can use carName }
  • 17. JavaScript  Automatically Global  // code here can use carName function myFunction() { carName = "Volvo"; // code here can use carName }
  • 18. 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.
  • 19. JavaScript  JavaScript Functions  function myFunction(p1, p2) { return p1 * p2;  }
  • 20. 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"];
  • 21. 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.
  • 22. 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>
  • 23. 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>
  • 24. JavaScript  The HTML DOM (Document Object Model)
  • 25. Jquery  jQuery is a JavaScript Library.  jQuery greatly simplifies JavaScript programming.  jQuery is a lightweight, "write less, do more", JavaScript library.
  • 26. Jquery  The jQuery library contains the following features:  HTML/DOM manipulation  CSS manipulation  HTML event methods  Effects and animations  AJAX  Utilities
  • 27. 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)
  • 28. Jquery  $("p")  $("#test")  $(".test")  $(document).ready(function(){ $("button").click(function(){ $(".test").hide(); }); });
  • 29. 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
  • 30. Jquery  jQuery - Chaining  $("#p1").css("color", "red") .slideUp(2000) .slideDown(2000);
  • 31. 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>
  • 32. 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"> <i class="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(); });
  • 33. Meteor 應用  Html5 Input event  The DOM input event is fired synchronously when the value of an <input> or <textarea> element is changed.
  • 34. 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; } } },
  • 35. 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) { //………… }
  • 36. Meteor 應用  Slide Box  http://ionicframework.com/docs/api/directive/ionSl ideBox/
  • 37. Meteor 應用  Slide Box <template name="slideBox"> <body> {{#ionSlideBox}} {{#ionSlide}}Slide 1{{/ionSlide}} {{#ionSlide}}Slide 2{{/ionSlide}} {{#ionSlide}}Slide 3{{/ionSlide}} {{/ionSlideBox}} </body> </template>