Module 5 –JavaScript, AJAX, and jQuery

[Pages:27]Module 5 ? JavaScript, AJAX, and jQuery

? Module 5 Contains an Individual and Group component

? Both are due on Wednesday Oct 23rd ? Start early on this module ? One of the most time consuming modules in the

course

? Read the WIKI before starting along with a few JavaScript and jQuery tutorials

1E- CxtSeEn3s3i0bl?eCNreeattiwveoPrkroinggramPmlaintfgoarmnd Rapid Prototyping

1

Module 5

? JavaScript

? Scripting language to add interactivity to HTML pages ? Java and JavaScript are completely different

languages

? AJAX

? Asynchronous JavaScript and XML (AJAX) ? Allows for retrieval of data from web servers in the

background

? jQuery

? JavaScript library

2E- CxtSeEn3s3i0bl?eCNreeattiwveoPrkroinggramPmlaintfgoarmnd Rapid Prototyping

2

JavaScript

? Popular scripting language widely supported in browsers to add interaction

? Pop-Up Windows ? User Input Forms ? Calculations ? Special Effects

? Implementation of the ECMAScript language

3E- CxtSeEn3s3i0bl?eCNreeattiwveoPrkroinggramPmlaintfgoarmnd Rapid Prototyping

3

JavaScript

? JavaScript is a prototyped-based scripting language

? Dynamic, weakly typed

? Interpreted language

? You do not compile it

? Uses prototypes instead of classes for inheritance

4E- CxtSeEn3s3i0bl?eCNreeattiwveoPrkroinggramPmlaintfgoarmnd Rapid Prototyping

4

Is JavaScript like Java?

? Java and JavaScript are similar like Car and Carpet are similar

? Two completely different languages with different concepts

? Java is compiled, JavaScript is interpreted

? Java is object-oriented, JavaScript is prototyped based ? Java requires strict typing, JavaScript allows for

dynamic typing

5E- CxtSeEn3s3i0bl?eCNreeattiwveoPrkroinggramPmlaintfgoarmnd Rapid Prototyping

5

JavaScript Basics

? Declare a variable with let let foo = "JS is fun";

? Declare a constant with const const bar = "This is will not change";

? Older versions of JavaScript do not support let and const and use var instead ? In this course we will use let and const and avoid using var

? Define a function with function function foo() { //Some JS code here }

? Functions are also objects

6E- CxtSeEn3s3i0bl?eCNreeattiwveoPrkroinggramPmlaintfgoarmnd Rapid Prototyping

6

Writing a JavaScript Program

? JavaScript programs can either be placed

? directly into the HTML file or ? can be saved in external files

? You can place JavaScript anywhere within the HTML file: within

? the tags or ? the tags

7E- CxtSeEn3s3i0bl?eCNreeattiwveoPrkroinggramPmlaintfgoarmnd Rapid Prototyping

7

Using the Tag

? SRC property is required only if you place your program in a separate file

script commands and comments

? Older versions of HTML (before 5) use a slightly

different format

? ? This is no longer necessary, simply use

8E- CxtSeEn3s3i0bl?eCNreeattiwveoPrkroinggramPmlaintfgoarmnd Rapid Prototyping

8

JavaScript Example (part 1)

My JavaScript Example

function MsgBox(textstring) {

alert(textstring); }

9E- CxtSeEn3s3i0bl?eCNreeattiwveoPrkroinggramPmlaintfgoarmnd Rapid Prototyping

9

JavaScript Example (part 2)

10E-xCteSnEs3i3b0le? CNreeatwtivoerPkrinoggraPmlamtifnogrmand Rapid Prototyping

10

JavaScript Example

My JavaScript Example

function MsgBox(textstring) {

alert(textstring); }

11E-xCteSnEs3i3b0le? CNreeatwtivoerPkrinoggraPmlamtifnogrmand Rapid Prototyping

11

JavaScript Event Listeners

? We can control events in a more granular way using Event Listeners

? Event Listeners allow for custom behavior for every element

document.getElementById("hello").addEventListener("click",MsgBox, false);

12E-xCteSnEs3i3b0le? CNreeatwtivoerPkrinoggraPmlamtifnogrmand Rapid Prototyping

12

JavaScript Additional Information

? The CSE 330 Wiki provides a great intro into JavaScript along with some excellent links to more comprehensive tutorials

? Additional JS tutorials

? ?

utorials

13E-xCteSnEs3i3b0le? CNreeatwtivoerPkrinoggraPmlamtifnogrmand Rapid Prototyping

13

JavaScript Debugging

? JSHint is a great resources to help debug your code

?

? Tools for browsers also exist

? Firefox

? Firebug extension

? Chrome and Safari

? Webkit Inspector comes bundled with the browser

14E-xCteSnEs3i3b0le? CNreeatwtivoerPkrinoggraPmlamtifnogrmand Rapid Prototyping

14

JavaScript Examples



15E-xCteSnEs3i3b0le? CNreeatwtivoerPkrinoggraPmlamtifnogrmand Rapid Prototyping

15

AJAX

? Stands for Asynchronous JavaScript and XML"

? Development technique for creating interactive web applications

? Not a new Technology but more of a Pattern

16E-xCteSnEs3i3b0le? CNreeatwtivoerPkrinoggraPmlamtifnogrmand Rapid Prototyping

16

 ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download