Difference between revisions of "JavaScript"

From Media Design: Networked & Lens-Based wiki
Jump to navigation Jump to search
Line 13: Line 13:
 
The popularity of "live" web apps based on JavaScript like Google Maps has helped to reduce some of the differences between browsers in their implementation of JavaScript (which made early JavaScript development quite a nightmare). Also, JavaScript frameworks such as ["Prototype"] help to smooth over the remaining differences and other difficulties (such as [[EventHandling]]).
 
The popularity of "live" web apps based on JavaScript like Google Maps has helped to reduce some of the differences between browsers in their implementation of JavaScript (which made early JavaScript development quite a nightmare). Also, JavaScript frameworks such as ["Prototype"] help to smooth over the remaining differences and other difficulties (such as [[EventHandling]]).
  
== From Python ==
+
== Data types ==
  
* Curly braces ({}) instead of colons and indentation (:)
+
== Variables ==
* Indentation: still important for readability!
 
* Semi-colons at ends of lines (though optional, good to get into the practice of using)
 
* "var", "let" and "const" to announce a variable (technically optional but important to be explicit about scope)
 
* "function" defines functions, also the new "splat" style ( => )
 
* Implicit type conversion ("hello" + 7 = "hello7")
 
  
 
== Functions ==
 
== Functions ==
Line 56: Line 51:
 
</source>
 
</source>
  
 +
== Promises & Asynchronous programming ==
  
 +
* [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises Using promises]
 +
* [https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Async_await async & await]
 +
 +
== Array methods: forEach() & map() ==
 +
 +
<source lang="javascript">
 +
const array1 = ['a', 'b', 'c'];
 +
 +
array1.forEach(element => console.log(element));
 +
 +
// expected output: "a"
 +
// expected output: "b"
 +
// expected output: "c"
 +
</source>
 +
 +
See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
 +
 +
== Fetch API & making HTTP requests ==
 +
 +
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
 +
 +
== From Python ==
 +
 +
* Curly braces ({}) instead of colons and indentation (:)
 +
* Indentation: still important for readability!
 +
* Semi-colons at ends of lines (though optional, good to get into the practice of using)
 +
* "var", "let" and "const" to announce a variable (technically optional but important to be explicit about scope)
 +
* "function" defines functions, also the new "splat" style ( => )
 +
* Implicit type conversion ("hello" + 7 = "hello7")
  
 
== Resources ==
 
== Resources ==

Revision as of 10:58, 16 February 2021

Scripting language built into web browsers.

Links

Intro

Originally designed for the Netscape browser, the name "JavaScript" was chosen to associate with the "Java" programming language developed by Sun which, in 1995, was the first real option for making "live" code run over the web. Other than the name, there is no relation between JavaScript and Java. The formal name for JavaScript now is ECMAScript, but as this sounds more like a skin condition than a programming language, the name JavaScript has persisted.

The popularity of "live" web apps based on JavaScript like Google Maps has helped to reduce some of the differences between browsers in their implementation of JavaScript (which made early JavaScript development quite a nightmare). Also, JavaScript frameworks such as ["Prototype"] help to smooth over the remaining differences and other difficulties (such as EventHandling).

Data types

Variables

Functions

def hello (x):
    print "Hello", x

hello("Bob")
function hello (x) {
    console.log("Hello", x);
}

hello("Bob");

Loops

words = "Once upon a time, in a galaxy far far away".split()

for w in words:
    print w
var words = "Once upon a time, in a galaxy far far away".split(" ")

for (var i=0; i<words.length; i++) {
    console.log(words[i]);
}

Promises & Asynchronous programming

Array methods: forEach() & map()

const array1 = ['a', 'b', 'c'];

array1.forEach(element => console.log(element));

// expected output: "a"
// expected output: "b"
// expected output: "c"

See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

Fetch API & making HTTP requests

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

From Python

  • Curly braces ({}) instead of colons and indentation (:)
  • Indentation: still important for readability!
  • Semi-colons at ends of lines (though optional, good to get into the practice of using)
  • "var", "let" and "const" to announce a variable (technically optional but important to be explicit about scope)
  • "function" defines functions, also the new "splat" style ( => )
  • Implicit type conversion ("hello" + 7 = "hello7")

Resources

"Core" Documentation from mozilla.org

Online Tutorials