This document provides an introduction and overview of JavaScript. It begins by introducing the author and stating that JavaScript was originally created in 1995 for web pages. It then discusses that JavaScript is an object-based, interpreted programming language used to control HTML and dynamically create web pages. The document goes on to explain how to write and embed JavaScript code using script tags, and covers JavaScript data types, variables, objects, built-in objects like Math and Date, arrays, functions, and more.
3. Who I’m
● My name is Hazem Hagrass
● Lead Software Engineer @BADR, joined BADR @2010
● Contacts:
○ website
○ hazem.hagrass@badrit.com
○ Linkedin
4. What is JavaScript?
● JavaScript was introduced in 1995 as a way to add
programs to web pages in the Netscape Navigator
browser.
● Has almost nothing to do with the programming
language named Java. The similar name was inspired
by marketing considerations.
5. What is JavaScript?
● It is an interpreted programming language.
● It is object-based programming.
● It describes how your html should act(Logic)
6. Use of JavaScript
● Use it to add/remove elements and control DOM
○ Any dom element can be shown, hidden and changed.
● Create pages dynamically
○ Based on the user's choices, the date, or other external data,
JavaScript can produce pages that are customized to the user.
● Interact with the user
○ It can do some processing of forms and can validate user input
when the user submits the form.
7. Writing JavaScript
● Writing JavaScript code is typically embedded in the
HTML, to be interpreted and run by the client's
browser.
8. Remember!
● JavaScript code is case sensitive.
● White space between words and tabs are ignored.
● Line breaks are ignored except within a statement.
9. The SCRIPT Tag
● The <SCRIPT> tag alerts a browser that JavaScript code
follows.
● It is typically embedded in the HTML:
<SCRIPT language = "JavaScript"> statements</SCRIPT>
11. Data Types
● Object
● Function
● Numbers
● Strings
● Booleans
● null
● undefined: default value for any variable.
12. Programming Basics
● In JavaScript you don't have to declare a variable's
data type before using it.
● Any variable can hold any JavaScript data type,
including:
○ String data.
○ Numbers.
○ Boolean values (T/F)
13. Reserved Words
break case catch class const continue debugger default
delete do else enum export extends false finally for
function if implements import in instanceof interface let
new null package private protected public return static
super switch this throw true try typeof var void while with
yield
14. Variables
● To declare variables, use the keyword var and the
variable name
var userName
● To assign values to variables, add an equal sign and
the value
var userName = "Smith"; var price = 100;
15. Variables Names
● It name must start with a letter or an underscore.
firstName or _myName
● You can use numbers in a variable name, but not as
the first character
name01
● Capitalize the first letter of every word except the
first
salesTax or userFirstName
16. Objects
● JavaScript supports programming with objects.
● The different screen elements such as Web pages,
forms, text boxes, images, and buttons are treated as
objects.
● Every object has its own properties and methods.
17. Global Object
● As crockford says, the object that dare not speak of its
name.
● Variables defined by var makes it local to the scope.
● Variables should be defined by var, otherwise its a
global variable.
● Use of it should be minimized.
18. Built-in Objects
● Math – provides for math calculations
○ Format: Math.method(#)
○ Methods: abs(), log(), pow(), random(), round(),
sqrt()
● Date – provides date and time information
○ Format: new Date().method()
○ var rightNow = new Date();
var theYear = rightNow.getFullYear()
19. Built-in Objects
● String – provides for string manipulation
○ Format: stringName.method()
○ var theString = "my name";
var printString = theString.bold();
var numChars = theString.length
20. Arrays
● Inherits from Object.
● No need to provide length to create new array.
var x = [‘a’, ‘b’, ‘c’];
x.push(‘d’);
● Methods
○ concat
○ join
○ push
○ slice
○ sort
○ splice
21. Functions
● Inherits from Object.
function sum(a, b){ return a + b;}
● Functions can be contained inside other functions.
● The scope of inner function has access to continues
even if the parent function have returned.
function sum(a, b){
function sum2Numbers(x1, x2){ return x1 + x2;}
return sum2Numbers(a, b);
}
22. Functions
● Functions inside an object is called a method.
● When invoked with too many arguments, the rest are
ignored.
function sum(a, b){ return a + b;} sum(1, 1, 2);
● When invoked with fewer arguments, the rest are set
to undefined.
sum(1);