This document provides an overview of JavaScript basics. It discusses how websites have evolved from static pages using frames to highly interactive single page applications thanks to JavaScript. JavaScript runs in the browser and allows for interactivity through manipulating the DOM, doing calculations, fetching data, and more. The document explains how to embed JavaScript using <script> tags and control execution timing. It also covers fundamental concepts like objects, properties, methods, events, and event handlers. Code demos are provided to demonstrate "Hello World", events, scope, and using AJAX with events.

1. D I N A G O L D S H T E I N
JavaScript Basics

2. Once Upon a Time
 Websites used to be static
 Space Jam
 HUJI
 Websites used frames
 Chiyuchon Net
 Lost-World

3. Behind the Scenes
 Single HTML file for each “page”
 Hard-code content into HTML
 Static navigation menus in separate frames
 Illusion of single URL using frames

4. And Nowadays…
 Highly interactive
 Single page applications
 Gmail
 Facebook
 Online games
 2048
 Cut the Rope
 All this thanks to JavaScript (and other stuff too )

5. Achieving Interactivity
 Interactivity and “navigational smoothness” are
achieved by running code on the client-side (inside
the browser)
 There used to be several client side languages, but
eventually JavaScript won the battle
 All modern browsers support JavaScript
 There are tons of third party libraries

6. HTML and JavaScript (and CSS)
HTML: The structure of
what’s on the screen
<ol id=“ranks”>
<li>Private</li>
<li>Corporal</li>
<li>Sergeant</li>
</ol>
CSS: Styling commands
for what’s on the screen
li { color: red }
ol { background: ... }
JS: Code that runs in the
background – the app’s
business logic
var list =
document.getElementById(
“ranks”);
var captain =
document.createElement(
“li”);
captain.innerHTML =
“Captain”;
list.appendChild(captain);
The
DOM

7. What Can JavaScript Do?
 Manipulate the DOM
 Create
 Remove
 Style
 Do mathematical calculations
 Store information in local storage and files
 Access the user’s location
 Draw shapes on the screen
 Fetch data from a web server

8. How Does it Work?
 Embed the <script></script> tag in your HTML:
 Inline
<script type=“text/javascript”>
// code goes here
</script>
 Or external (usually preferred)
<script type=“text/javascript” src=“script.js”/>
 If no configurations are present, browser executes
script as soon as it sees it before parsing the rest of
the HTML

9. Head or Body?
DEMO

10. Controlling Execution Time
 window.onload – will be executed when page has
completely loaded all content (including images,
script files, CSS files, etc.)
 document.ready – will be executed after the DOM is
ready (but might be before some content is loaded)
 Easy to use with jQuery: $(function () { ... })
 This is usually where you want to attach events, etc.

11. Fundamental JavaScript Concepts
var kitty = {
name: “Svetlana”,
age: 7,
purr: function () { console.log(“Purr...”); }
};
kitty.age = kitty.age + 1; // Happy birthday
kitty.purr();
var btn = document.getElementById(“myButton”);
btn.addEventListener(“click”, function () { ... });
Property
Method
Object
Event
Event
handler

12. Hello World (and More)
DEMO

13. Events and Scope
DEMO

14. Events and AJAX
DEMO