Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
JavaScript Introduction
1. DESIGNVELOPER
JavaScript Introduction
• JavaScript is the most popular programming
language in the world.
• JavaScript is the language for the web
Website: http://designveloper.com
Address: 250/6 Bau Cat, Ward 11, Tan Binh
District, HCM City
2. JavaScript Variables
• Declaring:
– var x=10
– var y
• Global variable:
Declaring : x=0;
• Local variable
Declaring : var x=0
Website: http://designveloper.com
Address: 250/6 Bau Cat, Ward 11, Tan Binh
District, HCM City
3. JavaScript Objects
• Almost "everything" in JavaScript can be
objects. Strings, Dates, Arrays, Functions....
• There are many different ways to create new
JavaScript objects, and you can also add new
properties and methods to already existing
objects.
• Example:
Website: http://designveloper.com
Address: 250/6 Bau Cat, Ward 11, Tan Binh
District, HCM City
4. Creating JavaScript Objects
• Methods defined internally
function Apple (type) {
this.type = type;
this.color = "red";
this.getInfo = function() {
return this.color + ' ' + this.type + ' apple';
};
}
Website: http://designveloper.com
Address: 250/6 Bau Cat, Ward 11, Tan Binh
District, HCM City
5. Creating JavaScript Objects
• Methods added to the prototype
function Apple (type)
{
this.type = type;
this.color = "red";
}
Apple.prototype.getInfo = function() {
return this.color + ' ' + this.type + ' apple';
};
Website: http://designveloper.com
Address: 250/6 Bau Cat, Ward 11, Tan Binh
District, HCM City
6. Creating JavaScript Objects
• To instantiate an object using the
Apple constructor function, set some
properties and call methods you can do the
following:
• var apple = new Apple('macintosh');
apple.color = "reddish";
alert(apple.getInfo());
Website: http://designveloper.com
Address: 250/6 Bau Cat, Ward 11, Tan Binh
District, HCM City
7. Using object literals
• Literals are shorter way to define objects and
arrays in JavaScript. To create an empty object
using you can do:
var o = {};
instead of the "normal" way:
var o = new Object();
Website: http://designveloper.com
Address: 250/6 Bau Cat, Ward 11, Tan Binh
District, HCM City
8. Using object literals
• var apple = {
type: "macintosh",
color: "red",
getInfo: function () {
return this.color + ' ' + this.type + ' apple';
}
}
In this case you don't need to (and cannot) create an instance of
the class, it already exists. So you simply start using this instance.
apple.color = "reddish";
alert(apple.getInfo());
Website: http://designveloper.com
Address: 250/6 Bau Cat, Ward 11, Tan Binh
District, HCM City
9. Singleton using a function
• You can use a function to define a singleton
object. Here's the syntax:
var apple = new function() {
this.type = "macintosh";
this.color = "red";
this.getInfo = function () {
return this.color + ' ' + this.type + ' apple';
};
}
Website: http://designveloper.com
Address: 250/6 Bau Cat, Ward 11, Tan Binh
District, HCM City
10. Singleton using a function
• So you see that this is very similar to 1.
discussed above, but the way to use the
object is exactly like in 2.
apple.color = "reddish";
alert(apple.getInfo());
Website: http://designveloper.com
Address: 250/6 Bau Cat, Ward 11, Tan Binh
District, HCM City
12. • JavaScript Switch Statement
• JavaScript For Loop
• JavaScript While Loop
• JavaScript Break and Continue
• JavaScript Errors - Throw and Try to Catch
• JavaScript Form Validation
Website: http://designveloper.com
Address: 250/6 Bau Cat, Ward 11, Tan Binh
District, HCM City
13. JavaScript HTML DOM
• With 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
Website: http://designveloper.com
Address: 250/6 Bau Cat, Ward 11, Tan Binh
District, HCM City
14. JavaScript - HTML DOM Methods
• HTML DOM methods are actions you can
perform (on HTML Elements)
• HTML DOM properties are values (of HTML
Elements) that you can set or change
Website: http://designveloper.com
Address: 250/6 Bau Cat, Ward 11, Tan Binh
District, HCM City
15. JavaScript HTML DOM Document
• In the HTML DOM object model, the
document object represents your web page.
• The document object is the owner of all other
objects in your web page.
Website: http://designveloper.com
Address: 250/6 Bau Cat, Ward 11, Tan Binh
District, HCM City
16. • JavaScript HTML DOM - Changing HTML
• JavaScript HTML DOM - Changing CSS
– <p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
</script>
<p>The paragraph above was changed by a script.</p>
JavaScript HTML DOM Event
• JavaScript HTML DOM Events
Website: http://designveloper.com
Address: 250/6 Bau Cat, Ward 11, Tan Binh
District, HCM City
17. JavaScript HTML DOM Elements
(Nodes)
• To add a new element to the HTML DOM, you must create
the element (element node) first, and then append it to an
existing element.
• <div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
</script>
Website: http://designveloper.com
Address: 250/6 Bau Cat, Ward 11, Tan Binh
District, HCM City
18. HTML DOM Node List Length
• The length property defines the number of nodes
in a node-list.
• You can loop through a node-list by using the
length property:
• x=document.getElementsByTagName("p");
for (i=0;i<x.length;i++)
{
document.write(x[i].innerHTML);
document.write("<br />");
}
Website: http://designveloper.com
Address: 250/6 Bau Cat, Ward 11, Tan Binh
District, HCM City
19. The Browser Object Model
Website: http://designveloper.com
Address: 250/6 Bau Cat, Ward 11, Tan Binh
District, HCM City
20. The Browser Object Model
• The window object is supported by all browsers. It
represent the browser's window.
• For Internet Explorer, Chrome, Firefox, Opera, and Safari:
– window.innerHeight - the inner height of the browser window
– window.innerWidth - the inner width of the browser window
• For Internet Explorer 8, 7, 6, 5:
– document.documentElement.clientHeight
– document.documentElement.clientWidth
– or
– document.body.clientHeight
– document.body.clientWidth
Website: http://designveloper.com
Address: 250/6 Bau Cat, Ward 11, Tan Binh
District, HCM City
21. The Browser Object Model
• Some other methods:
– window.open() - open a new window
– window.close() - close the current window
– window.moveTo() -move the current window
– window.resizeTo() -resize the current window
Website: http://designveloper.com
Address: 250/6 Bau Cat, Ward 11, Tan Binh
District, HCM City
22. • JavaScript Window Screen
– screen.availWidth - available screen width
– screen.availHeight - available screen height
• JavaScript Window Location
– location.hostname returns the domain name of the
web host
– location.pathname returns the path and filename of
the current page
– location.port returns the port of the web host (80 or
443)
– location.protocol returns the web protocol used
(http:// or https://)
Website: http://designveloper.com
Address: 250/6 Bau Cat, Ward 11, Tan Binh
District, HCM City
23. • JavaScript Window History
– history.back() - same as clicking back in the
browser
– history.forward() - same as clicking forward in the
browser
• JavaScript Window Navigator
– The window.navigator object contains information
about the visitor's browser.
Website: http://designveloper.com
Address: 250/6 Bau Cat, Ward 11, Tan Binh
District, HCM City
24. • JavaScript Popup Boxes
– Alert Box
– Confirm Box
– Prompt Box
Website: http://designveloper.com
Address: 250/6 Bau Cat, Ward 11, Tan Binh
District, HCM City
25. JavaScript Timing Events
• setInterval() - executes a function, over and
over again, at specified time intervals
• setTimeout() - executes a function, once, after
waiting a specified number of milliseconds
Website: http://designveloper.com
Address: 250/6 Bau Cat, Ward 11, Tan Binh
District, HCM City
26. JavaScript Cookies
• Create a Cookie with JavaScript
– document.cookie="username=John Doe";
• You can also add an expiry date (in UTC or
GMT time). By default, the cookie is deleted
when the browser is closed:
– document.cookie="username=John Doe;
expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";
Website: http://designveloper.com
Address: 250/6 Bau Cat, Ward 11, Tan Binh
District, HCM City
27. JavaScript Cookies
• Delete a Cookie with JavaScript
– document.cookie = "username=; expires=Thu, 01
Jan 1970 00:00:00 GMT";
• Read a Cookie with JavaScript
– var x = document.cookie;
document.cookie will return all cookies in one string
much like: cookie1=value; cookie2=value;
cookie3=value;
Website: http://designveloper.com
Address: 250/6 Bau Cat, Ward 11, Tan Binh
District, HCM City
28. JavaScript RegExp Object
• JavaScript RegExp Object
• A regular expression is an object that
describes a pattern of characters.
• When you search in a text, you can use a
pattern to describe what you are searching for.
Website: http://designveloper.com
Address: 250/6 Bau Cat, Ward 11, Tan Binh
District, HCM City
29. Java Script Ajax
• AJAX is the art of exchanging data with a
server, and updating parts of a web page -
without reloading the whole page.
• How AJAX Works
Website: http://designveloper.com
Address: 250/6 Bau Cat, Ward 11, Tan Binh
District, HCM City