01219245/javascript1/tutorial2 - ประวัติรุ่นแก้ไข

Jittat: /* Let's write our game */

2016-01-25T17:29:49Z

Let's write our game

Jittat: /* Click */

2016-01-25T17:27:55Z

Click

Jittat เมื่อ 17:26, 25 มกราคม 2559

2016-01-25T17:26:12Z

Jittat เมื่อ 17:22, 25 มกราคม 2559

2016-01-25T17:22:56Z

Jittat เมื่อ 17:19, 25 มกราคม 2559

2016-01-25T17:19:46Z

Jittat: /* Remove alerts */

2014-02-19T11:52:15Z

Remove alerts

Jittat: /* Ready */

2014-01-28T16:48:37Z

Ready

Jittat: /* Ready */

2014-01-28T16:48:14Z

Ready

Jittat: /* Remove alerts */

2014-01-27T16:50:45Z

Remove alerts

Jittat เมื่อ 16:50, 27 มกราคม 2557

2014-01-27T16:50:06Z

@@ แถว 465: / แถว 465: @@
 {{gitcomment|Let's commit our work}}
-{{Callta|6. When your program can report the result of your guess, call the TA to check your understanding.}}
+{{Callta|7. When your program can report the result of your guess, call the TA to check your understanding.}}
 === Remove alerts ===
@@ แถว 490: / แถว 490: @@
 {{gitcomment|Let's commit our work.}}
 === Exercises ===
@@ แถว 496: / แถว 498: @@
 '''Ex.2:''' Add the counter.  Make sure that the number of guesses (last line) changes as we keep making guesses.
 '''Ex.3:''' Right now after we guess correctly, we can keep on playing.  Clearly, this is not fun because the solution is the same over rounds, and you have to reload the page to get a new solution to try.  Add another button called <tt>reset</tt> and if you click this button, all the memories are all gone.

←รุ่นแก้ไขก่อนหน้า		รุ่นแก้ไขเมื่อ 17:27, 25 มกราคม 2559
แถว 464:		แถว 464:

	{{gitcomment\|Let's commit our work}}		{{gitcomment\|Let's commit our work}}
		+
		+	{{Callta\|6. When your program can report the result of your guess, call the TA to check your understanding.}}

	=== Remove alerts ===		=== Remove alerts ===

@@ แถว 338: / แถว 338: @@
 * What happens at line *****?
 * Do you see any automatic type conversion?
 ==== Reading the input ====
@@ แถว 365: / แถว 367: @@
 {{gitcomment|OK, this is the last commit}}
 == Let's write our game ==

@@ แถว 158: / แถว 158: @@
 {{gitcomment|Try the code, and commit the current changes.}}
 ==== Passing functions ====
@@ แถว 222: / แถว 224: @@
 If you are going to write a function that is called once, defining it an anonymous function sometimes save you from thinking about new names.  It is more direct and very natural for JavaScript.  You will see more usages of anonymous functions later on.
 ==== Two buttons: id and class ====
@@ แถว 269: / แถว 269: @@
 There are other ways to select elements, but this two selection should be enough for us for now.
 ==== Ready ====

@@ แถว 70: / แถว 70: @@
 You must add the commit message by yourself.
 === Including JavaScript in a web page ===
@@ แถว 100: / แถว 102: @@
 You can add <tt>onclick</tt> attributes to buttons, links, and many elements.  If we have to do that for many elements in the web page, it can be very messy.  jQuery has a nice way we can deal with this mess.
 === Using jQuery ===
@@ แถว 156: / แถว 160: @@
 ==== Passing functions ====
 When registering a function for a click event in
@@ แถว 215: / แถว 222: @@
 If you are going to write a function that is called once, defining it an anonymous function sometimes save you from thinking about new names.  It is more direct and very natural for JavaScript.  You will see more usages of anonymous functions later on.
 ==== Two buttons: id and class ====

@@ แถว 454: / แถว 454: @@
 We will use the first line (which currently says 'Guess the number!') to shows the message.  Let's add an <tt>id</tt>.  It should look like:
     <p id="gameMessage">
       Guess the number!
     </p>
 Now, we can just change all calls to <tt>alert</tt> to set the text of <tt>#gameMessage</tt> directly like this

←รุ่นแก้ไขก่อนหน้า		รุ่นแก้ไขเมื่อ 16:48, 28 มกราคม 2557
แถว 284:		แถว 284:

	$(function() {		$(function() {
		+	// your code here
	});		});

@@ แถว 262: / แถว 262: @@
 ==== Ready ====
-As a common practice, we should work on the DOM elements after the web page is loaded.  To do so, jQuery provides [http://api.jquery.com/ready/ .ready] function.  It is a rather technical practice; right now, you can just remember how to do it.
+As a common practice, we should work on the DOM elements after the web page is loaded.  To do so, jQuery provides the [http://api.jquery.com/ready/ .ready] function that you can use to specify a function to be called after the DOM is ready.   It is a rather technical practice; right now, you can just remember how to do it.
 Let's change the click registration of our code to
-  $(function(){
+  $( document ).ready(function() {
     $("#button1").click(update);
   });
-Note that we wrap our old code inside an anonymous function that is passed to function '''<tt>$</tt>'''.
+The object '''<tt>document</tt>''' in the code above refers to the current document.  Function '''<tt>$</tt>''' is the jQuery function that takes the <tt>document</tt> object and return a jQuery object so that we can use jQuery's library to work with.  We pass an anonymous function to method <tt>.ready</tt> to tell jQuery to execute this function when the page is ready.  Note that we wrap our old code inside this anonymous function.
 As a quick summary, put all your jQuery registration and DOM-element modification in the wrapper like this:
-  $(function(){
+  $( document ).ready(function() {
     // your code here
   });
 {{gitcomment|Let's commit at this point.}}
 ==== Modifying texts ====

@@ แถว 460: / แถว 460: @@
 We can now replace all calls to <tt>alert</tt> with <tt>setMessage</tt> to remove all alerts.
-: ''Let's commit our work.''
+{{gitcomment|Let's commit our work.}}
 === Exercises ===

@@ แถว 97: / แถว 97: @@
 Note a weird indentation.  To help writing JavaScript code better, I remove one-step of indentation from the script block.
-: ''You should click to play with it, if it works, commit the change.''
+{{gitcomment|You should click to play with it, if it works, commit the change.}}
 You can add <tt>onclick</tt> attributes to buttons, links, and many elements.  If we have to do that for many elements in the web page, it can be very messy.  jQuery has a nice way we can deal with this mess.
@@ แถว 153: / แถว 153: @@
 The selector '''<tt>button</tt>''' selects all button elements in the page. The '''<tt>.click(update);</tt>''' part registers function '''<tt>update</tt>''' to the <tt>onclick</tt> event.
-: ''Try the code, and commit the current changes.''
+{{gitcomment|Try the code, and commit the current changes.}}
 ==== Passing functions ====
@@ แถว 278: / แถว 278: @@
   });
-: ''Let's commit at this point.''
+{{gitcomment|Let's commit at this point.}}
 ==== Modifying texts ====
@@ แถว 311: / แถว 311: @@
 Try the page to see how it works.
-: ''OK, let's commit at this point.''
+{{gitcomment|OK, let's commit at this point.}}
 A few questions to think about:
@@ แถว 343: / แถว 343: @@
 Change the code so that after you click reset, the value of the text box becomes the value of the counter.
-: ''OK, this is the last commit''
+{{gitcomment|OK, this is the last commit}}
 == Let's write our game ==
@@ แถว 389: / แถว 389: @@
 </syntaxhighlight>
-: ''If it looks OK, we should commit.''
+{{gitcomment|If it looks OK, we should commit.}}
 === Adding jQuery and JavaScript block ===
@@ แถว 399: / แถว 399: @@
   </script>
-: ''Try to reload the page and see if there's any error on the JavaScript console.  If every works, just commit the change.''
+{{gitcomment|Try to reload the page and see if there's any error on the JavaScript console.  If every works, just commit the change.}}
 === Click ===
@@ แถว 438: / แถว 438: @@
 At this point, the program should just <tt>alert</tt> the message.  Try guessing with 30, 60, and 55 to see if the check works properly.
-: ''Let's commit our work''
+{{gitcomment|Let's commit our work}}
 === Remove alerts ===