JavaScript Basics

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

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

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

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

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

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

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

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

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.

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

JavaScript Basics

More Related Content

What's hot (20)

Similar to JavaScript Basics (20)

More from Dina Goldshtein (17)

Recently uploaded (20)

JavaScript Basics

Editor's Notes