Your SlideShare is downloading. ×
0
JavaScript for Web
Developer
ZUBZIB BLACK COFFEE #8
CHALERMPON AREEPONG (NINE)
AGENDA
Basic Programming
Object Oriented Programming
3rd JavaScript Libraries
AJAX, JSON, Handle Event
Debugging
Unit Test...
JavaScript (JS)
Created in 1995 by Brendan Eich
Name: Mocha in LAB, LiveScript for Netscape Navigator 2.0 and last rename ...
Brendan Eich
Stuff You Should Know
JavaScript run in Web Browser
JavaScript integrate with DOM
JavaScript is a dynamic type
Current Jav...
JavaScript IDE Tools
Web Browser Developer Tool
◦ Chrome (F12)
◦ Firefox add-in Firebug (F12)
◦ IE (F12)
◦ Safari
◦ Others
JavaScript IDE Tools
IDE Setup
◦ Visual Studio
◦ WebMatrix
◦ Kineticwing
◦ WebStrom
◦ CodeMirror
◦ Other
http://en.wikiped...
Demo tool
Chrome
jsfiddle
Visual Studio 2012 Update 3
Resharper 8
JavaScript Basic Programming
Declare Variable
var testString = 'ASP.NET & MVC Developers Thailand';
var testInt = 2000;
va...
JavaScript Basic Programming
Declare Function
//Declare function
function MVCShowOff() { return "Hi there, we are X!!"; }
...
JavaScript Basic Programming
Parameter Function
//Declare Function with parameter
function Mid2Vals(hi, low) { return (hi ...
JavaScript Basic Programming
Class and Object
//1. Declare Object Type, Class
function MvcMember() {
this.name = "Nine not...
JavaScript Basic Programming
Complex Class Object
//1. Declare Class
function MvcMember() {
this.name = "Nine not K9";
thi...
JavaScript Basic Programming
Late Declare Variable and Function
//1. Declare Class
function MvcMember() {
this.name = "Nin...
JavaScript Basic Programming
Condition, Loop, try… catch
//IF Else condition
var x = 0, y = 1;
if (x == 1) { alert('Yes');...
JavaScript Basic Programming
Condition, Loop, try… catch
// For Each Loop
var topic = "JavaScript very easy".split(' ');
t...
JavaScript Basic Programming
Comparisons 1
// Assigh value
var x = 10;
console.log("x="+x);
//Comparison
var a = "test", b...
JavaScript Basic Programming
Comparison 2
//check base type and value type
var undef;
var num = 90;
var str = "Test";
var ...
JavaScript Basic Programming
Value of variables are always false in condition
var a = null;
var b; // undefined
var c = 0;...
JavaScript Basic Programming
Inheritance with Prototype
function Speaker(isSpeaking) { this.isSpeaking = isSpeaking == nul...
3rd JavaScript Framework and
Library
jQuery is a library created on top JavaScript, to help us access DOM and populate HTM...
3rd JavaScript Framework and
Library
jQuery : Get Started
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<di...
3rd JavaScript Framework and
Library
jQuery : query and action
<div class="test"></div>
<input id="btnShowMessage" type="b...
AJAX ????
AJAX: Asynchronous JavaScript and
XML
None blocking user action and no screen freeze
Use AJAX (native code)
// This is the client-side script
// Initialize the Ajax request
var xhr = XMLHttpRequest();
xhr.op...
Use AJAX with JQUERY
$.get()
$.post()
$.getJSON()
$.ajax()
Demo
$.get('ajax/test.html', function (data) {
$('.result').htm...
JSON ????
JSON : JavaScript Object Notation
JSON is a text-based open standard designed for human-readable data interchange
//JavaSc...
JSON
JavaScript Object to JSON
var session = { name: $('input#name').val(), sessionName:
$('input#sesseionName').val() };
...
JSON
Demo JSON
Debug JavaScript
JavaScript Debugger Tools
1. Browser Web Developer Tools (F12)
2. Visual Studio 2012 + IE10 or later
Debug JavaScript
Put break point and click html button
JavaScript Unit Testing
article
MVC power by AngularJS
article
Java script for web developer
Java script for web developer
Java script for web developer
Java script for web developer
Upcoming SlideShare
Loading in...5
×

Java script for web developer

648

Published on

Zubzib Black Coffee #8 Update Skills v1 September 15, 2013

Demo
https://drive.google.com/folderview?id=0B3wMYjt-VARCLTBkYU9qZERrT0U&usp=sharing

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
648
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
23
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Java script for web developer"

  1. 1. JavaScript for Web Developer ZUBZIB BLACK COFFEE #8 CHALERMPON AREEPONG (NINE)
  2. 2. AGENDA Basic Programming Object Oriented Programming 3rd JavaScript Libraries AJAX, JSON, Handle Event Debugging Unit Test MVC
  3. 3. JavaScript (JS) Created in 1995 by Brendan Eich Name: Mocha in LAB, LiveScript for Netscape Navigator 2.0 and last rename to JavaScript with Netscape 2 beta in December 1995 Microsoft add JavaScript to IE in 1996 called JScript
  4. 4. Brendan Eich
  5. 5. Stuff You Should Know JavaScript run in Web Browser JavaScript integrate with DOM JavaScript is a dynamic type Current JavaScript complied to ECMA-262 version 5.1 http://en.wikipedia.org/wiki/ECMAScript JavaScript no coding standard, has only Best Practice
  6. 6. JavaScript IDE Tools Web Browser Developer Tool ◦ Chrome (F12) ◦ Firefox add-in Firebug (F12) ◦ IE (F12) ◦ Safari ◦ Others
  7. 7. JavaScript IDE Tools IDE Setup ◦ Visual Studio ◦ WebMatrix ◦ Kineticwing ◦ WebStrom ◦ CodeMirror ◦ Other http://en.wikipedia.org/wiki/Comparison _of_JavaScript- based_source_code_editors Cloud IDE ◦ Cloud9 ◦ CodeAnywhere ◦ Cloud IDE ◦ Sourcekit ◦ Codepen, jsfiddle, jsbin ◦ Other http://www.hongkiat.com/blog/cloud- ide-developers/
  8. 8. Demo tool Chrome jsfiddle Visual Studio 2012 Update 3 Resharper 8
  9. 9. JavaScript Basic Programming Declare Variable var testString = 'ASP.NET & MVC Developers Thailand'; var testInt = 2000; var testBool = true; var testDouble = 2000.2334; var testReg = /(?:.d){2}/; var testUndefined; var testNull = null; var testArray = new [0, 1, 2, 3]; var testObj = new {}; var testFunc = new function () { };
  10. 10. JavaScript Basic Programming Declare Function //Declare function function MVCShowOff() { return "Hi there, we are X!!"; } var message = MVCShowOff(); //call //Declare varriable function var MvcShowOff = function () { return "Hi there, we are X!!"; }; message = MvcShowOff(); //call //Declare Self-Invoking function (function () { return "Hi there, we are X!!"; })();//<-- (); is a caller //Declare Annonymous Function document.onload = function (e) { alert("Hi there, we are X!!"); };
  11. 11. JavaScript Basic Programming Parameter Function //Declare Function with parameter function Mid2Vals(hi, low) { return (hi + low) / 2; } var result = Mid2Vals(5, 10); //Declare Function without parameter and use arguments parameter function Mid2Vals() { return (arguments[0] + arguments[1]) / 2; } var result = Mid2Vals(5, 10);
  12. 12. JavaScript Basic Programming Class and Object //1. Declare Object Type, Class function MvcMember() { this.name = "Nine not K9"; this.isInstuctor = true; }; //Declare varriable and call var mrNine = new MvcMember(); alert(mrNine.isInstuctor); // true //2. Declare Object literal var mrNine = { name : "Nine not K9", isInstuctor : true }; //Call alert(mrNine.isInstuctor); // true
  13. 13. JavaScript Basic Programming Complex Class Object //1. Declare Class function MvcMember() { this.name = "Nine not K9"; this.isInstuctor = true; this.event = new function Event() { this.name = "Zubzib Black Coffee #5 Update Skills v1"; this.session = new function Session() { this.name = "JavaScript for Web Developer"; this.audiences = 40; }; this.place = "University of Thai Chamber of Commerce"; this.location = new function Location() { this.lat = 13.779276; this.long = 100.560326; this.getGeoLocation = lat + ', ' + long; };};}; //2. Initial varriable and access data var mrNine = new MvcMember(); alert(mrNine.event.name); alert(mrNine.event.session.name); alert(mrNine.event.location.getGeoLocation);
  14. 14. JavaScript Basic Programming Late Declare Variable and Function //1. Declare Class function MvcMember() { this.name = "Nine not K9"; this.isInstuctor = true; }; //And initial an object var mrNine = new MvcMember(); //2. late declare variable mrNine.say = "Hi everybody"; // mrNine["say"] = "Hi everybody"; //same //3. late declare function mrNine.thinkAbout = function (source) { return "I'm thinking about the " + source; };
  15. 15. JavaScript Basic Programming Condition, Loop, try… catch //IF Else condition var x = 0, y = 1; if (x == 1) { alert('Yes'); } else { alert('No'); } //Switch Condition var word = "Hi"; switch (word) { case "Hi": alert('How r u?'); default: alert("Hey what's was wrong with you?"); } //While loop var x = 5; while (x<1) { x--; } alert(x); //For loop var title = "JavaScript".split(''); for (var i = 0; i < title.length; i++) { alert(title[i]); }
  16. 16. JavaScript Basic Programming Condition, Loop, try… catch // For Each Loop var topic = "JavaScript very easy".split(' '); topic.forEach(function(word) { alert(word); }); //try catch block try { var x; x.ErrorPlease(); } catch(e) { alert("catch error : " + e.message); }
  17. 17. JavaScript Basic Programming Comparisons 1 // Assigh value var x = 10; console.log("x="+x); //Comparison var a = "test", b = "TEST"; var result = a == b; console.log("comparison a == b ? "+result); //Identity var identityResult = a === x; console.log("identity a is b ? " + identityResult);
  18. 18. JavaScript Basic Programming Comparison 2 //check base type and value type var undef; var num = 90; var str = "Test"; var bool = true; var func = function (a, b) { return a + b; }; var object = { x: 500 }; var arr = ["Nine", "Non", "Tape"]; console.log(typeof undef); //"undefined" console.log(typeof num); //"number" console.log(typeof str); //"string" console.log(typeof bool); //"boolean" console.log(typeof func); //"function" console.log(typeof object); // "object" console.log(typeof arr); // "object" //check object instance of class var arr = ["Nine", "Non", "Tape"]; console.log(arr instanceof Array); // true function Speaker() { this.name = "Nine"; } var mrNine = new Speaker(); console.log(mrNine instanceof Speaker); // true
  19. 19. JavaScript Basic Programming Value of variables are always false in condition var a = null; var b; // undefined var c = 0; var d = false; var e = ""; if (a) // false if (b) // false if (c) // false if (d) // false if (e) // false
  20. 20. JavaScript Basic Programming Inheritance with Prototype function Speaker(isSpeaking) { this.isSpeaking = isSpeaking == null ? false : isSpeaking; } Speaker.prototype.say = function () {return "Break session"; }; function ZZSpeaker () { this.isEating = true; } ZZSpeaker.prototype = new Speaker(); ZZSpeaker.prototype.sleepyShow = function () { alert('wake up !!!'); }; ZZSpeaker.prototype.say = function () { return "Ask me please.."; }; var nineSpeak = new ZZSpeaker(); nineSpeak.say(); nineSpeak.sleepyShow();
  21. 21. 3rd JavaScript Framework and Library jQuery is a library created on top JavaScript, to help us access DOM and populate HTML element, content , CSS, animation and DOM Event The two thinks jQuery dose 1. SELECT elements or a group of element by CSS Selector 2. Take Action on elements
  22. 22. 3rd JavaScript Framework and Library jQuery : Get Started <!DOCTYPE html> <html> <head> <title></title> </head> <body> <div class="test"></div> <!-- 1. Add script reference to local or CDN --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> //2. declare document ready $(document).ready(function () { $('div.test').html("<h1>JavaScript for web developer</h1>"); }); </script> </body> </html>
  23. 23. 3rd JavaScript Framework and Library jQuery : query and action <div class="test"></div> <input id="btnShowMessage" type="button" value="click me" /> //2. declare document ready $(document).ready(function () { //3. Bind Element Action to custom function $('#btnShowMessage').click(function () { $('div.test').html("<h1>DOM Ready binding event</h1>"); }); }); //4. Early binding event can declare out of DOM Ready block $('#btnShowMessage').on('click', function () { $('div.test').html("<h1>Early binding event</h1>"); });
  24. 24. AJAX ????
  25. 25. AJAX: Asynchronous JavaScript and XML None blocking user action and no screen freeze
  26. 26. Use AJAX (native code) // This is the client-side script // Initialize the Ajax request var xhr = XMLHttpRequest(); xhr.open('get', 'http://google.com'); // Track the state changes of the request xhr.onreadystatechange = function () { // Ready state 4 means the request is done if (xhr.readyState === 4) { // 200 is a successful return if (xhr.status === 200) { alert(xhr.responseText); // 'This is the returned text.' } else { alert('Error: ' + xhr.status); // An error occurred during the request } }} // Send the request to send-ajax-data.php xhr.send(null);
  27. 27. Use AJAX with JQUERY $.get() $.post() $.getJSON() $.ajax() Demo $.get('ajax/test.html', function (data) { $('.result').html(data); alert('Load was performed.'); }); $.post('ajax/test.html', function (data) { $('.result').html(data); }); $.getJSON('ajax/test.json', function (data) { var items = []; $.each(data, function (key, val) { items.push('<li id="' + key + '">' + val + '</li>'); }); });
  28. 28. JSON ????
  29. 29. JSON : JavaScript Object Notation JSON is a text-based open standard designed for human-readable data interchange //JavaScript Object var session = { name: 'Nine', sessionName: 'JavaScript for Web Developer', }; //JSON Object {"name": "Nine", "sessionName" : "JavaScript for Web Developer" }
  30. 30. JSON JavaScript Object to JSON var session = { name: $('input#name').val(), sessionName: $('input#sesseionName').val() }; //convert to json var json = JSON.stringify(session);
  31. 31. JSON Demo JSON
  32. 32. Debug JavaScript JavaScript Debugger Tools 1. Browser Web Developer Tools (F12) 2. Visual Studio 2012 + IE10 or later
  33. 33. Debug JavaScript Put break point and click html button
  34. 34. JavaScript Unit Testing article
  35. 35. MVC power by AngularJS article
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×