Introduction to Javascript
  • Welcome
  • Let's understand our IDE (Development Tool) - Sublime Text
  • Let's understand our IDE (Development Tool) - JSBIN
  • What can Javascript do? - a preview to the super powers!
  • Where to put Javascript?
Javascript Language Basics
  • How to see the output?
  • Syntax
  • Comments
  • Statements
  • Variables
  • Declaring (Creating) JavaScript Variables
  • Use a single var keyword to create three variables with the following values
  • Display the sum of 5 + 10, using two variables x and y.
  • Operators
  • Use the Multiplication (*) operator to display multiplication of 2 numbers
  • Display the difference of 10 - 5, using two variables x and y.
  • Display the result of 10 / 5, using two variables x and y.
  • Find the remainder when 15 is divided by 9, using two variables x and y.
  • Use the += operator to add a value of 5 to the variable x.
  • Use the -= operator to subtract a value of 5 from the variable x.
  • Use the *= operator to multiply the variable x with 5.
  • Use the /= operator to divide the variable x with 5.
  • Use the %= operator to assign a remainder of 10 / 3 to the variable x.
  • Using += operator to concatenate String
  • Data Types
  • Functions
  • Call the function.
  • Figure out what is wrong with the function - fix it and run it as it should!
  • Use the function to display the product of 5 * 5.
  • Use the function to display "Hello John".
  • Define a function named "myFunction", and make it display "Hello World!" in the

    element.

  • Objects
  • Display "John" by extracting information from the person object.
  • Add the following property and value to the person object: country: USA
  • Create an object called person with name = John, age = 50. Then, access the object to display "John
  • Scope
  • Events
  • The

    element should do something when someone clicks on it. Try to fix it!

  • When the button is clicked, trigger myFunction() with an event.
Data Types
  • Strings
  • Assign the string "Hello World!" to the variable txt.
  • Use the length property to display the length of the txt variable's value.
  • The string below is broken - use escape characters to display the text correctly.
  • String Methods - Part 1
  • String Methods - Part 2
  • Display the position of the first occurrence of "World" in the variable txt.
  • Use the slice() method to display only "Banana,Kiwi".
  • Use the replace() method to replace "World" with "Universe".
  • Convert the value of txt to lower case.
  • Convert the value of txt to upper case.
  • Use the concat() method to join the two strings: str1 and str2.
  • Numbers
  • Create a variable called myNumber, assign the value 50 to it, and display it.
  • The value of z should be 11. Find out what's wrong and fix it.
  • Number Methods
  • Math Object
  • Use the random() method to display a random number.
  • Fix the code to display the number with the highest value.
  • Round "7.3" to the nearest integer, and display it.
  • Display the square root of "9".
  • Math.random()
  • Dates
  • Create a Date object to display the date and time for 1st January, 2017.
  • Date Formats
  • Date Methods
  • Arrays
  • Create an array named cars, assign the values "Saab", "Volvo" and "BMW" to it, and display it.
  • Display the "Volvo" item of the cars array.
  • Change the first item of cars to "Opel" by referring to the index number,and display the whole array
  • Use the length property to display the number of array items in cars.
  • Use the length property to add a new item to cars: Mercedes.
  • Array Methods
  • Use the pop() method to remove the last item from the fruits array.
  • Use the push() method to add a new item to fruits: Kiwi.
  • Use the splice() method to remove "Orange" and "Apple" from fruits.
  • Use the concat() method to concatenate girls and boys.
  • Sorting Arrays
  • Use the sort() method to sort the array alphabetically.
  • Booleans
Objects
  • Objects and the 'this' keyword
  • Object Property
  • Object Methods
  • Object Prototype
  • Response to Question: Pass by Value v/s Pass by Reference
Comparison & Logical Operators
  • Comparison Operators
  • Choose the correct comparison operator to display "true", when: 5 is less than 7.
  • Choose the correct comparison operator to display "true", when: 10 is greater than 7.
  • Choose the correct comparison operator to display "true", when: 10 is equal to 10.
  • Choose the correct comparison operator to display "true", when: 10 is NOT equal to 8.
  • Logical Operators
Conditional Statements
  • If...Else Statements
  • Use the if statement to output some text if 5 is greater than 2.
  • 1. Write an if statement with the following condition: 10 is greater than 5. 2.
  • Change the value of the variable firstName to make the if statement run.