Docsity
Log inSign up
Docsity
Prepare for your exams
Prepare for your exams

Study with the several resources on Docsity

Earn points to download
Earn points to download

Earn points by helping other students or get them with a premium plan

Guidelines and tips
Guidelines and tips
Sell on Docsity
Sell on Docsity
Log inSign up

Prepare for your exams

Study with the several resources on Docsity

Find documents

Prepare for your exams with the study notes shared by other students like you on Docsity

Search Store documents

The best documents sold by students who completed their studies

Search through all study resources
Docsity AINEW

Summarize your documents, ask them questions, convert them into quizzes and concept maps

Explore questions

Clear up your doubts by reading the answers to questions asked by your fellow students

Earn points to download

Earn points by helping other students or get them with a premium plan

Share documents
download point icon20 Points

For each uploaded document

Answer questions
download point icon5 Points

For each given answer (max 1 per day)

All the ways to get free points
Get points immediately

Choose a premium plan with all the points you need

Study Opportunities

Choose your next study program

Get in touch with the best universities in the world. Search through thousands of universities and official partners

Community

Ask the community

Ask the community for help and clear up your study doubts

University Rankings

Discover the best universities in your country according to Docsity users

Free resources

Our save-the-student-ebooks!

Download our free guides on studying techniques, anxiety management strategies, and thesis advice from Docsity tutors

From our blog

Exams and Study
Go to the blog

JavaScript, AJAX, and jQuery in CSE 330: Creative Programming and Rapid Prototyping, Study notes of Programming Languages

Baton Rouge General Medical Center for Radiologic TechnologyProgramming Languages

An overview of Module 5 in the CSE 330 course, focusing on JavaScript, AJAX, and jQuery. It covers the individual and group components, due dates, and time-consuming nature of the module. It also explains JavaScript as a scripting language for adding interactivity to HTML pages, AJAX for asynchronous data retrieval, and jQuery as a JavaScript library. The document also discusses the differences between JavaScript and Java, JavaScript basics, writing JavaScript programs, using the <SCRIPT> tag, and JavaScript examples.

Typology: Study notes

2021/2022

Uploaded on 09/12/2022

torley
torley 🇺🇸

4.6

(41)

258 documents

1 / 27

Toggle sidebar

This page cannot be seen from the preview

Don't miss anything!

bg1
Extensible Networking Platform 1
1-CSE 330 –Creative Programming and Rapid Prototypin g
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
Extensible Networking Platform 2
2-CSE 330 –Creative Programming and Rapid Prototypin g
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
pf3
pf4
pf5
pf8
pf9
pfa
pfd
pfe
pff
pf12
pf13
pf14
pf15
pf16
pf17
pf18
pf19
pf1a
pf1b

Partial preview of the text

Download JavaScript, AJAX, and jQuery in CSE 330: Creative Programming and Rapid Prototyping and more Study notes Programming Languages in PDF only on Docsity!

1 Extensible Networking Platform - CSE 330 – Creative Programming and Rapid Prototyping^1

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

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

3 Extensible Networking Platform - CSE 330 – Creative Programming and Rapid Prototyping^3

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

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

7 Extensible Networking Platform - CSE 330 – Creative Programming and Rapid Prototyping^7

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

Using the

– SRC property is required only if you place your

program in a separate file

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

different format

–

JavaScript Example (part 2)

<input type = "submit" value ="Show Me"

onClick="MsgBox(form.text1.value)">

13 Extensible Networking Platform - CSE 330 – Creative Programming and Rapid Prototyping^13

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

– http://www.quirksmode.org/js/contents.html

– https://docs.webplatform.org/wiki/Meta:javascript/t

utorials

JavaScript Debugging

• JSHint is a great resources to help debug your code

– http://www.jshint.com/

• Tools for browsers also exist

– Firefox

• Firebug extension

– Chrome and Safari

• Webkit Inspector comes bundled with the browser

15 Extensible Networking Platform - CSE 330 – Creative Programming and Rapid Prototyping^15

JavaScript Examples

http://research.engineering.wustl.edu/~todd/cse330/demo/lecture5/

AJAX

• Stands for  Asynchronous JavaScript and XML”

• Development technique for creating interactive

web applications

• Not a new Technology but more of a Pattern

19 Extensible Networking Platform - CSE 330 – Creative Programming and Rapid Prototyping^19

The DOM

• Document Object Model (DOM): platform- and

language-independent way to represent XML

– Adopts a tree-based representation

– W3C standard, supported by modern browsers

• JavaScript uses DOM to manipulate content

– To process user events

– To process server responses (via XMLHttpRequest)

The DOM

• Unlike other programming languages, JavaScript

understands HTML and can directly access it

• JavaScript uses the HTML Document Object Model to

manipulate HTML

• The DOM is a hierarchy of HTML things

• Use the DOM to build an  address  to refer to HTML

elements in a web page

• Levels of the DOM are dot-separated in the syntax

21 Extensible Networking Platform - CSE 330 – Creative Programming and Rapid Prototyping^21

DOM

Accessing the DOM Example

https://research.engineering.wustl.edu/~todd/cse330/demo/lecture5/

25 Extensible Networking Platform - CSE 330 – Creative Programming and Rapid Prototyping^25

Asynchronous processing - XMLHttpRequest

  • Allows to execute an HTTP request in background
  • Callbacks kick back into JavaScript Code
  • Supported in all standard browsers Using XMLHttpRequest
  • First you must create the XMLHttpRequest Object in JavaScript
  • Example
    • const xmlHttp = new XMLHttpRequest();
  • Older browsers might require different syntax
    • For example (Internet Explorer versions <9)
      • const xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    • We will not worry about JS compatibility with IE < 9 in this course

27 Extensible Networking Platform - CSE 330 – Creative Programming and Rapid Prototyping^27

Using XMLHttpRequest

• Transferring data to Server

– Open() to initialize connection to Server

– Send() to send the actual Data

• Example (POST)

– xmlHttp.open("POST", "/query.cgi”,true);

– xmlHttp.send("name=Bob&email=bob@example.com");

• Example (GET)

– xmlHttp.open("GET","hello.txt",true);

– xmlHttp.send(null);

What happens after sending data?

• XMLHttpRequest contacts the server and

retrieves the data

– Can take indeterminate amount of time

• Create an Event Listener to determine when the

object has finished loading with the data we are

interested in

– Specifically listen for the load event to occur

31 Extensible Networking Platform - CSE 330 – Creative Programming and Rapid Prototyping^31

AJAX Example

Interaction between Components

33 Extensible Networking Platform - CSE 330 – Creative Programming and Rapid Prototyping^33

AJAX Example

Promises

• A promise is an object representing the eventual

completion or failure of an asynchronous

operation

• Promises are returned objects that you attached

callbacks to

• A promise can only succeed or fail

• This promise resolves to the response of that

request, whether it is successful or not.

37 Extensible Networking Platform - CSE 330 – Creative Programming and Rapid Prototyping^37

Fetch API

• fetch() has one required argument (the path to the

resource)

– It returns a promise

– This promise resolves to the response of that request,

whether it is successful or not.

fetch(url)

.then(function(response) {

// Do stuff with response

.catch(function(error) {

console.log(" Found an error" + error);

Fetch Example

39 Extensible Networking Platform - CSE 330 – Creative Programming and Rapid Prototyping^39

Additional Links for Promise and Fetch

• https://developers.google.com/web/fundamentals/primers/p

romises

• https://developer.mozilla.org/en-

US/docs/Web/JavaScript/Guide/Using_promises

• https://developer.mozilla.org/en-

US/docs/Web/API/Fetch_API

jQuery – Simplify your JavaScript