• Like
Java script for web developer
Upcoming SlideShare
Loading in...5
×

Java script for web developer

  • 523 views
Uploaded on

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

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

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

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
523
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
22
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. JavaScript for Web Developer ZUBZIB BLACK COFFEE #8 CHALERMPON AREEPONG (NINE)
  • 2. AGENDA Basic Programming Object Oriented Programming 3rd JavaScript Libraries AJAX, JSON, Handle Event Debugging Unit Test MVC
  • 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. Brendan Eich
  • 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. JavaScript IDE Tools Web Browser Developer Tool ◦ Chrome (F12) ◦ Firefox add-in Firebug (F12) ◦ IE (F12) ◦ Safari ◦ Others
  • 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. Demo tool Chrome jsfiddle Visual Studio 2012 Update 3 Resharper 8
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. AJAX ????
  • 25. AJAX: Asynchronous JavaScript and XML None blocking user action and no screen freeze
  • 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. 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. JSON ????
  • 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. JSON JavaScript Object to JSON var session = { name: $('input#name').val(), sessionName: $('input#sesseionName').val() }; //convert to json var json = JSON.stringify(session);
  • 31. JSON Demo JSON
  • 32. Debug JavaScript JavaScript Debugger Tools 1. Browser Web Developer Tools (F12) 2. Visual Studio 2012 + IE10 or later
  • 33. Debug JavaScript Put break point and click html button
  • 34. JavaScript Unit Testing article
  • 35. MVC power by AngularJS article