introduction to javascript - universiti teknologi malaysia · outline •scripting with the dom...
TRANSCRIPT
Introduction toJavascriptModule 224 October 2017
Outline• ScriptingwiththeDOM• MeetJSON• Javascript andHTML5• Javascript andCSS• UsingLibraries• jQuery• AjaxwithjQuery
Get Started• DownloadXAMPP(https://www.apachefriends.org/index.html)• InstallXAMPPtoCdrive• RunXAMPPControlPanel• RunApacheandMySQL
Scripting with the DOMWith the object model, JavaScript gets all the power it needs to create dynamic HTML:• JavaScript can change all the HTML elements in the page• JavaScript can change all the HTML attributes in the page• JavaScript can change all the CSS styles in the page• JavaScript can remove existing HTML elements and attributes• JavaScript can add new HTML elements and attributes• JavaScript can react to all existing HTML events in the page• JavaScript can create new HTML events in the page
Scripting with the DOM<html><body><h2>My First Page</h2><p id="demo"></p>
<script>document.getElementById("demo").innerHTML = "Hello World!";</script>
</body></html>
Meet JSONWhen exchanging data between a browser and a server, the data can only be text.
JavaScript Object Notation (JSON) is text, and we can convert any JavaScript object into JSON, and send JSON to the server.
We can also convert any JSON received from the server into JavaScript objects.
This way we can work with the data as JavaScript objects, with no complicated parsing and translations.
Meet JSON
JSON Syntax:
myObj = { "name":"John", "age":30, "city":"New York"
};
XML Syntax:
<Object><element>
<name>John</name> <age>30</age> <city>New York</city></element>
</Object>
Meet JSON<html><body><p>Access a JavaScript object:</p><p id="demo"></p>
<script>var myObj, x;myObj = {
"name":"John", "age":30, "city":"New York" };
x = myObj.name;document.getElementById("demo").innerHTML = x; </script>
</body></html>
Meet JSON<html><body><p>Access a JavaScript object:</p><p id="demo"></p>
<script>var myObj, x;myObj = {
"name":"John", "age":30, "city":"New York" };
x = myObj["name"]; document.getElementById("demo").innerHTML = x; </script>
</body></html>
Meet JSON<html><body><p>Loopin through an array using a for loop:</p><p id="demo"></p>
<script>var myObj, i, x = "";myObj = { "name":"John",
"age":30, "cars":[ "Ford", "BMW", "Fiat" ]
};for (i = 0; i < myObj.cars.length; i++)
{ x = x + myObj.cars[i] + "<br>";
}document.getElementById("demo").innerHTML = x;</script>
</body></html>
Meet JSON<html><body><h2>Store and retrieve data from local storage.</h2><p id="demo"></p>
<script>var myObj, myJSON, text, obj;
//Storing data:myObj = { "name":"John", "age":31, "city":"New York" };myJSON = JSON.stringify(myObj);localStorage.setItem("testJSON", myJSON);
//Retrieving data:text = localStorage.getItem("testJSON");obj = JSON.parse(text);document.getElementById("demo").innerHTML = obj.name;</script>
</body></html>
Javascript and HTML5<html><body><h2>JavaScript can Change HTML</h2><p id="p1">Hello World!</p>
<script>document.getElementById("p1").innerHTML = "New text!";</script>
<p>The paragraph above was changed by a script.</p></body></html>
Javascript and HTML5<html><body><img id="image" src="smiley.gif" width="160" height="120">
<script>document.getElementById("image").src = "landscape.jpg";</script>
<p>The original image was smiley.gif, but the script changed it to landscape.jpg</p></body></html>
Javascript and CSS<html><body><p id="p1">Hello World!</p><p id="p2">Hello World!</p>
<script>document.getElementById("p2").style.color = "blue";document.getElementById("p2").style.fontFamily = "Arial";document.getElementById("p2").style.fontSize = "larger";</script>
<p>The paragraph above was changed by a script.</p></body></html>
Javascript and CSS<html><body><h1 id="id1">My Heading 1</h1>
<button type="button" onclick="document.getElementById('id1').style.color = 'red'">Click Me!</button>
</body></html>
AJAXAsynchronous JavaScript And XML (AJAX) allows web pages to be updated asynchronously by exchanging data with a web server behind the scenes.
This means that it is possible to update parts of a web page, without reloading the whole page.
JSON & AJAX<html><body><h2>Use the XMLHttpRequest to get the content of a file.</h2><p>The content is written in JSON format, and can easily be converted into a JavaScript object.</p><p id="demo"></p>
<script>var xmlhttp = new XMLHttpRequest();xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var myObj = JSON.parse(this.responseText); document.getElementById("demo").innerHTML = myObj.name;
}};xmlhttp.open("GET", "json_demo.txt", true);xmlhttp.send();</script>
<p>Take a look at <a href="json_demo.txt" target="_blank">json_demo.txt</a></p></body></html>
jQueryjQuery is a lightweight, "write less, do more", JavaScript library.
The purpose of jQuery is to make it much easier to use JavaScript on your website.
jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code.
jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation.
The jQuery library contains the following features:• HTML/DOM manipulation• CSS manipulation• HTML event methods• Effects and animations• AJAX• Utilities
jQueryHow to start using jQuery
1. Download and place the js file into the directory<head><script src="jquery-3.2.1.min.js"></script></head>
2. Link to the content delivery network (CDN) directly<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script></head>
jQuery<html><head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>$(document).ready(function(){
$("button").click(function(){
$("#div1").load("demo_test.txt"); });
});</script>
</head>
<body><div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div><button>Get External Content</button></body></html>
jQuery<html><head><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>$(document).ready(function(){ $("#btn1").click(function()
{ alert("Text: " + $("#test").text());
}); $("#btn2").click(function()
{ alert("HTML: " + $("#test").html());
});});
</script>
</head><body><p id="test">This is some <b>bold</b> text in a paragraph.</p><button id="btn1">Show Text</button><button id="btn2">Show HTML</button></body></html>