JavaScript - Revision history

Todd: /* JavaScript Language Components */

2020-03-02T16:00:56Z

JavaScript Language Components

Connor: /* Variables and Scope */

2019-10-11T19:35:17Z

Variables and Scope

Andrew at 19:03, 1 October 2018

2018-10-01T19:03:43Z

Andrew at 18:42, 1 October 2018

2018-10-01T18:42:39Z

Alex: /* Events */

2018-02-05T18:13:25Z

Events

Alex at 18:12, 5 February 2018

2018-02-05T18:12:32Z

Alex: /* Variables and Scope */ New variable declarations

2018-02-05T18:05:35Z

Variables and Scope: New variable declarations

Todd: /* JavaScript Language Components */

2017-07-10T20:01:02Z

JavaScript Language Components

Todd: /* JavaScript Language Components */

2017-07-10T20:00:38Z

JavaScript Language Components

Alex: Unprotected "JavaScript": There's not a good reason for this page to be protected

2017-03-18T13:59:39Z

Unprotected "JavaScript": There's not a good reason for this page to be protected

@@ Line 13: / Line 13: @@
 This section highlights some features of the JavaScript language that differentiate it from other languages.  For a more comprehensive JavaScript tutorial, the following tutorials are both quality:
-* [https://webplatform.github.io/ WebPlatform]: Great for learning JavaScript for the first time.  Advocates best practices for modern JavaScript development.
+* [https://developer.mozilla.org/en-US/docs/Web/JavaScript Mozilla Developer Network]: Great for learning JavaScript for the first time.  Advocates best practices for modern JavaScript development.
-* [http://www.quirksmode.org/js/contents.html QuirksMode]: More advanced than the WebPlatform tutorial, but it thoroughly covers the most powerful aspects of pure JavaScript and gives unparalleled advice on browser compatibility.
+* [http://www.quirksmode.org/js/contents.html QuirksMode]: More advanced than the Mozilla tutorial, but it thoroughly covers the most powerful aspects of pure JavaScript and gives unparalleled advice on browser compatibility.
 Advice: Do '''NOT''' Google for "JavaScript Tutorial".  The first few hits advocate bad or outdated practices.  Stick with the ones listed here.

@@ Line 32: / Line 32: @@
 </source>
-'''Note: We should NOT see any variables initialized with var in your code.'''
+'''Note: We should NOT see any variables initialized with var in your code. Some might appear in the linked examples, since those are from older versions of the language so please replace those with let and const in your mind'''
 Var creates ambiguity to anyone reading your code and is becoming deprecated in JavaScript.

← Older revision		Revision as of 19:03, 1 October 2018
Line 93:		Line 93:

	sayHello("Todd"); // call the function and pass an argument		sayHello("Todd"); // call the function and pass an argument
		+	</source>
		+
		+	====Arrow Functions====
		+	The latest versions of JavaScript have introduced arrow functions. They provide a cleaner syntax for writing functions, and maintain scope when using classes.
		+
		+	The general syntax is:
		+	<source lang="javascript">
		+	(param1, param2, ... , paramN) => { statements }
		+
		+	//removing the brackets around { statements } is equivalent to
		+	{ return statements; }
		+
		+	//No parameters should be 2 empty parentheses as such:
		+	() => { statements }
		+	</source>
		+
		+	The example above could be written as follows:
		+
		+	<source lang="javascript">
		+	const sayHello = (name) => alert("Hello, "+name);
		+	sayHello("Todd");
		+	</source>
		+
		+	Arrow functions can be particularly useful when you're looking to contain function logic within cleanly and compactly. For example, iterating over an array and making updates to each item of the array.
		+	<source lang="javascript">
		+	let arr = [1,2,3,4,5];
		+	let newArr = arr.map(number => number*5); //newArr is an array containing [5,10,15,20,25]
	</source>		</source>

@@ Line 31: / Line 31: @@
 const foo = "bar";
 </source>
 All variables are objects.  In the case above, the variable '''foo''' is an object of the class '''String'''.

@@ Line 223: / Line 223: @@
 <source lang="javascript">
 document.getElementById("hello").addEventListener("click", function(event){
-	alert("Hello, World!  Event Type: "+event.type);
+	alert(`Hello, World!  Event Type: ${event.type}`);
 }, false);
 </source>

@@ Line 61: / Line 61: @@
 <source lang="javascript">
-var apple = {
+const apple = {
 	color: "red",
 	flavor: "sweet",
@@ Line 99: / Line 99: @@
 <source lang="javascript">
-var sayHello = function(){
+const sayHello = function(){
 	alert("Hello World");
+}
@@ Line 119: / Line 119: @@
 <source lang="javascript">
-var a = "hello";
+const a = "hello";
 (function(){
-	var b = "world";
+	const b = "world";
 	alert(a); // hello
@@ Line 177: / Line 177: @@
 <source lang="javascript">
-var sayThisColor = function(){
+const sayThisColor = function(){
 	alert(this.color);
+}
-var apple = { color: "red" }
+const apple = { color: "red" }
 sayThisColor();   // undefined
@@ Line 196: / Line 196: @@
 <source lang="javascript">
-var sayHello = function(){
+const sayHello = function(){
 	alert("Hello World");
+}
@@ Line 235: / Line 235: @@
 <source lang="javascript">
 document.getElementById("my_btn").addEventListener("click", function(event){
-	var strout = "";
+	let strout = "";
 	for(var i in event){
-		strout += i + ": " + event[i] + "\n";
+		strout += `${i}: ${event[i]}\n`;
+	}
 	console.log(strout);
@@ Line 307: / Line 307: @@
 <source lang="javascript">
-var disableToolbarFunc = function(e){
+const disableToolbarFunc = function(e){
 	e.stopPropogation();
+}
@@ Line 385: / Line 385: @@
 <source lang="javascript">
-var newLi = document.createElement("li");  // creates a node with the tag name li
+const newLi = document.createElement("li");  // creates a node with the tag name li
 newLi.appendChild(document.createTextNode("Broccoli"));
 newLi.setAttribute("class", "veggies");
@@ Line 394: / Line 394: @@
 <source lang="javascript">
-var apple = document.getElementById("my-list").getElementsByClassName("fruits")[0];
+const apple = document.getElementById("my-list").getElementsByClassName("fruits")[0];
 document.getElementById("my-list").removeChild(apple);
 </source>
@@ Line 401: / Line 401: @@
 <source lang="javascript">
-var apple = document.getElementById("my-list").getElementsByClassName("fruits")[0];
+const apple = document.getElementById("my-list").getElementsByClassName("fruits")[0];
 document.getElementById("my-list").appendChild(apple);
 </source>

@@ Line 20: / Line 20: @@
 === Variables and Scope ===
-To define a variable in JavaScript, use the '''var''' keyword.
+To define a variable in JavaScript, use the '''let''' keyword.
 <source lang="javascript">
-var foo = "bar";
+let foo = "bar";
 </source>
@@ Line 35: / Line 41: @@
 <source lang="javascript">
-var a = "hello";
+const a = "hello";
-var b = "world";
+const b = "world";
 function sayGoodByeWorld(){
-	var a = "goodbye";
+	const a = "goodbye";
 	alert(a); // goodbye

← Older revision	Revision as of 13:59, 18 March 2017
(No difference)