CSIT128 / CSIT828

More JavaScript Examples

Joseph Tonien
Review
<input type="text" name="p_fee" id="fee">

In a form, to get user input value, we can use:

var feeAmount = [Link]("fee").value;

In a form, to set the value of an input field, we can use:

[Link]("fee").value = "230.50";

To change string into number:

var s = "100";
var x = Number(s);

var feeAmount = Number([Link]("fee").value);

Review
<span id="mark"><b>87</b></span>

To get the content from an HTML element, we can use:

var mark = [Link]("mark").textContent;

var mark = [Link]("mark").innerHTML;

The first returns 87

The second returns <b>87</b>

To set the content of an HTML element, we can use:

[Link]("mark").innerHTML = "90";

[Link]("mark").innerHTML = "<i>90</i>";
Review
To get a random (decimal) number from 0 (inclusive) to 1 (exclusive):

var x = [Link](); //example: 0.457

To get a random (decimal) number from 0 (inclusive) to 10 (exclusive):

var x = [Link]() * 10;

To get a random integer from 0 (inclusive) to 10 (exclusive):

var x = [Link]([Link]() * 10); //0,1,2,...,9

To get a random integer from 1 (inclusive) to 6 (inclusive):

var x = [Link]([Link]() * 6) + 1; //1,2,3,4,5,6

To get a random integer from 5 (inclusive) to 15 (inclusive)?

 Event
[Link]
When user clicks on white circle
image, it changes to black circle.

When user clicks on black circle

image, it changes back to white
circle.

How do we design this?

[Link]

[Link]
 Event
First, I need to create two images:
- one white circle [Link], and
- one black circle [Link].

We save these two image files in the directory images

<img id="cicle" src="images/[Link]" onClick="changeCircleImage()" />

<script>
function changeCircleImage() {
var image = [Link]("circle");
if ([Link]("circle1")) {
[Link] = "images/[Link]";
} else {
[Link] = "images/[Link]";
}
}
</script>

[Link]
Event
Another solution:
[Link]

<script>
var imageNumber = 1;

function changeCircleImage() {

var image = [Link]("circle");

if(imageNumber == 1){
imageNumber = 2;
}else{
imageNumber = 1;
}

if (imageNumber == 1) {
[Link] = "images/[Link]";
} else {
[Link] = "images/[Link]";
}
}
</script>
 Event

<button onClick="goToUOW()">Click me to visit UOW</button>

function goToUOW() {
[Link]("[Link]
}

[Link]
l
 Event
When the user leaves the input field, a function is triggered which transforms the
input text to uppercase:

Enter discount code:

<input type="text" id="discountCode" onChange="uppercase()">

function uppercase(){
var e = [Link]("discountCode");
[Link] = [Link]();
}

[Link]
ml
 Event

<span id="demo" onMouseDown="mouseDown()" onMouseUp="mouseUp()">

Click Me
</span>

function mouseDown() {
[Link]("demo").innerHTML = "Release Me";
}

function mouseUp() {
[Link]("demo").innerHTML = "Thank You";
}

[Link]
 Event

<span id="demo" onMouseOver="mouseOver()" onMouseOut="mouseOut()

Mouse Over Me
</span>

function mouseOver() {
[Link]("demo").innerHTML = "Thank You"
}

function mouseOut() {
[Link]("demo").innerHTML = "Mouse Over Me"
}

[Link]
 Dynamic content
<button onClick="addSubject()">
Click here to add subject
</button>

<div id="subjectList">
</div>

function addSubject(){
//ask user for a subject code
var subject = prompt("Enter subject code");

if(subject != null){
var para = [Link]("p");
var node = [Link](subject);
[Link](node);
[Link]("subjectList").appendChild(para);
}
}

[Link]
 Dynamic content
<button onClick="addSubject()">
Click here to add subject
</button>

<ul id="subjectList">
</ul>

function addSubject(){
//ask user for a subject code
var subject = prompt("Enter subject code");

if(subject != null){
var li = [Link]("li");
var node = [Link](subject);
[Link](node);
[Link]("subjectList").appendChild(li);
}
}

[Link]
 Animation: setInterval
<button onClick="alertForever()">
Click here if you like alert!
</button>

function alertForever(){
//calling alertFunction for every 5000 miliseconds
var alertSchedule = setInterval(alertFunction, 5000);
}

function alertFunction() {
alert("Hello!");
}

[Link]
 Animation: clearInterval
<button onclick="stopIt()">
Click here if you have enough!
</button>

// use global variable so that it can be used

// in both functions: alertForever() and stopIt()
var alertSchedule;

function stopIt(){
clearInterval(alertSchedule);
}

function alertForever(){
//calling alertFunction for every 5000 miliseconds
alertSchedule = setInterval(alertFunction, 5000);
}

function alertFunction() {
alert("Hello!");
}
[Link]
 Animation: Clock ticking
<button onclick="startClock()">
Click here to start the clock
</button>

<span id="clock"></span>

function startClock(){
//calling displayClock for every 1000 miliseconds
var clockSchedule = setInterval(displayClock, 1000);
}

function displayClock() {
[Link]("clock").innerHTML = new Date();
}

[Link]
 Animation: Moving text
<button onclick="moveText()">
Click here to move text
</button>

<span id="movingText" style="position:absolute;">

Moving text
</span>

function moveText() {
var e = [Link]("movingText");
var pos = 0;
var moveTextSchedule = setInterval(move, 50);

function move() {
pos++;
[Link] = pos + 'px';
[Link] = pos + 'px';

if (pos == 300) {
clearInterval(moveTextSchedule);
}
}
}

[Link]
 Animation: Slide show
function slideShow() {
var imageSchedule = setInterval(changeImage, 2000);
}

function changeImage() {
var imageList = ["images/[Link]", "images/[Link]",
"images/[Link]", "images/[Link]", "images/[Link]",
"images/[Link]", "images/[Link]"];

//get a random image index

var index = [Link]([Link]() * [Link]);

var image = [Link]("simpson");

//set the image source

[Link] = imageList[index];
}

<img id="simpson" src="images/[Link]" height="500px" />

<script>
slideShow();
</script>

[Link]
References

[Link]

Robert W. Sebesta, Programming the World Wide Web, Pearson.