ขาเดฟ khadev vol.1
DESCRIPTION
นิตยสารไอทีแจกฟรีสำหรับนักพัฒนาซอฟท์แวร์ไทยTRANSCRIPT
-
facebook: [email protected]
AEC
Geek
-
Google Map Google feature
, 57,000 https://developers.google.com/maps/documentation/elevation/#What
-
Alibaba
Alibaba
Samsung Galaxy S5
Galaxy S5 Feature life style http://www.samsung.com/th/galaxys5/feature.html
-
Printer printer Zuta Lab kickstarter Printer https://www.kickstarter.com/projects/1686304142/the-mini-mobile-robotic-printer
Bit Coin Bit Coin
100 coints = 1 euro
-
HTML5 1 HTML5 HTML5
HTML5 Elements Semantics
HTML5
HTML5 ? HTML* HTML 4.01 Rich* plug-in Flash* , , , , , , ,
HTML Browser
Rich Content Rich HTML refresh F5
Flash Rich Adobe Animation plug-in Flash Adobe HTML5
-
HTML5 Elements Attributes CSS3* Video Audio 2D3D Web SQL *
http://www.w3.org/2011/11/mobile-web-app-state.html
(Cascading Style Sheets:CSS)
Web SQL HTML5 Browser
SQL SQL W3C refresh
-
Internet Explorer 8 Browser Internet Explorer 8 Browser Elements HTML5 , , , , , , HTML5 Shiv http://code.google.com/p/html5shiv/ HTML
HTML HTML5 World Wide Web Consortium (W3C) Web Hypertext Application Technology Working Group (WHATWG) HTML
HTML, CSS, DOM JavaScript plugin Flash HTML5
HTML5
-
HTML5
1.1 HTML5
HHTTMMLL55
HHTTMMLL ..........
ccaannvvaass(()) eelleemmeenntt 22DD vviiddeeoo aauuddiioo eelleemmeenntt aarrttiiccllee,, ffooootteerr,, hheeaaddeerr,, nnaavv,, sseeccttiioonn ccaalleennddaarr,, ddaattee,, ttiimmee,, eemmaaiill,, uurrll,, sseeaarrcchh
-
BBrroowwsseerr HHTTMMLL55 BBrroowwsseerr ((CChhrroommee,, FFiirreeffooxx,, IInntteerrnneett EExxpplloorreerr,, SSaaffaarrii,, OOppeerraa)) HHTTMMLL55 eelleemmeennttss AAPPIIss FFeeaattuurree HHTTMMLL55 BBrroowwsseerr HHTTMMLL55 AAOOLL,, AAppppllee}} GGooooggllee,, IIBBMM,, MMiiccrroossoofftt,, MMoozziill llaa,, NNookkiiaa,, OOppeerraa
-
EElleemmeennttss EElleemmeennttss HHTTMMLL55
Element MMeeddiiaa ssoouurrccee
ttrraacckk pplluuggiinn FFoorrmm sseelleecctt
SSeemmaannttiicc//SSttrruuccttuurraall
ddeettaaiillss eelleemmeenntt
,,
eelleemmeenntt
?? ??
-
Elements
HTML5 Elements 4.01 , , , , , , , , , , ,
( 2 Semantic Elements)
Element SSeemmaannttiicc//SSttrruuccttuurraall ((
))
rruubbyy (())
BBrroowwsseerr rruubbyy eelleemmeennyy
-
9
Sweet Cafe WiFi
Sweet Cafe
-
Open Source
1 NodeJS Opensource Opensource Opensource
Opensource Opensource Opensource
Opensource CMS (Content Management System) Solution
HTML5, CSS3 , JavaScript ,Bootstrap , Jquery , RequireJS , UnderScoreJS ,AngularJS , NodeJS OrientDB
NodeJS www.nodejs.org
-
NodeJS ? NodeJS Server Side Apache http, IIS, Glassfish , Jboss, Websphere Middleware Request Client Server Response NodeJS Non-Blocking I/O Middleware
Single Thread Application JavaScript V8 Engine Event Loops
Non Blocking I/O Blocking I/O
Blocking I/O request 1 Block Resources Network Traffic , Memory , Disk
Non-Blocking I/O
Order Order Chief Middleware Database Cache Global Memory Request Cache Global Memory Request Global Memory
-
NodeJS NodeJS
web-server.js 1.1 NodeJS
var http = require('http'); http.createServer(function (req, res) { res.writeHead(200, {'Content-Type': 'text/plain'}); res.end('Hello World\n'); }).listen(1337, '127.0.0.1'); console.log('Server running at http://127.0.0.1:1337/');
Command Line
node web-server.js
Console Server running at http://127.0.0.1:1337 Browser URL Hello World
* node Environment Variable path/bin nodejs path
-
var http = require('http'); http http module library nodejs http server
http.createServer(function (req, res) { }).listen(1337, '127.0.0.1');
http server port 1337 port * access point access point port 9999 * '127.0.0.1' local server
res.writeHead(200, {'Content-Type': 'text/plain'}); res.end('Hello World\n');
Browser url:port Hello World
console.log('Server running at http://127.0.0.1:1337/');
console console.log();
( 2 NodeJS express , connect , RequireJS)
-
.
415 .
21
260 12 12 30
103 .
.
-
CSS3 1 CSS CSS3 (Cascading Style Sheets) HTML CSS
CSS Syntax
Selector Element HTML Element 4
Selector
Element Element HTML Element Element input , label , div ,p , h1, h2 , h3 ,
label {font-weight:bold;color:orange}
id id HTML id
#() id
#txtNumber {text-align:center}
HTML
class class HTML . ()
.topicHeader {font-size:xx-large;font-family:verdana}
HTML
group
element id , ()
h1,h2,p { text-align:center; color:red; }
-
Disable /* */
/*This is a multiple lines comment*/ p { Color:red; /*This is another comment*/ Text-aling:center; }
CSS CSS HTML tag HTML CSS
1. CSS example1_1.css 2. example1_1.css
1.1
body {background-color: black;}
p {color: white;font-family: verdana;font-size: xx-large}
-
3. HTML example1_1.html HTML
1.1 CSS
CSS
2. HTML
CSS
css
-
CSS Background HTML
background-color : background-image : background-repeat : background-attachment :
background-position :
Background-color : 3
16 "#ff0000 rgb "rgb(255,0,0) "green
* 16 Digital PC 0-9 , 16 0-9 A-F
rgb r, g ,b 0-255
Programmer
16 16
-
1.2
h1 {background-color:#6495ed;} p {background-color:#e0ffff;} div {background-color:#b0c4de;}
HTML HTML
-
background-image: background-image
1.3
body {background-image:url("../../images/angularlogo.jpg");}
../../ Folder HTML path
example1_3.html path views/CSS3/chapter1 path images path views 2 path ../../ images/angularlogo.jpg
-
background-repeat:repeat-x; background-repeat:repeat-y; background-repeat:no-repeat; background-position top : center : left : right : bottom :
body {
background-image:url("../../images/angularlogo.jpg");
background-repeat:no-repeat;
background-position:top right;
}
body {
background-image:url("../../images/angularlogo.jpg");
background-repeat:repeat-x;
}
-
Background-attachment background scrollbar
1.4
HTML Code
CSS Code
body {background-image:url("../../images/angularlogo.jpg");
background-repeat:no-repeat;
background-attachment:fixed;
}
#box{margin-top:200px;width:500px; height: 1500px; background-color: yellow}
-
background-attachment:fixed; fixed scrollbar scrollbar background
background-attachment
scroll scroll bar
fixed scroll bar
local fixed background element content
initial element
inherit element background-attachment element element
( 2 CSS Text)
-
JavaScript
1 JavaScript 3
JavaScript ? JavaScript HTML JavaScript JavaScript PC , Notebook, Smart phone
, Tablet Browser JavaScript CPU , Memory
JavaScript
JavaScript 1 3 (HTML, CSS JavaScript)
Social Network
3 HTML5 HTML5 : CSS3 : JavaScript :
JavaScript HTML Element HTML
-
1.1 JavaScript
HTML Code
1.1 JavaScript
function internalShow(){
document.getElementById('lblShow').innerText ="JavaScript HTML";
}
Internal External
JavaScript external file Code
function externalShow()
{
document.getElementById('lblShow').innerText ="JavaScript HTML";
}
-
HTML label id=lblShow label internalShow externalShow attributes onclick () externalShow()
internalShow HTML document.getElementById('lblShow') Element id lblShow
.innerText Element
JavaScript (=)
object.property = value;
document.getElementById('lblShow')object.innerTextproperty ="JavaScript HTML"value;
externalShow internalShow source HTML
JavaScript
JavaScript HTML , , Content
JavaScript
-
Debug JavaScript Debug Browser console.log Debugger tool Browser
1.2 Debug JavaScript console.log
HTML Code
Execute
JavaScript Code
function sum(a,b)
{
var result = a+b;
console.log(result);
}
Execute
Browser Chrome View> Developer>Developer Tools (Window F12 , Mac alt + command + I)
Execute 9 + 15 = 24 console
-
Firefox Tools>Web Devloper > Web Console
Debug Debugger Tools Browser Debugger Tools Developer Tool Chrome Source Debug
-
Execute 3
Debugger tools F11 ( window)
Debugger Tools
( 2 JavaScript Syntax)
-
Big Data Java Technology Hubba 2 . 2557 Record Luca Garulli Big Data OrientDB www.orientdb.org Hubba
-
facebook : [email protected] twitter : @apaichon_p
-
HTML5 1 HTML5 HTML5HTML5 ? HTML5 Internet Explorer 8 Browser HTMLBrowser HTML5Elements Elements
Open Source1 NodeJS Non Blocking I/O NodeJS
CSS3 1 CSS CSS Syntax CSSCSS BackgroundBackground-color : background-image: background-position Background-attachment
JavaScript1 JavaScript JavaScript ? JavaScript3 HTML5 JavaScriptJavaScript Debug JavaScript Debug Debugger Tools