![10
Onload vs $(document).ready
onload vs $(document).ready.html
<html>
<head>
<title>load event</title>
<script src=/slideshow/course-js-day-4/62504564/"http:/code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
var counter = 1;
log_msg('head loaded')
function log_msg(message) {
console.log(message + ", counter = " + counter);
var arr_p = [];
for (var i = 0; i < document.getElementsByTagName('p').length; i++) {
arr_p.push(document.getElementsByTagName('p')[i]);
}
console.log(arr_p);
counter++;
}
window.onload = log_msg.bind(null, 'window loaded');
$(document).ready(function () { log_msg("jQuery document ready") });
</script>
</head>
<body onload="log_msg('body loaded');">
<p>Paragraph 1</p>
<img src="http://localhost:1515/get_image.ashx" />
<script type="text/javascript">log_msg("inline call");</script>
<p>Paragraph 2</p>
</body>
</html>](https://image.slidesharecdn.com/33df3619-f110-4133-bcf5-b7e897455016-160529052127/85/course-js-day-4-10-320.jpg)
![11
Simple progress bar
jquery simple progress bar.html
<html>
<head>
<title>load event</title>
<script src=/slideshow/course-js-day-4/62504564/"http:/code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="progress_bar.js"></script>
</head>
<body onload="log_msg('body loaded');">
<p>Paragraph 1</p>
<img src="http://localhost:1515/get_image.ashx" style="height:200" />
<script type="text/javascript">log_msg("inline call");</script>
<p>Paragraph 2</p>
</body>
</html>
var counter = 1;
log_msg('head loaded')
function log_msg(message) {
console.log(message + ": counter = " + counter);
var arr_p = [];
for (var i = 0; i < document.getElementsByTagName('p').length; i++) {
arr_p.push(document.getElementsByTagName('p')[i]);
}
console.log(arr_p);
counter++;
}
var window_loaded = false;
window.onload = function () {
log_msg('window loaded');
window_loaded = true;
$("#div_bar").remove();
}
$(document).ready(function () {
log_msg("jQuery document ready");
if (!window_loaded) {
var div_bar = $('<div id="div_bar" style="position:fixed; top:0; left:0;
background-color:rgba(0,0,0,0.6) "/>').css("height", window.innerHeight).css("width",
window.innerWidth);
div_bar.append($('<div
style="position:fixed;top:40%;left:48%;color:#fff"/>').text("loading..."));
$("body").append(div_bar);
}
});
progress_bar.js](https://image.slidesharecdn.com/33df3619-f110-4133-bcf5-b7e897455016-160529052127/85/course-js-day-4-11-320.jpg)
course js day 4
- 2. 2 1 于亠弍亳仆舒 仂亳 js 弌舒仆亟舒 ECMAScript IDE 亳 亠亟舒从仂 舒仗从 亳 仂仍舒亟从舒 从亳仗仂于 丐亳仗 亳 仂仗亠舒仂
- 3. 3 2 于亠弍亳仆舒 舒亳于 仆仂于仆亠 从仂仆从亳亳 磶从舒, 亳 亳 仗亳仄亠仆亠仆亳亠 弍亠从 亳 JSON 亠亞仍仆亠 于舒亢亠仆亳 仂仆亠从, this, bind, call, apply , 仗仂仂亳仗, 于 ECMAScript 6
- 4. 4 3 于亠弍亳仆舒 JavaScript 亳 HTML 舒弍仂舒 DOM 弌仂弍亳, 舒亶仄亠 亳 AJAX
- 5. 5 4 于亠弍亳仆舒 jQuery AngularJS Knockout, Ember, Backbone CoffeeScript Node.js
- 6. 6 jQuery.ajax $.ajax.html <html> <head> <title>jQuery AJAX</title> <script src=/slideshow/course-js-day-4/62504564/"http:/code.jquery.com/jquery-2.1.1.min.js"></script> <script> function load_data() { $.ajax( { url: "data.html" }).done( function (data) { document.getElementById("target").innerHTML = data } ).fail( function () { alert("error when call server") }); } </script> </head> <body> <button type="button" onclick="load_data()">Load</button> <p id="target"></p> </body> </html>
- 7. 7 jQuery jQuery 舒仄亶 仗仂仗仍仆亶, 于仂弍仂亟仆仂 舒仗仂舒仆磳仄亶, js 亠亶仄于仂从 jQuery.UI 弍亳弍仍亳仂亠从舒 ui 仍亠仄亠仆仂于 仂仆仂于舒仆仆舒 仆舒 jQuery jQuery 亳仄亠亠 弍仂仍 从仂亳亠仄, 仂亰亟舒仆仂 仂亞仂仄仆仂亠 从仂仍亳亠于仂 仗仍舒亞亳仆仂于 jQuery 亳仄亠亠 仂仆仂亳亠仍仆仂 弍仂仍仂亶 于亠 (~ 100 ) jQuery 从仂弍舒亰亠仆舒 (于亠亳 1. 仗仂亟亟亠亢亳于舒亠 IE6!)
- 9. 9 jQuery selectors <html> <head> <title>jQuery selectors</title> <script src=/slideshow/course-js-day-4/62504564/"http:/code.jquery.com/jquery-2.1.1.min.js"></script> <script type="text/javascript"> $(document).ready(function () { console.log($("span")); console.log($(".main_p")); }) </script> </head> <body> <div> <p class="main_p"> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet feugiat ipsum.</span><br /> <span>Phasellus quis magna nulla. Ut non ornare metus, sit amet posuere dui.</span><br /> <span>Quisque placerat libero lacus, sit amet cursus mauris scelerisque vel.</span><br /> <span>Nunc ipsum justo, tempor sed felis in, porta elementum erat. Ut scelerisque iaculis sapien.</span><br /> <span>Integer a elit ultrices nisi gravida faucibus vitae non lacus.</span><br /> <span>Vestibulum convallis sagittis imperdiet. Donec lacinia sollicitudin tincidunt. Morbi vel viverra arcu, in convallis est.</span> </p> </div> </body> </html> jquery selectors.html
- 10. 10 Onload vs $(document).ready onload vs $(document).ready.html <html> <head> <title>load event</title> <script src=/slideshow/course-js-day-4/62504564/"http:/code.jquery.com/jquery-2.1.1.min.js"></script> <script type="text/javascript"> var counter = 1; log_msg('head loaded') function log_msg(message) { console.log(message + ", counter = " + counter); var arr_p = []; for (var i = 0; i < document.getElementsByTagName('p').length; i++) { arr_p.push(document.getElementsByTagName('p')[i]); } console.log(arr_p); counter++; } window.onload = log_msg.bind(null, 'window loaded'); $(document).ready(function () { log_msg("jQuery document ready") }); </script> </head> <body onload="log_msg('body loaded');"> <p>Paragraph 1</p> <img src="http://localhost:1515/get_image.ashx" /> <script type="text/javascript">log_msg("inline call");</script> <p>Paragraph 2</p> </body> </html>
- 11. 11 Simple progress bar jquery simple progress bar.html <html> <head> <title>load event</title> <script src=/slideshow/course-js-day-4/62504564/"http:/code.jquery.com/jquery-2.1.1.min.js"></script> <script type="text/javascript" src="progress_bar.js"></script> </head> <body onload="log_msg('body loaded');"> <p>Paragraph 1</p> <img src="http://localhost:1515/get_image.ashx" style="height:200" /> <script type="text/javascript">log_msg("inline call");</script> <p>Paragraph 2</p> </body> </html> var counter = 1; log_msg('head loaded') function log_msg(message) { console.log(message + ": counter = " + counter); var arr_p = []; for (var i = 0; i < document.getElementsByTagName('p').length; i++) { arr_p.push(document.getElementsByTagName('p')[i]); } console.log(arr_p); counter++; } var window_loaded = false; window.onload = function () { log_msg('window loaded'); window_loaded = true; $("#div_bar").remove(); } $(document).ready(function () { log_msg("jQuery document ready"); if (!window_loaded) { var div_bar = $('<div id="div_bar" style="position:fixed; top:0; left:0; background-color:rgba(0,0,0,0.6) "/>').css("height", window.innerHeight).css("width", window.innerWidth); div_bar.append($('<div style="position:fixed;top:40%;left:48%;color:#fff"/>').text("loading...")); $("body").append(div_bar); } }); progress_bar.js
- 12. 12 jquery each jquery each.html <html> <head> <title>jQuery array iterator</title> <script src=/slideshow/course-js-day-4/62504564/"http:/code.jquery.com/jquery-2.1.1.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $.each($("span"), function (i, val) { console.log(i); console.log(val); }); }) </script> </head> <body> <div> <p class="main_p"> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet feugiat ipsum.</span><br /> <span>Phasellus quis magna nulla. Ut non ornare metus, sit amet posuere dui.</span><br /> <span>Quisque placerat libero lacus, sit amet cursus mauris scelerisque vel.</span><br /> <span>Nunc ipsum justo, tempor sed felis in, porta elementum erat. Ut scelerisque iaculis sapien.</span><br /> <span>Integer a elit ultrices nisi gravida faucibus vitae non lacus.</span><br /> <span>Vestibulum convallis sagittis imperdiet. Donec lacinia sollicitudin tincidunt. Morbi vel viverra arcu, in convallis est.</span> </p> </div> </body> </html>
- 13. 13 jQuery.ajax $.ajax.html <html> <head> <title>jQuery AJAX</title> <script src=/slideshow/course-js-day-4/62504564/"http:/code.jquery.com/jquery-2.1.1.min.js"></script> <script> function load_data() { $.ajax( { url: "http://localhost:1515/get_json.ashx" }).done( function (data) { $(data).each(function (i, lang) { var option = $("<option />").val(lang.Name).text(lang.Name); $("#langs").append(option); }); } ).fail( function () { alert("error when call server"); }); } </script> </head> <body> <button type="button" onclick="load_data()">Load</button> <select id="langs"></select> </body> </html>
- 14. 14 $.getJSON <html> <head> <title>jQuery AJAX</title> <script src=/slideshow/course-js-day-4/62504564/"http:/code.jquery.com/jquery-2.1.1.min.js"></script> <script> function load_data() { $.getJSON("http://localhost:1515/get_json.ashx").done( function (data) { $(data).each(function (i, lang) { var option = $("<option />").val(lang.Name).text(lang.Name); $("#langs").append(option); }); } ).fail( function () { alert("error when call server"); }); } </script> </head> <body> <button type="button" onclick="load_data()">Load</button> <select id="langs"></select> </body> </html> $.getJSON.html
- 15. 15 getJSON, post $.ajax({ dataType: "json", url: url, data: data, success: success }); $.getJSON() $.ajax({ type: "POST", url: url, data: data, success: success, dataType: dataType }); $.post()
- 16. 16 jQuery.UI 亰 从仂仂弍从亳 仗仂亟亟亠亢亳于舒亠 弍仂仍仂亠 从仂仍亳亠于仂 UI 亠从仂于 弌仂仂亳 亳亰 js 从亳仗舒 亳 css 舒亶仍舒 亠仄 丐亠仄 仂仂仄仍亠仆亳 舒从亳于仆仂 舒亰舒弍舒于舒ﾑ 仂仂弍亠于仂仄 亠从仂仍从仂 舒仆亟舒仆 于亳亟亢亠仂于 弌弍仂从 jquery.ui 仄仂亢仆仂 从舒仂仄亳亰亳仂于舒
- 17. 17 jQuery.UI draggable <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Draggable - Default functionality</title> <script src=/slideshow/course-js-day-4/62504564/"https:/code.jquery.com/jquery-1.10.2.js"></script> <script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script> <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/ui-lightness/jquery-ui.css"> <style> #draggable { width: 150px; height: 150px; padding: 0.5em; } </style> <script> $(function () { $("#draggable").draggable(); }); </script> </head> <body> <div id="draggable" class="ui-widget-content"> <p>Drag me around</p> </div> </body> </html> Source: http://jqueryui.com/draggable/
- 18. 18 jQuery.datepicker <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Datepicker - Default functionality</title> <script src=/slideshow/course-js-day-4/62504564/"https:/code.jquery.com/jquery-1.10.2.js"></script> <script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script> <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/ui- lightness/jquery-ui.css"> <script> $(function () { $("#datepicker").datepicker(); }); </script> </head> <body> <p> Date: <input type="text" id="datepicker"> </p> </body> </html> $.datepicker.html
- 19. 19 jQuery pros 亠仆 仆从亳仂仆舒仍仆舒 弍亳弍仍亳仂亠从舒 亳亰从亳亶 仗仂仂亞 于仂亢亟亠仆亳 仂仍仂亠 从仂仍亳亠于仂 舒亳亠仆亳亶 亳 仗仍舒亞亳仆仂于 丱仂仂舒 亳仆舒从舒, 仍亠亞从仂 亳仗仂仍亰仂于舒 亟仍 仄舒从亠仆仂亶 舒亰舒弍仂从亳 仂弍舒亰亠仆舒 (IE6+ 亳仍亳 IE9+)
- 20. 20 jQuery cons 亠亳 仗仂磲从舒 100 仂仍舒 舒 仆从亳仂仆舒仍舒 仍亠亞从仂 亠舒仍亳亰亠仄舒 仆舒 js
- 21. 21 AngularJS <html ng-app> <head> <title>AngularJS</title> <script src=/slideshow/course-js-day-4/62504564/"https:/ajax.googleapis.com/ajax/libs/angularjs/1.3.0- beta.17/angular.min.js"></script> </head> <body> <div> <label>Name:</label> <input type="text" ng-model="yourName" placeholder="Enter a name here"> <hr> <h1>Hello {{yourName}}!</h1> </div> </body> </html> AngularJS.html
- 22. 22 AngularJS 亠于舒舒亠 HTML+JS+CSS 于 MVC 仗亳仍仂亢亠仆亳亠 舒亰于亳于舒亠 Google 亳 仂仂弍亠于仂仄 舒亰仄亠 亢舒仂亞仂 ~ 110 仆仂亞仂从舒仆仂 仗仂于舒亠 仂亰于亳于仂 舒亶舒 仄亠亠 仆亠从仂仂亠 于仂亠仆仆亠 亠从
- 23. 23 <html ng-app> <head> <title>AngularJS</title> <script src=/slideshow/course-js-day-4/62504564/"https:/ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script> <script type="text/javascript"> function UserController($scope) { $scope.User = { Name: "", WelcomeMessage: function () { return "Hello " + $scope.User.Name + "!"; } }; } </script> </head> <body> <div ng-app="" ng-controller="UserController"> <label>Name:</label> <input type="text" ng-model="User.Name" placeholder="Enter a name here"> <hr> <h1>{{User.WelcomeMessage()}}</h1> </div> </body> </html> AngularJS controllers AngularJS controllers.html
- 24. 24 AngularJS <html ng-app> <input type="text" ng-model="yourName" placeholder="Enter a name here"> 弌仗亠亳舒仍仆亠 HTML 亟亳亠从亳于 AngularJS <h1>Hello {{yourName}}!</h1> 于仂亶仆亠 亳亞仆亠 从仂弍从亳 亟仍 舒弍仂 仗亠亟舒于仍亠仆亳亠仄 <div ng-app="" ng-controller="UserController"> function UserController($scope) { 仂仆仂仍仍亠 仂弍磦仍ﾑ 亠亠亰 亟亳亠从亳于
- 26. 26 NodeJS JavaScript Back-end 仗仂仍亰亠 Google V8 仂仗仍舒仂仄亠仆仆亶 仄亠亠 于仂亶 仄亠仆亠亟亢亠 仗舒从亠仂于 https://github.com/joyent/node
- 29. 29 KnockoutJS MVVM 弌仂亰亟舒仆 仂亟仆亳从仂仄 Microsoft, 仍亳亠仆亰亳 MIT 弌仂亟亠亢亳 UI 仍亠仄亠仆
- 30. 30 Contacts Thank You and We Look Forward to Working with You Auriga, USA 92 Potter Rd, Ste 1 Wilton, NH 03086, USA Phone: +1 (866) 645-1119 Fax: +1 (603) 386-6097 info@auriga.com www.auriga.com Auriga, Russia 125 Varshavskoe Shosse, Unit 16A Moscow, 117587 Tel:+7 (495) 713-9900 Fax:+7 (495) 939-0300 info@auriga.com www.auriga.com