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 = document.getElementById("fee").value;
In a form, to set the value of an input field, we can use:
document.getElementById("fee").value = "230.50";
To change string into number:
var s = "100";
var x = Number(s);
var feeAmount = Number(document.getElementById("fee").value);
Review
<span id="mark"><b>87</b></span>
To get the content from an HTML element, we can use:
var mark = document.getElementById("mark").textContent;
var mark = document.getElementById("mark").innerHTML;
The first returns 87
The second returns <b>87</b>
To set the content of an HTML element, we can use:
document.getElementById("mark").innerHTML = "90";
document.getElementById("mark").innerHTML = "<i>90</i>";
Review
To get a random (decimal) number from 0 (inclusive) to 1 (exclusive):
var x = Math.random(); //example: 0.457
To get a random (decimal) number from 0 (inclusive) to 10 (exclusive):
var x = Math.random() * 10;
To get a random integer from 0 (inclusive) to 10 (exclusive):
var x = Math.floor(Math.random() * 10); //0,1,2,...,9
To get a random integer from 1 (inclusive) to 6 (inclusive):
var x = Math.floor(Math.random() * 6) + 1; //1,2,3,4,5,6
To get a random integer from 5 (inclusive) to 15 (inclusive)?
Event
http://www.uow.edu.au/~dong/w3/example/js/changeCircle1.html
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?
http://www.uow.edu.au/~dong/w3/example/js/changeCircle1.html
http://www.uow.edu.au/~dong/w3/example/js/changeCircle1.html
Event
First, I need to create two images:
- one white circle circle1.png, and
- one black circle circle2.png.
We save these two image files in the directory images
<img id="cicle" src="images/circle1.png" onClick="changeCircleImage()" />
<script>
function changeCircleImage() {
var image = document.getElementById("circle");
if (image.src.includes("circle1")) {
image.src = "images/circle2.png";
} else {
image.src = "images/circle1.png";
}
}
</script>
http://www.uow.edu.au/~dong/w3/example/js/changeCircle1.html
Event
Another solution:
http://www.uow.edu.au/~dong/w3/example/js/changeCircle2.html
<script>
var imageNumber = 1;
function changeCircleImage() {
var image = document.getElementById("circle");
if(imageNumber == 1){
imageNumber = 2;
}else{
imageNumber = 1;
}
if (imageNumber == 1) {
image.src = "images/circle1.png";
} else {
image.src = "images/circle2.png";
}
}
</script>
Event
<button onClick="goToUOW()">Click me to visit UOW</button>
function goToUOW() {
window.location.assign("http://www.uow.edu.au");
}
http://www.uow.edu.au/~dong/w3/example/js/eventOnClick.htm
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 = document.getElementById("discountCode");
e.value = e.value.toUpperCase();
}
http://www.uow.edu.au/~dong/w3/example/js/eventOnChange.ht
ml
Event
<span id="demo" onMouseDown="mouseDown()" onMouseUp="mouseUp()">
Click Me
</span>
function mouseDown() {
document.getElementById("demo").innerHTML = "Release Me";
}
function mouseUp() {
document.getElementById("demo").innerHTML = "Thank You";
}
http://www.uow.edu.au/~dong/w3/example/js/eventOnMouseUpMouseDown.html
Event
<span id="demo" onMouseOver="mouseOver()" onMouseOut="mouseOut()
Mouse Over Me
</span>
function mouseOver() {
document.getElementById("demo").innerHTML = "Thank You"
}
function mouseOut() {
document.getElementById("demo").innerHTML = "Mouse Over Me"
}
http://www.uow.edu.au/~dong/w3/example/js/eventOnMouseOverMouseOut.html
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 = document.createElement("p");
var node = document.createTextNode(subject);
para.appendChild(node);
document.getElementById("subjectList").appendChild(para);
}
}
http://www.uow.edu.au/~dong/w3/example/js/dynamicContent1.html
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 = document.createElement("li");
var node = document.createTextNode(subject);
li.appendChild(node);
document.getElementById("subjectList").appendChild(li);
}
}
http://www.uow.edu.au/~dong/w3/example/js/dynamicContent2.html
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!");
}
http://www.uow.edu.au/~dong/w3/example/js/animation1.html
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!");
}
http://www.uow.edu.au/~dong/w3/example/js/animation2.html
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() {
document.getElementById("clock").innerHTML = new Date();
}
http://www.uow.edu.au/~dong/w3/example/js/animation3.html
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 = document.getElementById("movingText");
var pos = 0;
var moveTextSchedule = setInterval(move, 50);
function move() {
pos++;
e.style.top = pos + 'px';
e.style.left = pos + 'px';
if (pos == 300) {
clearInterval(moveTextSchedule);
}
}
}
http://www.uow.edu.au/~dong/w3/example/js/animation4.html
Animation: Slide show
function slideShow() {
var imageSchedule = setInterval(changeImage, 2000);
}
function changeImage() {
var imageList = ["images/simpson2.png", "images/simpson4.png",
"images/simpson6.png", "images/simpson1.jpg", "images/simpson3.jpg",
"images/simpson5.png", "images/simpson7.jpg"];
//get a random image index
var index = Math.floor(Math.random() * imageList.length);
var image = document.getElementById("simpson");
//set the image source
image.src = imageList[index];
}
<img id="simpson" src="images/simpson1.jpg" height="500px" />
<script>
slideShow();
</script>
http://www.uow.edu.au/~dong/w3/example/js/animation5.html
References
http://www.w3schools.com/js
Robert W. Sebesta, Programming the World Wide Web, Pearson.
