JavaScript
Dynamic and Interactive Content
What is JavaScript
Dynamic programming language that, when applied to an HTML document, can provide dynamic
interactivity on websites.
Tools used within this course.
http://brackets.io/
https://developers.google.com/web/tools/chrome-devtools/
Welcome to JavaScript
Write an alert in your browser.
Try it in your browser console.
Where can you write JavaScript
As attributes
In script tag (head section or in body)
As a linked js file
Write JavaScript
console.dir(document);
console.log('hello');
document.querySelector('h2').innerHTML = "hello world";
JavaScript Code
White space
Comment blocks
Comments
Quotes single and double
Spacing on code
Reserved words
JavaScript Variables
EXERCISE:
Used to store data Output the variable c as "Hello World" into the
console of your browser when the page loads.
Variables in Action
Rules
● Names can only contain letters, digits, underscores or dollar signs
● Must begin with a letter or $ or _
● Cannot use a reserved word in JavaScript
● Names are case sensitive
Assignment operator
= assigns a value to Variable
Variables in Action
Variables need to be declared
Can declare empty
Can declare with other variables separated by comma
Data Types
Datatypes are used to solve
Types are dynamic in JavaScript
You can use double or single quotes for strings
Numbers have no quotes can be decimal as well
Booleans are either true or false
Arrays and Objects get covered later in the course
Find the type by using typeOf “string”
Operators and Assignments
Math operators + - * /
Increment ++ --
Modulus %
Assignment operators
= += =+ *= /=
Operators
Comparison Operators - used to check equal == greater than > less than < returns Boolean value
Logical Operators - used to combine and compare
Functions
Function allow you to execute a block of code.
Functions are one of the fundamental building blocks in
JavaScript.
Exercise #2
Exercise #2
1. Create 3 buttons and 3 variables
2. Each button invokes a separate function
3. Each function adds one every time a button is clicked.
4. All the 3 variable values are output to the h2 element
JavaScript Objects
Contain more values in a single
variable. Combination of
properties with values.
Exercise 3
Favorite Things Object
Select something, your computer, car, house, friend and describe them as a JavaScript object. What
are their properties and what are those values?
Arrays and Array methods
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Ar
ray
JavaScript Conditions
Lets you apply logic
JavaScript Switch
Execute code depending on the value of
the switch statement
JavaScript Loops
For loop
Loop Array data
Iterate through Object Data
Do Loop
While Loop
Document Object Model
Selecting elements
Adding eventListeners
Updating HTML content
Thank you
Thank you for taking the course, and reading this PDF. If you have any questions of suggestions
please connect with me on Udemy.
https://www.udemy.com/user/lars51/
Laurence Svekis
