JavaScript Part 1

FFWToni Kolev

Quality Assurance Team Leader

e: toni.kolev@ffwagency.com

s: k-o-l-e-v

today’s agenda01

02

03

04

05

06

What is Dynamic HTML?

What is JavaScript?

How to JavaScript?

JavaScript Syntax

JavaScript Basics

Conditional Statements

What is DHTML?

•DHTML: collection of technologies used together to create interactive web sites

•Web pages that react and change in response to the user’s actions

•DHTML is combination of HTML + CSS + JavaScript + DOM

+ DOM*

DHTML= HTML + CSS + JavaScript

•HTML defines web sites structure and content•CSS describes the look and formatting of a document•JavaScript defines dynamic behavior

- Programming logic for interaction with the user- Handle user events

DOM ?!?Document Object Model = DOM

•Treats HTML documents as tree structure•Each elements is an object in the DOM•Each object can be manipulated programmatically•Standards by W3C•When a web page is loaded, the browser creates a DOM of the page

•With the object model, JS is fully enabled to create dynamic HTML

•The DOM is created by the layout engine

What is JavaScript?

What is JavaScript?•Alongside HTML and CSS is one of the three core technologies of WWW

•JavaScript is scripting programming language- Developed by Netscape for dynamic Web content- Lightweight, but with limited capabilities- Can be used as object-oriented language- Embedded in HTML page, interpreted by the Web browser

• Client-side, server-side, mobile and desktop technology• Dynamic (scripting) language -> weakly typed• Powerful to manipulate the DOM

JavaScript Advantages

JavaScript allows interactivity such as:• Dynamic load and change page content (through AJAX)• Implementing custom HTML UI controls (sortable tables, 3D

charts…)• Implementing advanced form validation• Respond to user actions, e.g. handle keyboard events• Performing complex calculations, e.g. SHA1 encryption• Implementing browser-based interactive games• Implementing Single Page Applications (SPA)

What can JavaScript Do?

• Can handle events, e.g. button clicks• Can read and write HTML elements and modify the DOM tree• Can access / modify browser cookies• Can detect user’s browser and OS• Can be used as object-oriented language• Can implement complex graphics / animations (through

Canvas)• Can implement back-end logic (through Node.js)

How to JavaScript?

Using JavaScript Code

Using JavaScript Code

• The JavaScript code can be placed in:<script> tag in the head<script> tag in the body

• External files (recommended), linked via <script src=“…”>• Files usually have .js extensions• The .js files are cached by the browser

<script src="scripts.js" type="text/javascript">

<!– code placed here will not be executed! -->

</script>

Modern approach to load JS files

• Attributes (async and defer) load script in background without pausing the HTML parser

• async- executed asynchronously as soon as the script is downloaded- without blocking the browser in the meantime

• defer- executed in after the entire document has been loaded

JavaScript – When is executed?

• JavaScipt code is executed during the page loading or when the browser fires an event

• All statements are executed at page loading• Some statements just define functions that can be called later• Non compile-time checks (JavaScript is dynamic language)• Function calls or code can be attached as “event handlers”

- Executed when the event is fired by the browser

JavaScript Syntax

101 of JS

JavaScript Syntax

• Similar to C#• Statements are separated by semicolons ;• Operators (+, *, =, !=, &&, ++, …)• Variables (typeless)• Conditional statements (if, else)• Loops (for, while)• Arrays(my_arr[5]) and associative arrays (my_arr[‘abc’])• Functions (can return value)• Function variables (variables holding a function reference)

JavaScript Comments

• JavaScript comments can be used to explain JavaScript code, and to make it more readable.

• JavaScript comments can also be used to prevent execution, when testing alternative code.

• Single line comments start with //• Multi-line comments start with /* and end with */

JavaScript BasicsVariables, Data Types, Operators, Arithmetic Operators, Assignment

Operators, Comparison

What is Data Type?• Data type is a domain of values of similar characteristics• Defines the type of information stored in the computer memory

(in a variable)• Examples:

Positive integers: 1, 2, 3,…Alphabetical characters: a, b, c,…Dates from the calendar: 1-Nov-2000, 3-Sep-2006

JavaScript Data Types

• JavaScript is a typeless language• The variable types are not explicitly defined• The types of a variable can be changed at runtime

Undefined and Null values

• In JS there is a special value undefined- It means that the variable has not been defined (no such variable exist in the current context)

• Undefined is different than null- null means that an object exists and is empty (has no value)

What is a variable?

• A variable is a:- Placeholder of information that can be changed at run-time- A piece of computer memory holding some value

• Variables allow you to:- Store information- Retrieve the stored information- Change the stored information

Variable Characteristics

• A variable has:- Name- Type (of stored data)- Value

• Example: var counter = 5;

Name: counterType: numberValue: 5

Declaring Variables

• Variables are declared with the keyword var• When declaring a variable we:

- Specify its name (called identifier)- Give it an initial value

• Example:var height = 200;

var str = “Hello”;

Identifiers

• Identifiers may consist of:- Letters, digits, underscore, dollar- Cannot start with a digit- Cannot be a JavaScript keyword

• Identifiers in JavaScript are case-sensitive• Identifiers should have a descriptive name• Variable names use camelCase• Function names use camelCase

Assignment Operators

• The = operator is used to assign a value to a variable• The += operator adds a value to a variable• The -= operator substracts a value from a variable• The *= operator multiplies a variable• The /= operator divides a variable• The %= operator assigns a reminder to a variable

Arithmetic Operators• Operators +, -, *, / are the same as in math• The division operator / returns number of Infinity or NaN• Remainder operator % returns the remainder from division of

numbers• The operator ++ / -- increments / decrement a variable

Comparison Operators• == is used to compare values• === is also used to compare values but also compares the

type• != checks whether two values are not equal• !== checks whether two values are not equal or not having

equal type• > checks whether one value is greater than other value• < checks whether one value is less than other value• >= checks whether one value is greater than or equal to other

value• <= checks whether one value is less than or equal to other

value

Logical Operators

• Are used to determine the logic between variables or values• && and• || or• ! not

Conditional StatementsImplementing Conditional Logic

If…else statements• Use if to specify a block of code to be executed if a specified

condition is true• Use else to specify a block of code to be executed, if the same

condition is false• Use else if to specify new condition to test, if the first condition

is false• Use switch to specify many alternative blocks of code to be

executed

How Switch works?1. The expression is evaluated2. When one of the constants specified in a case label is equal

to the expression – the statement that corresponds to that case is executed

3. If no case is equal to the expression- If there is a default case, it is executed- Otherwise the control is transferred to the end point of the switch statement

4. The break statement exits the switch-case statement

LIVE