Javascript: More features B. Ramamurthy 6/13/2014 B. Ramamurthy, CSE651
advertisement
Javascript: More features
B. Ramamurthy
B. Ramamurthy, CSE651
1
6/13/2014
Review
B. Ramamurthy, CSE651
2
6/13/2014
Structure – Style -- Interaction
HTML provides structure
CSS provides style
Javascript (script) provides control for interaction and
operations
Inside js functions you can use any control structures
such as if..else, for.., while and also any data
structures such as array..
B. Ramamurthy, CSE651
3
6/13/2014
Simple JS (with embedded js)
<!DOCTYPE html>
<html>
<head>
<title> My first JavaScript </title>
</head>
<body>
<h1>
<script>
document.write(“Hello, World!”);
</script>
</h1>
</body>
</html>
B. Ramamurthy, CSE651
4
6/13/2014
JS functions
A function consists of function followed by the name
of the function
The statement that make up the function go next
within curly brackets
Example:
function saySomething() {
alert(“ We are experimenting with JS”);
}
B. Ramamurthy, CSE651
5
6/13/2014
Moving JS to an external file
Similar to how we separated style elements in css file,
behavioral elements can be moved to an external js
file.
B. Ramamurthy, CSE651
6
6/13/2014
HTML with External File JS
<!DOCTYPE html>
<html>
<head>
<title> My second JavaScript </title>
<script src=“script2.js”></script>
</head>
<body>
<h1 id=“helloMessage”>
</h1>
</body>
</html>
B. Ramamurthy, CSE651
7
6/13/2014
JS file
window.onload = writeMessage();
function writeMessage(){
document.getElementById(helloMessage).innerHTML = “Hello,
World!”;
}
// try this simple application
B. Ramamurthy, CSE651
8
6/13/2014
Complete Example
We will look at an example that has muitple section UI,
image display, table layout, input/output from and to the
UI.
We will build the game “hangman”
Even though this is a game, we can always make it into a
serious game or an application that serves a particular
need for your area.
Once again this is only a template.
Our approach is to look at the completed example and
analyze the requirements, plan the UI layout and JS
functions before jumping into coding them.
B. Ramamurthy, CSE651
9
6/13/2014
User Interface (UI) Design
Top title section, bottom credit section, in between
three vertical sections: one for the dynamically
changing images of the hangman, middle section for
the word and related buttons, right section for the UI
keyboard of alphabets.
Lets design this using <div> tag, <table> tag
B. Ramamurthy, CSE651
10
6/13/2014
Design the functionality
This will be in javascript
What are data structures/data needed? Define them in var
section.
What are functions we need?
Initialize function that clears the board/word, picks a
random word
Another function for registering the current letter chosen
Another for drawing the hangman or delivering the right
image to the UI
Somewhere here we need to keep track of the count of
correct letters and decide win or lose and termination
B. Ramamurthy, CSE651
11
6/13/2014
Connecting the UI and JS functions
We will incremental development checking each
function as we proceed.
To start with make sure UI and the js files connect
using the alert(…)
Then prototype each function’s logic and test it
before integrating everything.
Finally do an integration testing.
B. Ramamurthy, CSE651
12
6/13/2014
Applying the knowledge
You can extend this application in many ways.
Levels of playing with words of different lengths.
A data base of different words can be added.
Many levels of playing, continuous playing etc.
There another exciting emerging area called
“gamification/serious game” I am not going to discuss
here… is a hot topic in the USA.
Most of all you can use the design features and js features
to apply these to one of your own work problems.
B. Ramamurthy, CSE651
13
6/13/2014
Summary
We studied an important emerging platform in Javascript.
It is just not used for design of web pages but for
numerous applications such as mobile devices,
communication formats(JSON), middleware (node.js),
databases (mongodb)
HTML5 offers a very path into designing mobils
applications.
There are many JS APIs and libraries that support rapid
prototyping (Google MapAPI)
Probably many of your automobile apps are made of these.
B. Ramamurthy, CSE651
14
6/13/2014
Project Report
I would like you project report prepared using the
html5 features (HTML + CSS + JS) we discussed.
Any of your work projects can be done that way too!
With live code and analyzers and all.
B. Ramamurthy, CSE651
15
6/13/2014
