Scribd
Upload
8 views29 pages

Lecture 20 JavaScript

The document covers the use of JavaScript in creating both static and dynamic web pages, emphasizing its importance for interactivity and user engagement. It includes examples of JavaScript syntax, user input handling, and event-driven programming. Additionally, it provides references for further learning and practice exercises related to JavaScript programming.

Uploaded by

pswon060812
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
8 views29 pages

Lecture 20 JavaScript

The document covers the use of JavaScript in creating both static and dynamic web pages, emphasizing its importance for interactivity and user engagement. It includes examples of JavaScript syntax, user input handling, and event-driven programming. Additionally, it provides references for further learning and practice exercises related to JavaScript programming.

Uploaded by

pswon060812
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

SWCON104

Web & Python Programming

JavaScript

Department of Software Convergence


Today
Static web pages
Dynamic web pages
Why do we use Javascript to create web pages?

Write a simple Javascript program


Practice Javascript syntax
Alert and prompts
Events
Gathering user input
Dynamically modify HTML

KYUNG HEE UNIVERSITY 2


Practice
Practice_19_JavaScript

KYUNG HEE UNIVERSITY 3


Static web pages

KYUNG HEE UNIVERSITY 4


Dynamic web pages
Server-side dynamic web page

KYUNG HEE UNIVERSITY 5


Dynamic web pages: button example
Client-side dynamic web page —> Generally use Javascript!

Click

KYUNG HEE UNIVERSITY 6


Button example: source code

Click

KYUNG HEE UNIVERSITY 7


Button example: source code
onclick = an event
addParagraphText() = a program (function) to execute
“para” = the id that we’re supplying
innerHTML = “Thanks for adding text!”

KYUNG HEE UNIVERSITY 8


User input example

typing & click

KYUNG HEE UNIVERSITY 9


The value of JavaScript
HTML is static

We want our website to be responsive


User takes an action
Respond with action
We can’t do that with plain text HTML

KYUNG HEE UNIVERSITY 10


Responsive pages
HTML is not a programming language
HTML is a markup language that uses tags

If we use a programming language


Take steps and actions in a sequence
Do things repetitively
Make decisions based on data

JavaScript is a programming language


We can make interactive pages
We can interact with users/ visitors

KYUNG HEE UNIVERSITY 11


Button example: again

KYUNG HEE UNIVERSITY 12


Button example: again

KYUNG HEE UNIVERSITY 13


User input example
var
function { }
if (condition){ }
else { }
input
Semicolon;
Colon: not used

KYUNG HEE UNIVERSITY 14


Alert example

typing & click

KYUNG HEE UNIVERSITY 15


Alert example: source code

KYUNG HEE UNIVERSITY 16


Prompt example

KYUNG HEE UNIVERSITY 17


Prompt example: source code

KYUNG HEE UNIVERSITY 18


Prompt example: default value

KYUNG HEE UNIVERSITY 19


Alert and Prompt
Both an alert and a prompt display a pop-up to the user.
An alert simply displays a message to the user.
A Prompt asks the user for some sort of input.

KYUNG HEE UNIVERSITY 20


DIY Exercise
If nothing is entered through the prompt,
show “Hey, no input” on the web page.

KYUNG HEE UNIVERSITY 21


Event
onclick
onload
onblur
onmouseover

KYUNG HEE UNIVERSITY 22


DIY Testing

KYUNG HEE UNIVERSITY 23


Reference

KYUNG HEE UNIVERSITY Reference: [Link] 24


Reference

KYUNG HEE UNIVERSITY Reference: [Link]


Reference

KYUNG HEE UNIVERSITY Reference: [Link] 26


Reference

KYUNG HEE UNIVERSITY 27


Reference

KYUNG HEE UNIVERSITY 28

You might also like