- Richard Feynman -
Introduction to JavaScript
Work in progress. This introduction is so far a reference with example of some features of JavaScript and not a book on JavaScript in itself.
Contents
JavaScript - What it is
JavaScript (/ˈdʒɑːvəˌskrɪpt/), often abbreviated as JS, is a high-level, interpreted programming language. It is a language which is also characterized as dynamic, weakly typed, prototype-based and multi-paradigm. Alongside HTML and CSS, JavaScript is one of the three core technologies of World Wide Web content engineering. It is used to make dynamic webpages interactive and provide online programs, including video games. The majority of websites employ it, and all modern web browsers support it without the need for plug-ins by means of a built-in JavaScript engine. Each of the many JavaScript engines represent a different implementation of JavaScript, all based on the ECMAScript specification, with some engines not supporting the spec fully, and with many engines supporting additional features beyond ECMA.
https://en.wikipedia.org/wiki/JavaScript (Creative_Commons_Attribution-ShareAlike_3.0_Unported_License)
First example - reacting to clicks using document.querySelector() and more
A typical use of JavaScript is to find and manipulate various elements in the document (web page). In order to get a reference to an element in the document, you can use the document.querySelector() function. The argument to the function should be a selector (element name, id or class).
Example. Finding the first <li> element and changing its font-weight to bold if the user clicks on it:
<!DOCTYPE html>
<html lang="en-US" dir="ltr">
<head><title>querySelector</title></head>
<body>
<h1>Hello</h1>
<p>
This is some text in a paragraph
</p>
<ul>
<li onclick="makeBold()">This is an item in a list</li>
<li>This is a second item</li>
</ul>
<script>
function makeBold() {
let li = document.querySelector('li'); // first li
li.style.fontWeight = 'bold';
}
</script>
</body>
</html>
The onclick attribute of the first <li> element declares an event handler for the case that the user clicks on the element. The function makeBold() is declared as the event handler for the global event onclick. In some literature, the onclick attribute is called "eventhandler". The important thing to understand, is that if someone clicks on an element with the onclick attribute set to a function, that function will be called with the corresponding Event object (in this case a click). It is optional to do something with the Event in the function which is set to handle the event. Read more about event handlers at developer.mozilla.org.
When an event handler is added using addEventHandler(), you can use the this reference inside the function to access the source element for which the event was triggered:
<!DOCTYPE html>
<html lang="en-US" dir="ltr">
<head><title>querySelector</title></head>
<body>
<h1>Hello</h1>
<p>
This is some text in a paragraph
</p>
<ul>
<li onclick="makeBold()">This is an item in a list</li>
<li>This is a second item</li>
</ul>
<script>
document.querySelector('li').addEventListener('click', makeBlue, false);
function makeBold() {
let li = document.querySelector('li'); // first li
li.style.fontWeight = 'bold';
}
function makeBlue() {
this.style.color = 'blue'; // this will be the first <li> element
}
</script>
</body>
</html>
Finally, in this first example, let's add an event handler for click also on the second LI element, and let its handler reset the style of the first LI element to normal font-weight and normal color (black):
<!DOCTYPE html>
<html lang="en-US" dir="ltr">
<head><title>querySelector</title></head>
<body>
<h1>Hello</h1>
<p>
This is some text in a paragraph
</p>
<ul>
<li onclick="makeBold()">This is an item in a list</li>
<li>This is a second item</li>
</ul>
<script>
document.querySelector('li').addEventListener('click', makeBlue, false);
document.querySelectorAll('li')[1].addEventListener('click', clear, false);
function makeBold() {
let li = document.querySelector('li'); // first li
li.style.fontWeight = 'bold';
}
function makeBlue() {
this.style.color = 'blue';
}
function clear() {
let li = document.querySelector('li'); // first li
li.style.fontWeight = 'normal';
li.style.color = 'black';
}
</script>
</body>
</html>
Links
Further reading
- developer.mozilla.org - JavaScript
- You don't know JS by Kyle Simpson (free online books)
- Douglas Crockford's video lectures on JavaScript
- Douglas Crockford's A Survey of the JavaScript Programming Language
