Intro To Javascript

by Halah Al-Shaikhly

Objectives for today's lecture 

• what is code and programming languages?
• Web applications and javascript
• Why javascript is awesome
• Javascript Syntax
• Javascript examples and exercises

Web applications and Javascript

Web Application components

Frontend

Programming languages for front end

Page with no style

Backend/serverside

The Data

Why Javascript is awesome?

Javascript syntax time!

Instructions

var a = 10;

Coding time!

• Open sublime text editor, atom text editor or

• Open Repl. https://repl.it/languages/javascript_web

• Open developer’s tool on your chrome/firefox browser using this command (command + shift + j or sometimes i). Or Right click anywhere on your browser’s window and click inspect and click on the console tab.

• If you’re using windows PC or/and IE .. download chrome and use it to order a new MacBook.  

• IE: Open Tools -> Developer Tools

• Safari : Develop -> Show web inspector

Try it yourself

// variable a to store the value10

var a =10 ;

//variable b to store the value 2

var b = 2;

// var c to calculate the multiplication of a & b and store the value of it

var c = a * b;

// prints the result to your console.

console.log(c);

Exercise Time : Age Calculator

// variable called year

var year = 1989;

//variable called now
var now  = 2016;

//variable called age
var age  = now - year;

// console.log is used to print out whatever between the parathensis
console.log(age);

Console.log('hello world');

• it logs what is inside the parentheses to your console. Try it.

• In that example, it takes a string (What is a string? It is immutable string of characters, must be between quotation marks like this ‘Halah’).

• Does the console.log take a variable? 

var a = 10;

console.log(a);

• Does it take a combination of strings and variables? 

Variable Naming

• To create a variable, you must give it a name. Are there any rules to naming variables in javascript? 

• A variable name must begin with a either letter, $ or _.

• It can contain letters, numbers, $ and _.

• They’re case sensitive, meaning a variable name aBC is different from one named abc.

• Do not use reserved words for variable names. Reserved words you say?  They’re special words reserved for javascript. Reserved for what? When you use these words, javascript understand that you’re doing something special.

• examples of reserved words : var, switch, while.

Example time!

Subtitle

Open any console and play around with these. Which one of these is not a valid variable name? Why?

• var var = 10;

• var 10 = 5;

• var $10 = 5;

• var _10 = 5;

• var 1_10  = 10;

Exercise Time

Write some code that converts temperature from Celsius to Fahrenheit and prints the results to your console.

Hints

• Hint you need a variable to store the result of celsius temperature.

• to convert from celsius to fahrenheit, you multiply the celsius by 9, then you divide by 5 and afterwards, you add 32.

• Hint: use the multiplication, division and the addition operators.

• Hint you need a variable to store the result of the conversion

• print the results to your console. Hint : use console.log()

Solution

// declare a variable to store some celsius value

var celsius = 0;

// convert the celsius to fahrenheit and store the result in a variable

var f = celsius * 9 / 5 + 32;

// print the result

console.log(f);

The end

Thank you for attending!

Hala.raad.salih@gmail.com

twitter : halinasalih

github: HalahRaadSalih

​