JavaScript Getting Started

JavaScript Getting Started

• 2.
  JavaScript Getting Started
• 3.
  Who I’m ● Myname 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 ● WritingJavaScript code is typically embedded in the HTML, to be interpreted and run by the client's browser.
• 8.
  Remember! ● JavaScript codeis 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>
• 10.
  Implementing JavaScript ● Embeddingcode. <SCRIPT> alert(“HELLO WORLD”); </SCRIPT> ● External file. <SCRIPT SRC="filename.js"> </SCRIPT>
• 11.
  Data Types ● Object ●Function ● Numbers ● Strings ● Booleans ● null ● undefined: default value for any variable.
• 12.
  Programming Basics ● InJavaScript 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 casecatch 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 declarevariables, 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 ● Itname 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 supportsprogramming 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 ● Ascrockford 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 fromObject. ● 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 fromObject. 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 insidean 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);
• 23.
  Thank You Any Questions?