Intro to javascript dom
Sponsored Links
This presentation is the property of its rightful owner.
1 / 76

Intro to Javascript & DOM PowerPoint PPT Presentation


  • 154 Views
  • Uploaded on
  • Presentation posted in: General

Intro to Javascript & DOM. Javascript Outline. Introduction Variables & data types Control Statements Arrays Functions Objects. Javascript Quick facts. Netscape was battling with IE and wanted a lightweight component to compete with Microsoft VB.

Download Presentation

Intro to Javascript & DOM

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Intro to Javascript & DOM


Javascript Outline

  • Introduction

  • Variables & data types

  • Control Statements

  • Arrays

  • Functions

  • Objects


Javascript Quick facts

  • Netscape was battling with IE and wanted a lightweight component to compete with Microsoft VB.

  • Created by Brendan Eich(creator of mozillafoundation)in 1995 while at Netscape.

CSE 3345


Javascript Quick facts

  • Javascript was described by Brendan as, “something that had to ‘look like Java’ only less so and be Java’s dumb kid brother or boy-hostage sidekick.”

  • Had to be created in 10 days, or something worse would have been developed.

CSE 3345


Javascript Disclaimer

  • A lot of people hate javascript!

  • A lot of the people that hate javascript really just don’t understand it.

  • There are good parts and bad parts.

CSE 3345


3 Ways Use JS

  • Inline

  • Embedded

  • External

CSE 3345


Inline Example

<div onclick="alert('this is a horrible idea');">

Click me

</div>

CSE 3345


Embedded Example

<html>

<head>

<scripttype="text/javascript">

window.onload=function(){ alert('window loaded');};

</script>

</head>

</html>

CSE 3345


External Example

index.html

<html>

<head>

<!-- Make sure you always use an opening and closing <script> tag;

else your script might not load -->

<scripttype="text/javascript"src="test.js"></script>

</head>

</html>

test.js

window.onload=function(){ alert('window loaded');};

CSE 3345


Same as CSS

  • Reasons to use each method are the same as CSS.

  • External is preferred!

CSE 3345


JS characteristics

  • It is a dynamic and weakly typed language.

  • Dynamic type means that there are no compile time checks to deduce variable type and type conversions.

  • Weakly typed mean the language will figure out for itself how to convert variables of different type.

CSE 3345


Strongly Typed Example

Test.java:

publicclass Test {

publicstaticvoid main(String args[]){

String x ="2";

intnum=7;

num+= x;// Integer.parseInt(x);

System.out.println(num);

}

}

Test.java:6: error: inconvertible types

num += x;// Integer.parseInt(x);

^

required: int

found: String

1 error

CSE 3345


Weakly Typed Example

var x ="2";

varnum=7;

num+= x;

console.log(num);//72

CSE 3345


Outputting text to the console

  • The web console provides a heads up display for the web by letting users see error messages and other logged information.

  • console.log() – Outputs a message to the web console. Extremely useful for debugging!


Outputting text to the console

Print strings

console.log(“Hello “ + “world!”);

Print objects

var foo = ‘hello’;

var bar = 0x01;

console.log(foo + “ “ + bar + “!”);


Javascript Outline

  • Introduction

  • Variables & data types

  • Control Statements

  • Arrays

  • Functions

  • Objects


Declaring variables

  • Variables are declared using the var keyword.

  • Javascript does not allow variables to be declared with a specific type (int, float, boolean, etc).

  • Javascript does have different data types


Javascript types

typeof4;// number

typeof0xFF;// number

typeofx;// undefined

typeoftrue;// boolean

typeof"String";// string

typeof{};// object

typeof[];// object

typeoffunction(){ alert("hi!");};// function


To var, or not to var?

  • Any variable declared without the varkeyword becomes a global variable.

  • That means un-varred variables in methods automatically are global.

CSE 3345


Truthy and falsy values

Any value can be converted to a boolean according to the following rules:

  • false, 0, the empty string (“”), NaN, null, and undefined all become false.

  • All other values become true.

CSE 3345


Truth and Falsy in Action

var c =(false==0);// true

var d =(false=="");// true

var e =(0=="");// true

//null and undefined are only equal to themselves and each other

var f =(null ==false);// false

var g =(null == null);// true

var h =(undefined == undefined);// true

vari=(undefined == null);// true

//NaN is not equivalent to anything

var j =(NaN == null);// false

var k =(NaN == NaN);// false

CSE 3345


Comparing for equality

  • The Equals operator is ==. Compares “truthy” and “falsy” values of variables.

  • Strict equals operator is ===. Always returns false when the operands are of different types.

CSE 3345


Always use ===

  • To avoid unintended results, always use the strict equals operator.

CSE 3345


String operators

  • Use the + operator to concatenate two strings together.

    var x = “hello” + “ world”;

  • Use the += operators to append two existing strings.

    var x = “hello”;

    x += “ world”;

CSE 3345


Converting strings to numbers

  • parseInt() – parses a string object and returns an integer of the specified radix or base. You should always specify a base.

    • parseInt(“010”, 2);// 2

    • parseInt(“010”, 10); // 10

  • parseFloat() – parses a string object and returns a floating point number. Always uses base 10.

    • parseFloat(“10.44”); //10.44

CSE 3345


Converting strings to numbers

  • You can also prepend a string with a + to convert the string to a number.

    varstring="50";

    console.log(string+100);// 50100

    console.log(+string+100);// 150

CSE 3345


Javascript Outline

  • Introduction

  • Variables & data types

  • Control Statements

  • Arrays

  • Functions

  • Objects


Control Statements

  • Javascript supports the typical list of control statements.

  • if, else, else if

  • while

  • do while

  • for

  • switch

  • break

  • continue

CSE 3345


Control Statements

  • In addition to that list, js has a “for in” statement.

  • Use it to iterate over properties of an object.

  • Be careful using “for in” for arrays. Sometimes an object will have properties that you’re unaware and give weird output.

CSE 3345


For in example

// Initialize object.

a = {"a" : "Athens" , "b" : "Belgrade", "c" : "Cairo"} ;

// Iterate over the properties.

vars = "“;

for(var key in a) {

s += key + ": " + a[key];

s += "<br />";

}

document.write(s); // Output:// a: Athens// b: Belgrade// c: Cairo

CSE 3345


Bad Part of Javascript

  • Always place an opening brace “{“ on the same line as the control statement or function.

  • Undesired results can occur if you don’t follow this practice.

  • See here for details

CSE 3345


Javascript Outline

  • Introduction

  • Variables & data types

  • Control Statements

  • Arrays

  • Functions

  • Objects


Arrays

  • Arrays are a special type of object that have a length property.

  • Accessing a value that is outside of the array bounds returns undefined.

  • The length property returns the length of the array.

  • The length is also one more than the highest index.

  • The length of an array isn’t always the number of items in the array.

CSE 3345


Array Length Bad Part

var x =["dog","cat","monkey"];

x.length;//3

x[100]="aligator";

x.length;//101

CSE 3345


Bad Array Initialization

> var a = new Array();

> a[0] = "dog";

> a[1] = "cat";

> a[2] = "hen";

> a.length

3

> var a = new Array(); //bad

CSE 3345


Good Array Initialization

> var a = ["dog", "cat", "hen"];

> a.length

3

> var a = []; //good

CSE 3345


Array Methods

CSE 3345


Javascript Outline

  • Introduction

  • Variables & data types

  • Control Statements

  • Arrays

  • Functions

  • Objects


Functions

  • Almost like typical C/C++ and Java functions, except you don’t specify a return type.

    function sayHello() {

    alert(“hello world!”);

    }

CSE 3345


Function with parameters

  • Once again similar to C/C++ and Java, but you don’t specify the data type of the parameters.

  • You also don’t prefix the parameter name with the var keyword.

    function add(x, y) {

    return x + y;

    }

CSE 3345


The arguments object

  • The arguments object is a local variable available within all functions that contains an entry for each argument passed to a function.

  • The arguments object will also hold values for parameters that are specified by the function.

CSE 3345


Arguments object example

functionconcat(parm1){

varstr= parm1;

for(vari=0,len=arguments.length;i<len;i++){

str+=" "+ arguments[i];

}

returnstr;

}

concat("1","2","3","4"); //"1 1 2 3 4”

CSE 3345


Anonymous Function

  • You can create functions that are not bounded to an identifier.

    alert((function(){return "hello";})());

CSE 3345


Functions are first class objects

  • This means that javascript functions are just a special type of object that can do all things regular objects can do.

    This allows

  • Functions to be stored as variables

  • Functions to be passed as a parameter to another function.

  • You can return a function from another function.

CSE 3345


Functions stored as variables

functionsayHi(){console.log(“hi”);}

var hi =sayHi;

hi();// hi

  • Note that when assigning a function to a variable, you don’t place “()” after the function name.

  • However, to execute the function with the variable name, you must use “()”.

CSE 3345


Function as a parameter of another function

functionsayHi(){return"hi";}

functionsalutation(greeting, name){

console.log(greeting()+" "+ name);

}

varhi =sayHi;

salutation(hi,"Fred"); // hi Fred

CSE 3345


Function as a return value for another function

functionadd(x,y){return x + y;}

functionsubtract(x,y){return x - y;}

functiongetOperation(x){

var operation = x %2===0? add : subtract;

return operation;

}

var operation =getOperation(2);

operation(5,3);// 8

CSE 3345


Javascript Outline

  • Introduction

  • Variables & data types

  • Control Statements

  • Arrays

  • Functions

  • Objects


Objects

  • Objects are a collection of name-value pairs

  • The “name” part is a javascript string.

  • The “value” part can be any javascript value.

CSE 3345


Creating Objects

var student ={

name:"Wade Wilson",

alias:"wwilson",

id:12345678,

email:"[email protected]",

isPassing:true

};

CSE 3345


Object member variables are public

There are no access level modifiers (public, protected, private) to prevent access to an object’s variables.

student.name;//"Wade Wilson"

student.alias;//"wwilson"

student.id;//12345678

student.email;//"[email protected]"

student.isPassing;//true

CSE 3345


Object member variables are public

Using the object literal syntax, we can access variables a second way.

student["name"];//"Wade Wilson"

student["alias"];//"wwilson"

student["id"];//12345678

student["email"];//"[email protected]"

student["isPassing"];//true

This approach makes it possible to calculate the member variable at run-time with a dynamic string.

CSE 3345


Object Methods

var student ={

name:"Wade Wilson",

alias:"wwilson",

id:12345678,

email:"[email protected]",

isPassing:true,

sayHi:function(){console.log("hi");}

};

student.sayHi(); //”hi”

CSE 3345


Your turn

Create a function to print each pattern

**********************

**********************

**********************

**********************

**********************

**********************

**********************

**********************

**********************

**********************

CSE 3345


DOM


  • Intro to javascript

  • DOM

    • About

    • Tree / nodes

    • Accessing elements

    • Creating elements

    • Deleting element


Quick facts

  • DOM – document object model

  • Is a cross-platform language agnostic convention for representing HTML, XHTML, and XML documents.

  • Think of the DOM as a family tree which represents a document.

  • The DOM represents the document as a structured group of nodes/objects that have properties and methods.


HTML to DOM Tree

<html>

<head><title>DOM Test</title></head>

<body>

<pclass="text"style="color:red">I am some text.</p>

</body>

</html>

HTML

HEAD

BODY

TITLE

P

class: text

style

color: red

CSE 3345


HTML to DOM Tree

document

HTML

HEAD

BODY

TITLE

P

class: text

style

color: red

CSE 3345


Live DOM Viewer

  • Visit the Live DOM Viewer to see the DOM in action.

CSE 3345


DOM API

  • API – application programming interface

  • Provides capabilities to change a document’s structure, style, and content.

  • In the DOM, everything in the document becomes nodes (elements, text, attributes, comments, etc) and forms a node tree.

CSE 3345


Getting access to the DOM from JS

  • Each webpage loaded in the browser has its own document object.

  • The document object serves as the entry point to the web page’s content aka the DOM tree.

CSE 3345


How to access the DOM in js

//javascriptcode

//this returns an array of all the div elements in //the HTML document.

vardivs = document.getElementsByTagName("div");

CSE 3345


DOM API

  • Allows developers to access nodes in the DOM Tree.

  • Each node is actually a javascript object.

  • Therefore, each object can have properties and methods

CSE 3345


A few DOM traversing methods

  • getElementByID(id) – get the element with the specified id or null if an element wasn’t found.

  • getElementsByTagName(tag) – returns an array of all elements with the specified tag.

  • getElementsByClassName(class) – returns an array of all elements which have the given class name.

CSE 3345


Node Properties

document

HTML

HEAD

BODY

TITLE

P

class: text

style

color: red

CSE 3345


A few node Properties

  • innerHTML– the textual value of the node

  • nodeName– the name of the node

  • nodeValue – the value of the node

  • parentNode - the parent node of the node

  • childNodes – the child nodes of the node

  • attributes – the attributes of the node

  • firstChild – the first child of the node

  • nextSibling- the next sibling of the node

CSE 3345


nodeValue

  • nodeValue can return different things depending on what the node is

  • Attribute – the value will be the value of the attribute.

  • Text – the value will be the text content

  • Element – the value will be null

CSE 3345


Node Trees

  • All nodes in the tree can be accessed and their contents can be modified or deleted.

  • New nodes can be created and inserted into the tree.

CSE 3345


DOM manipulation methods

  • removeChild(node) – remove a child node from the current node.

  • createElement(element) – create an element node of the specified type.

  • appendChild(node) – insert a child node to the current node.

  • setAttribute(name, value) – set a new attribute with the specified name and value to this node.

CSE 3345


Using the DOM API

  • We can navigate to any section of the DOM tree by using properties.

    • firstChild

    • lastChild

    • nextSibling

    • previousSibling

  • Once we’ve found the node we want, we can set almost any HTML attribute or data attribute and CSS property.

CSE 3345


Using DOM to change HTML

  • Use the properties of each node to change specific things

    • innerHTML

    • setAttribute()

CSE 3345


Using DOM to change CSS

  • Each element node has a style property.

  • Using style, you change specific CSS properties for the element’s inline style.

  • Note this will not fetch CSS from embedded or external declarations.

CSE 3345


DOM CSS Example

//changes the body element's inline color style to be red

document.body.style.color="red";

CSE 3345


DOM References

  • Sitepoint

  • Use the intellisense feature of Chrome Web Inspector to find available methods and properties.

CSE 3345


DOM Example

http://cssdeck.com/labs/collab/knejnp4j/0

http://jsfiddle.net/blinkmacalahan/vfVM6/6/

CSE 3345


  • Login