JavaScript is a scripting language used primarily for client-side web development. It is based on the ECMAScript standard but browsers support additional objects like Window and DOM objects. JavaScript can be used to create dynamic and interactive effects on web pages like menus, alerts, and updating content without reloading. It is commonly used for form validation, AJAX applications, and other interactive features. The document provides examples of basic JavaScript concepts like variables, data types, operators, and control structures and how to embed scripts in HTML.
Introduction to JavaScript course. The course was updated in 2014-15.
Will allow you to understand what is JavaScript, what's it history and how you can use it.
The set of slides "Introduction to jQuery" is a follow up - which would allow the reader to have a basic understanding across JavaScript and jQuery.
What is the DOM?
The DOM is a W3C (World Wide Web Consortium) standard.
The DOM defines a standard for accessing documents:
"The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document."
The W3C DOM standard is separated into 3 different parts:
Core DOM - standard model for all document types
XML DOM - standard model for XML documents
HTML DOM - standard model for HTML documents
The HTML DOM (Document Object Model)
When a web page is loaded, the browser creates a Document Object Model of the page.
The HTML DOM model is constructed as a tree of Objects.
With the HTML DOM, JavaScript can access and change all the elements of an HTML document.
Introduction to JavaScript course. The course was updated in 2014-15.
Will allow you to understand what is JavaScript, what's it history and how you can use it.
The set of slides "Introduction to jQuery" is a follow up - which would allow the reader to have a basic understanding across JavaScript and jQuery.
What is the DOM?
The DOM is a W3C (World Wide Web Consortium) standard.
The DOM defines a standard for accessing documents:
"The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document."
The W3C DOM standard is separated into 3 different parts:
Core DOM - standard model for all document types
XML DOM - standard model for XML documents
HTML DOM - standard model for HTML documents
The HTML DOM (Document Object Model)
When a web page is loaded, the browser creates a Document Object Model of the page.
The HTML DOM model is constructed as a tree of Objects.
With the HTML DOM, JavaScript can access and change all the elements of an HTML document.
Kita Hebat memiliki cita-cita bahwa kedepannya KPK bukan lagi dikenal sebagai institusi anti korupsi tapi sebagai SEMANGAT anti korupsi di Indonesia.
Finalist BG Award Citra Pariwara 2013
Partner : Bayu Bagus Panuntun
Dowiedz się więcej o innowacyjnej i bezpiecznej technologii bezhasłowego logowania. Wszystko dzięki jednorazowemu hasłu i możliwości dostosowania systemu do potrzeb każdego przedsiębiorstwa czy instytucji.
This is the list of the Top 100 Brands that Cathy Davis, Davis Creative, promised from her presentation at the St. Charles Accelerated Networking event on 9/18/09.
Este porfolio es una pequeña muestra de mi trabajo con publicaciones y diseño gráfico editorial, apenas hay unas pinceladas de mi faceta como ilustradora, que intentaré mostrar más adelante. Espero que os guste
This was a presentation I wrote for a previous employer, aimed at Java developers. The goal was to help them understand some of the new UI conventions I was putting into their application, so that they would be able to develop "smarter" JSP code.
It is a brief about JavaScript, To make understand the development and phases of development JavaScript.
It is helpful for beginner as well as intermediate level.
If you like it please comment or like for more updates.
Thanks
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...Ramesh Iyer
In today's fast-changing business world, Companies that adapt and embrace new ideas often need help to keep up with the competition. However, fostering a culture of innovation takes much work. It takes vision, leadership and willingness to take risks in the right proportion. Sachin Dev Duggal, co-founder of Builder.ai, has perfected the art of this balance, creating a company culture where creativity and growth are nurtured at each stage.
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Tobias Schneck
As AI technology is pushing into IT I was wondering myself, as an “infrastructure container kubernetes guy”, how get this fancy AI technology get managed from an infrastructure operational view? Is it possible to apply our lovely cloud native principals as well? What benefit’s both technologies could bring to each other?
Let me take this questions and provide you a short journey through existing deployment models and use cases for AI software. On practical examples, we discuss what cloud/on-premise strategy we may need for applying it to our own infrastructure to get it to work from an enterprise perspective. I want to give an overview about infrastructure requirements and technologies, what could be beneficial or limiting your AI use cases in an enterprise environment. An interactive Demo will give you some insides, what approaches I got already working for real.
Epistemic Interaction - tuning interfaces to provide information for AI supportAlan Dix
Paper presented at SYNERGY workshop at AVI 2024, Genoa, Italy. 3rd June 2024
https://alandix.com/academic/papers/synergy2024-epistemic/
As machine learning integrates deeper into human-computer interactions, the concept of epistemic interaction emerges, aiming to refine these interactions to enhance system adaptability. This approach encourages minor, intentional adjustments in user behaviour to enrich the data available for system learning. This paper introduces epistemic interaction within the context of human-system communication, illustrating how deliberate interaction design can improve system understanding and adaptation. Through concrete examples, we demonstrate the potential of epistemic interaction to significantly advance human-computer interaction by leveraging intuitive human communication strategies to inform system design and functionality, offering a novel pathway for enriching user-system engagements.
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered QualityInflectra
In this insightful webinar, Inflectra explores how artificial intelligence (AI) is transforming software development and testing. Discover how AI-powered tools are revolutionizing every stage of the software development lifecycle (SDLC), from design and prototyping to testing, deployment, and monitoring.
Learn about:
• The Future of Testing: How AI is shifting testing towards verification, analysis, and higher-level skills, while reducing repetitive tasks.
• Test Automation: How AI-powered test case generation, optimization, and self-healing tests are making testing more efficient and effective.
• Visual Testing: Explore the emerging capabilities of AI in visual testing and how it's set to revolutionize UI verification.
• Inflectra's AI Solutions: See demonstrations of Inflectra's cutting-edge AI tools like the ChatGPT plugin and Azure Open AI platform, designed to streamline your testing process.
Whether you're a developer, tester, or QA professional, this webinar will give you valuable insights into how AI is shaping the future of software delivery.
UiPath Test Automation using UiPath Test Suite series, part 3DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 3. In this session, we will cover desktop automation along with UI automation.
Topics covered:
UI automation Introduction,
UI automation Sample
Desktop automation flow
Pradeep Chinnala, Senior Consultant Automation Developer @WonderBotz and UiPath MVP
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
The Art of the Pitch: WordPress Relationships and SalesLaura Byrne
Clients don’t know what they don’t know. What web solutions are right for them? How does WordPress come into the picture? How do you make sure you understand scope and timeline? What do you do if sometime changes?
All these questions and more will be explored as we talk about matching clients’ needs with what your agency offers without pulling teeth or pulling your hair out. Practical tips, and strategies for successful relationship building that leads to closing the deal.
Accelerate your Kubernetes clusters with Varnish CachingThijs Feryn
A presentation about the usage and availability of Varnish on Kubernetes. This talk explores the capabilities of Varnish caching and shows how to use the Varnish Helm chart to deploy it to Kubernetes.
This presentation was delivered at K8SUG Singapore. See https://feryn.eu/presentations/accelerate-your-kubernetes-clusters-with-varnish-caching-k8sug-singapore-28-2024 for more details.
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...James Anderson
Effective Application Security in Software Delivery lifecycle using Deployment Firewall and DBOM
The modern software delivery process (or the CI/CD process) includes many tools, distributed teams, open-source code, and cloud platforms. Constant focus on speed to release software to market, along with the traditional slow and manual security checks has caused gaps in continuous security as an important piece in the software supply chain. Today organizations feel more susceptible to external and internal cyber threats due to the vast attack surface in their applications supply chain and the lack of end-to-end governance and risk management.
The software team must secure its software delivery process to avoid vulnerability and security breaches. This needs to be achieved with existing tool chains and without extensive rework of the delivery processes. This talk will present strategies and techniques for providing visibility into the true risk of the existing vulnerabilities, preventing the introduction of security issues in the software, resolving vulnerabilities in production environments quickly, and capturing the deployment bill of materials (DBOM).
Speakers:
Bob Boule
Robert Boule is a technology enthusiast with PASSION for technology and making things work along with a knack for helping others understand how things work. He comes with around 20 years of solution engineering experience in application security, software continuous delivery, and SaaS platforms. He is known for his dynamic presentations in CI/CD and application security integrated in software delivery lifecycle.
Gopinath Rebala
Gopinath Rebala is the CTO of OpsMx, where he has overall responsibility for the machine learning and data processing architectures for Secure Software Delivery. Gopi also has a strong connection with our customers, leading design and architecture for strategic implementations. Gopi is a frequent speaker and well-known leader in continuous delivery and integrating security into software delivery.
Transcript: Selling digital books in 2024: Insights from industry leaders - T...BookNet Canada
The publishing industry has been selling digital audiobooks and ebooks for over a decade and has found its groove. What’s changed? What has stayed the same? Where do we go from here? Join a group of leading sales peers from across the industry for a conversation about the lessons learned since the popularization of digital books, best practices, digital book supply chain management, and more.
Link to video recording: https://bnctechforum.ca/sessions/selling-digital-books-in-2024-insights-from-industry-leaders/
Presented by BookNet Canada on May 28, 2024, with support from the Department of Canadian Heritage.
Essentials of Automations: Optimizing FME Workflows with ParametersSafe Software
Are you looking to streamline your workflows and boost your projects’ efficiency? Do you find yourself searching for ways to add flexibility and control over your FME workflows? If so, you’re in the right place.
Join us for an insightful dive into the world of FME parameters, a critical element in optimizing workflow efficiency. This webinar marks the beginning of our three-part “Essentials of Automation” series. This first webinar is designed to equip you with the knowledge and skills to utilize parameters effectively: enhancing the flexibility, maintainability, and user control of your FME projects.
Here’s what you’ll gain:
- Essentials of FME Parameters: Understand the pivotal role of parameters, including Reader/Writer, Transformer, User, and FME Flow categories. Discover how they are the key to unlocking automation and optimization within your workflows.
- Practical Applications in FME Form: Delve into key user parameter types including choice, connections, and file URLs. Allow users to control how a workflow runs, making your workflows more reusable. Learn to import values and deliver the best user experience for your workflows while enhancing accuracy.
- Optimization Strategies in FME Flow: Explore the creation and strategic deployment of parameters in FME Flow, including the use of deployment and geometry parameters, to maximize workflow efficiency.
- Pro Tips for Success: Gain insights on parameterizing connections and leveraging new features like Conditional Visibility for clarity and simplicity.
We’ll wrap up with a glimpse into future webinars, followed by a Q&A session to address your specific questions surrounding this topic.
Don’t miss this opportunity to elevate your FME expertise and drive your projects to new heights of efficiency.
2. Introduction
JavaScript is a scripting language most often used
for client-side web development.
JavaScript is an implementation of the
ECMAScript standard.
The ECMAScript only defines the syntax/characteristics of the
language and a basic set of commonly used objects such as
Number, Date, Regular Expression, etc.
The JavaScript supported in the browsers typically
support additional objects.
e.g., Window, Frame, Form, DOM object, etc.
3. JavaScript / JScript
Different brands or/and different versions of
browsers may support different implementation of
JavaScript.
They are not fully compatible
JScript is the Microsoft version of JavaScript.
4. What can we do with JavaScript?
To create interactive user interface in a web
page (e.g., menu, pop-up alert, windows, etc.)
Manipulating web content dynamically
Change the content and style of an element
Replace images on a page without page reload
Hide/Show contents
Generate HTML contents on the fly
Form validation
AJAX (e.g. Google complete)
etc.
5. Useful Resources and Interesting
Examples
JavaScript Tutorials
http://www.w3schools.com/
Some examples from W3Schools
JavaScript Examples
JavaScript Object Examples
JavaScript HTML DOM Examples
JavaScript DHTML GUI Components
http://www.java2s.com/Code/JavaScript/GUI-
Components/CatalogGUI-Components.htm
EditGrid
http://www.editgrid.com/
7. Embedding JavaScript
Use the src attribute to include JavaScript codes
from an external file.
The included code is inserted in place.
<html>
<head><title>First JavaScript Program</title></head>
<body>
<script type="text/javascript"
src="your_source_file.js"></script>
</body>
</html> Inside your_source_file.js
document.write("<hr>");
document.write("Hello World Wide Web");
document.write("<hr>");
8. Embedding JavaScript
The scripts inside an HTML document is
interpreted in the order they appear in the
document.
Scripts in a function is interpreted when the function
is called.
So where you place the <script> tag matters.
9. Hiding JavaScript from Incompatible
Browsers
<script type="text/javascript">
<!–
document.writeln("Hello, WWW");
// -->
</script>
<noscript>
Your browser does not support JavaScript.
</noscript>
10. alert(), confirm(), and prompt()
<script type="text/javascript">
alert("This is an Alert method");
confirm("Are you OK?");
prompt("What is your name?");
prompt("How old are you?","20");
</script>
11. alert() and confirm()
Display a message in a dialog box.
The dialog box will block the browser.
alert("Text to be displayed");
Display a message in a dialog box with two buttons:
"OK" or "Cancel".
confirm() returns true if the user click "OK".
Otherwise it returns false.
var answer = confirm("Are you sure?");
12. prompt()
Display a message and allow the user to enter a value
The second argument is the "default value" to be
displayed in the input textfield.
Without the default value, "undefined" is shown in the
input textfield.
If the user click the "OK" button, prompt() returns the
value in the input textfield as a string.
If the user click the "Cancel" button, prompt() returns
null.
prompt("What is your student id number?");
prompt("What is your name?”, "No name");
13. Identifier
Same as Java/C++ except that it allows an
additional character – '$'.
Contains only 'A' – 'Z', 'a' – 'z', '0' – '9', '_', '$'
First character cannot be a digit
Case-sensitive
Cannot be reserved words or keywords
14. Variable and Variable Declaration
Local variable is declared using the keyword 'var'.
Dynamic binding – a variable can hold any type of value
If a variable is used without being declared, the variable is created
automatically.
If you misspell a variable name, program will still run (but works incorrectly)
<head><script type="text/javascript">
// We are in the default scope – the "window" object.
x = 3; // same as "window.x = 3"
var y = 4; // same as "y = 4" or "window.y = 4"
{ // Introduce a block to creat a local scope
x = 0; // Same as "window.x = 0"
var y = 1; // This is a local variable y
}
alert("x=" + x + ", y=" + y); // Print x=0, y=4
</script></head>
15. Data Types
Primitive data types
Number: integer & floating-point numbers
Boolean: true or false
String: a sequence of alphanumeric characters
Composite data types (or Complex data types)
Object: a named collection of data
Array: a sequence of values (an array is actually a predefined
object)
Special data types
Null: the only value is "null" – to represent nothing.
Undefined: the only value is "undefined" – to represent the value of
an unintialized variable
16. Strings
A string variable can store a sequence of alphanumeric
characters, spaces and special characters.
Each character is represented using 16 bit
You can store Chinese characters in a string.
A string can be enclosed by a pair of single quotes (') or
double quote (").
Use escaped character sequence to represent special
character (e.g.: ", n, t)
17. typeof operator
An unary operator that tells the type of its operand.
Returns a string which can be "number", "string",
"boolean", "object", "function", "undefined", and "null"
An array is internally represented as an object.
var x = "hello", y;
alert("Variable x value is " + typeof x );
alert("Variable y value is " + typeof y );
alert("Variable x value is " + typeof z );
18. Object
An object is a collection of properties.
Properties can be variables (Fields) or Functions
(Methods)
There is no "Class" in JavaScript.
19. Array
An array is represented by the Array object. To
create an array of N elements, you can write
var myArray = new Array(N);
Index of array runs from 0 to N-1.
Can store values of different types
Property "length" tells the # of elements in the
array.
Consists of various methods to manipulate its
elements. e.g., reverse(), push(),
concat(), etc
20. Array Examples
var Car = new Array(3);
Car[0] = "Ford";
Car[1] = "Toyota";
Car[2] = "Honda";
// Create an array of three elements with initial
// values
var Car2 = new Array("Ford", "Toyota", "Honda");
// Create an array of three elements with initial
// values
var Car3 = ["Ford", "Toyota", "Honda"];
21. // An array of 3 elements, each element is undefined
var tmp1 = new Array(3);
// An array of 3 elements with initial values
var tmp2 = new Array(10, 100, -3);
// An array of 3 elements with initial values
// of different types
var tmp3 = new Array(1, "a", true);
// Makes tmp3 an array of 10 elements
tmp3.length = 10; // tmp[3] to tmp[9] are undefined.
// Makes tmp3 an array of 100 elements
tmp3[99] = "Something";
// tmp[3] to tmp[98] are undefined.
22. Null & Undefined
An undefined value is represented by the
keyword "undefined".
It represents the value of an uninitialized variable
The keyword "null" is used to represent
“nothing”
Declare and define a variable as “null” if you want the
variable to hold nothing.
Avoid leaving a variable undefined.
23. Type Conversion (To Boolean)
The following values are treated as false
null
undefined
+0, -0, NaN (numbers)
"" (empty string)
24. Type Conversion
Converting a value to a number
var numberVar = someVariable – 0;
Converting a value to a string
var stringVar = someVariable + "";
Converting a value to a boolean
var boolVar = !!someVariable;
25. Operators
Arithmetic operators
+, -, *, /, %
Post/pre increment/decrement
++, --
Comparison operators
==, !=, >, >=, <, <=
===, !== (Strictly equals and strictly not equals)
i.e., Type and value of operand must match / must not match
26. == vs ===
// Type conversion is performed before comparison
var v1 = ("5" == 5); // true
// No implicit type conversion.
// True if only if both types and values are equal
var v2 = ("5" === 5); // false
var v3 = (5 === 5.0); // true
var v4 = (true == 1); // true (true is converted to 1)
var v5 = (true == 2); // false (true is converted to 1)
var v6 = (true == "1") // true
27. Logical Operators
! – Logical NOT
&& – Logical AND
OP1 && OP2
If OP1 is true, expression evaluates to the value of OP2.
Otherwise the expression evaluates to the value of
OP1.
Results may not be a boolean value.
|| – Logical OR
OP1 || OP2
If OP1 is true, expression evaluates to the value of OP1.
Otherwise the expression evaluates to the value of
OP2.
28. var tmp1 = null && 1000; // tmp1 is null
var tmp2 = 1000 && 500; // tmp2 is 500
var tmp3 = false || 500; // tmp3 is 500
var tmp4 = "" || null; // tmp4 is null
var tmp5 = 1000 || false; // tmp5 is 1000
// If foo is null, undefined, false, zero, NaN,
// or an empty string, then set foo to 100.
foo = foo || 100;
29. Operators (continue)
String concatenation operator
+
If one of the operand is a string, the other operand is
automatically converted to its equivalent string value.
Assignment operators
=, +=, -=, *=, /=, %=
Bitwise operators
&, |, ^, >>, <<, >>>
30. Conditional Statements
“if” statement
“if … else” statement
"? :" ternary conditional statement
“switch” statement
The syntax of these statements are similar to
those found in C and Java.
31. Looping Statement
“for” Loops
“for/in” Loops
“while” Loops
“do … while” Loops
“break” statement
“continue” statement
All except "for/in" loop statements have the
same syntax as those found in C and Java.
32. “for/in” statement
To iterate through all the properties in "object".
"variable" takes the name of each property in "object"
Can be used to iterate all the elements in an Array
object.
for (var variable in object) {
statements;
}
33. var keys = "", values = "";
var mylist = new Array("Chinese", "English", "Jap");
mylist.newField1 = "Something";
for (var key in booklist) {
keys += key + " ";
values += booklist[counter] + " ";
}
// keys becomes "0 1 2 newField1"
// values becomes "Chinese English Jap Something"
34. var obj = new Object(); // Creating an object
// Adding three properties to obj
obj.prop1 = 123;
obj.prop2 = "456";
obj["prop3"] = true; // same as obj.prop3 = true
var keys = "", values = "";
for (var p in obj) {
keys += p + " ";
values += obj[p] + " ";
}
alert(keys);
// Show "prop1 prop2 pro3 "
alert(values);
// Show "123 456 true "
Example: Using for … in loop with object
35. Functions (Return Values)
// A function can return value of any type using the
// keyword "return".
// The same function can possibly return values
// of different types
function foo (p1) {
if (typeof(p1) == "number")
return 0; // Return a number
else
if (typeof(p1) == "string")
return "zero"; // Return a string
// If no value being explicitly returned
// "undefined" is returned.
}
foo(1); // returns 0
foo("abc"); // returns "zero"
foo(); // returns undefined
36. Variable Arguments
// "arguments" is a local variable (an array) available
// in every function
// You can either access the arguments through parameters
// or through the "arguments" array.
function sum ()
{
var s = 0;
for (var i = 0; i < arguments.length; i++)
s += arguments[i];
return s;
}
sum(1, 2, 3); // returns 6
sum(1, 2, 3, 4, 5); // returns 15
sum(1, 2, "3", 4, 5); // returns ?
37. Built-In Functions
eval(expr)
evaluates an expression or statement
eval("3 + 4"); // Returns 7 (Number)
eval("alert('Hello')"); // Calls the function alert('Hello')
isFinite(x)
Determines if a number is finite
isNaN(x)
Determines whether a value is “Not a
Number”
38. Built-In Functions
parseInt(s)
parseInt(s, radix)
Converts string literals to integers
Parses up to any character that is not part of a valid integer
parseInt("3 chances") // returns 3
parseInt(" 5 alive") // returns 5
parseInt("How are you") // returns NaN
parseInt("17", 8) // returns 15
parseFloat(s)
Finds a floating-point value at the beginning of a string.
parseFloat("3e-1 xyz") // returns 0.3
parseFloat("13.5 abc") // returns 13.5
39. Creating Objects
JavaScript is not an OOP language.
"prototype" is the closest thing to "class" in
JavaScript.
Next few slides show several ways to create
objects
It is also possible to emulate "inheritance" in
JavasScript.
See JavaScript and Object Oriented Programming (OOP)
(http://www.javascriptkit.com/javatutors/oopjs.shtml)
40. Creating objects using new Object()
var person = new Object();
// Assign fields to object "person"
person.firstName = "John";
person.lastName = "Doe";
// Assign a method to object "person"
person.sayHi = function() {
alert("Hi! " + this.firstName + " " + this.lastName);
}
person.sayHi(); // Call the method in "person"
41. Creating objects using Literal Notation
var person = {
// Declare fields
// (Note: Use comma to separate fields)
firstName : "John",
lastName : "Doe",
// Assign a method to object "person"
sayHi : function() {
alert("Hi! " + this.firstName + " " +
this.lastName);
}
}
person.sayHi(); // Call the method in "person"
42. Creating objects using Literal Notation
(Nested notation is possible)
var triangle = {
// Declare fields (each as an object of two fields)
p1 : { x : 0, y : 3 },
p2 : { x : 1, y : 4 },
p3 : { x : 2, y : 5 }
}
alert(triangle.p1.y); // Show 3
43. Object Constructor and prototyping
function Person(fname, lname) {
// Define and initialize fields
this.firstName = fname;
this.lastName = lname;
// Define a method
this.sayHi = function() {
alert("Hi! " + this.firstName + " " +
this.lastName);
}
}
var p1 = new Person("John", "Doe");
var p2 = new Person("Jane", "Dow");
p1.sayHi(); // Show "Hi! John Doe"
p2.sayHi(); // Show "Hi! Jane Dow"
44. Adding methods to objects using prototype
// Suppose we have defined the constructor "Person"
// (as in the previous slide).
var p1 = new Person("John", "Doe");
var p2 = new Person("Jane", "Dow");
// Aattaching a new method to all instances of Person
Person.prototype.sayHello = function() {
alert("Hello! " + this.firstName + " " +
this.lastName);
}
// We can also introduce new fields via "prototype"
p1.sayHello(); // Show "Hello! John Doe"
p2.sayHello(); // Show "Hello! Jane Dow"
45. Events
An event occurs as a result of some activity
e.g.:
A user clicks on a link in a page
Page finished loaded
Mouse cursor enter an area
A preset amount of time elapses
A form is being submitted
46. Event Handlers
Event Handler – a segment of codes (usually a
function) to be executed when an event occurs
We can specify event handlers as attributes in
the HTML tags.
The attribute names typically take the form
"onXXX" where XXX is the event name.
e.g.:
<a href="…" onClick="alert('Bye')">Other
Website</a>
47. Event Handlers
Event Handlers Triggered when
onChange The value of the text field, textarea, or a drop down list
is modified
onClick A link, an image or a form element is clicked once
onDblClick The element is double-clicked
onMouseDown The user presses the mouse button
onLoad A document or an image is loaded
onSubmit A user submits a form
onReset The form is reset
onUnLoad The user closes a document or a frame
onResize A form is resized by the user
For a complete list, see http://www.w3schools.com/htmldom/dom_obj_event.asp
48. onClick Event Handler Example
<html>
<head>
<title>onClick Event Handler Example</title>
<script type="text/javascript">
function warnUser() {
return confirm("Are you a student?”);
}
</script>
</head>
<body>
<a href="ref.html" onClick="return warnUser()">
<!--
If onClick event handler returns false, the link
is not followed.
-->
Students access only</a>
</body>
</html>
49. onLoad Event Handler Example
<html><head>
<title>onLoad and onUnload Event Handler Example</title>
</head>
<body
onLoad="alert('Welcome to this page')"
onUnload="alert('Thanks for visiting this page')"
>
Load and UnLoad event test.
</body>
</html>
50. onMouseOver & onMouseOut Event Handler
<html>
<head>
<title>onMouseOver / onMouseOut Event Handler Demo</title>
</head>
<body>
<a href="http://www.cuhk.edu.hk"
onMouseOver="window.status='CUHK Home'; return true;"
onMouseOut="status=''"
>CUHK</a>
</body>
</html>
• When the mouse cursor is over the link, the browser displays the text
"CUHK Home" instead of the URL.
• The "return true;" of onMouseOver forces browser not to display the URL.
• window.status and window.defaultStatus are disabled in Firefox.
51. onSubmit Event Handler Example
<html><head>
<title>onSubmit Event Handler Example</title>
<script type="text/javascript">
function validate() {
// If everything is ok, return true
// Otherwise return false
}
</script>
</head>
<body>
<form action="MessageBoard" method="POST"
onSubmit="return validate();"
>
…
</form></body></html>
• If onSubmit event handler returns false, data is not submitted.
• If onReset event handler returns false, form is not reset
52. Build-In JavaScript Objects
Object Description
Array Creates new array objects
Boolean Creates new Boolean objects
Date Retrieves and manipulates dates and times
Error Returns run-time error information
Function Creates new function objects
Math Contains methods and properties for performing mathematical
calculations
Number Contains methods and properties for manipulating numbers.
String Contains methods and properties for manipulating text strings
• See online references for complete list of available methods in these
objects: http://javascript-reference.info/
53. String Object (Some useful methods)
length
A string property that tells the number of character in the string
charAt(idx)
Returns the character at location "idx"
toUpperCase(), toLowerCase()
Returns the same string with all uppercase/lowercase letters
substring(beginIdx)
Returns a substring started at location "beginIdx"
substring(beginIdx, endIdx)
Returns a substring started at "beginIdx" until "endIdx" (but
not including "endIdx"
indexOf(str)
Returns the position where "str" first occurs in the string
54. Error and Exception Handling in JavaScript
Javascript makes no distinction between Error and
Exception (Unlike Java)
Handling Exceptions
The onError event handler
A method associated with the window object.
It is called whenever an exception occurs
The try … catch … finally block
Similar to Java try … catch … finally block
For handling exceptions in a code segment
Use throw statement to throw an exception
You can throw value of any type
The Error object
Default object for representing an exception
Each Error object has a name and message properties
55. How to use “onError” event handler?
<html>
<head>
<title>onerror event handler example</title>
<script type="text/javascript">
function errorHandler(){
alert("Error Ourred!");
}
// JavaScript is casesensitive
// Don't write onerror!
window.onError = errorHandler;
</script>
</head>
<body>
<script type="text/javascript">
document.write("Hello there;
</script>
</body>
</html>
56. try … catch … finally
try {
// Contains normal codes that might throw an exception.
// If an exception is thrown, immediately go to
// catch block.
} catch ( errorVariable ) {
// Codes here get executed if an exception is thrown
// in the try block.
// The errorVariable is an Error object.
} finally {
// Executed after the catch or try block finish
// Codes in finally block are always executed
}
// One or both of catch and finally blocks must accompany the try
block.
57. try … catch … finally example
<script type="text/javascript">
try{
document.write("Try block begins<br>");
// create a syntax error
eval ("10 + * 5");
} catch( errVar ) {
document.write("Exception caught<br>");
// errVar is an Error object
// All Error objects have a name and message properties
document.write("Error name: " + errVar.name + "<br>");
document.write("Error message: " + errVar.message +
"<br>");
} finally {
document.write("Finally block reached!");
}
</script>
58. Throwing Exception
<script type="text/javascript">
try{
var num = prompt("Enter a number (1-2):", "1");
// You can throw exception of any type
if (num == "1")
throw "Some Error Message";
else
if (num == "2")
throw 123;
else
throw new Error ("Invalid input");
} catch( err ) {
alert(typeof(errMsg) + "n" + err);
// instanceof operator checks if err is an Error object
if (err instanceof Error)
alert("Error Message: " + err.message);
}
</script>