JavaScript: Difference between revisions

From XPUB & Lens-Based wiki
No edit summary
Line 5: Line 5:


* Nice blog post from 2020 on what simple modern javascript in a browser can do: https://jvns.ca/blog/2020/06/19/a-little-bit-of-plain-javascript-can-do-a-lot/
* Nice blog post from 2020 on what simple modern javascript in a browser can do: https://jvns.ca/blog/2020/06/19/a-little-bit-of-plain-javascript-can-do-a-lot/
* See also [[JQuery]]


== Intro ==
== Intro ==
Line 55: Line 56:
</source>
</source>


== JQuery ==


http://jquery.org
* Smooths over browser differences (Event-handling, AJAX)
* Incredibly elegant: CSS selectors to "query" the page & manipulate specific content with code
* Pre-fab widgets & behaviors (Draggable, Resizable, Droppable)
== JQuery: Hello world ==
<source lang="html4strict">
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function () {
    console.log("Hello world");
});
</head>
<body>
</body>
</html>
</source>
== JQuery: Styles Plus ==
<source lang="html4strict">
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function () {
    $("p.foo").css({'background': 'pink'});
});
</head>
<body>
<p class="foo">Hello</p>
<p>World</p>
</body>
</html>
</source>
== Extreme Functions ==
Javascript functions can be defined "in-place" and be "anonymous".
Traditional for loop:
<source lang="javascript">
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]);
}
</source>
Using jQuery's each:
<source lang="javascript">
var words = "Once upon a time, in a galaxy far far away".split(" ")
$(words).each(function (i, w) {
    console.log(w);
});
</source>
There are situations where using each is important! (For making proper closures)
== JQuery: Events ==
<source lang="html4strict">
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function () {
    $("p").click(function () {
        $(this).css({background: "aqua"});
    });
});
</head>
<body>
    <p class="foo">Hello</p>
    <p>World</p>
</body>
</html>
</source>


== Resources ==
== Resources ==
Line 148: Line 62:
"Core" Documentation from mozilla.org
"Core" Documentation from mozilla.org


* [http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Guide Core JavaScript Guide]
* https://developer.mozilla.org/en-US/docs/Web/JavaScript
* [http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference Core JavaScript Reference]


Online Tutorials
Online Tutorials
Line 156: Line 69:
* http://www.webteacher.com/javascript/
* http://www.webteacher.com/javascript/
* http://www.cs.brown.edu/courses/bridge/1998/res/javascript/javascript-tutorial.html
* http://www.cs.brown.edu/courses/bridge/1998/res/javascript/javascript-tutorial.html
== Bestest Javascript html5 video player wrapper==
*[http://mediaelementjs.com/ mediaelement.js]
== From * to Javascript ==
https://github.com/jashkenas/coffee-script/wiki/List-of-languages-that-compile-to-JS

Revision as of 10:55, 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).

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")

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]);
}


Resources

"Core" Documentation from mozilla.org

Online Tutorials

Retrieved from "https://pzwiki.wdka.nl/mw-mediadesign/index.php?title=JavaScript&oldid=190045"