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

Like this? Share it with your network

Share

Java script for web developer

  • 847 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
847
On Slideshare
847
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
21
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