JavaScript is a scripting language used to make web pages interactive. It was created in 1995 and standardized as ECMAScript. JavaScript can access and modify the content, structure, and style of documents. It is used to handle events, perform animations, and interact with forms on web pages. Common uses of JavaScript include form validation, navigation menus, lightboxes, and sliders on websites.
Things you should know about Javascript ES5. A programming language that enables you to create dynamically updating content, control multimedia, animate images, and pretty much everything else
What is JavaScript?
JavaScript is a very powerful client-side scripting language. JavaScript is used mainly for enhancing the interaction of a user with the webpage. In other words, you can make your webpage more lively and interactive, with the help of JavaScript. JavaScript is also being used widely in game development and Mobile application development.
PHP stands for “PHP: Hypertext Preprocessor”. It is very good for creating dynamic content. PHP is a widely-used, free, and efficient alternative to competitors such as Microsoft's ASP.
In JavaScript, almost "everything" is an object.
-Booleans can be objects (if defined with the new keyword)
-Numbers can be objects (if defined with the new keyword)
-Strings can be objects (if defined with the new keyword)
-Dates are always objects
-Maths are always objects
-Regular expressions are always objects
-Arrays are always objects
-Functions are always objects
-Objects are always objects
JavaScript - An Introduction is a beginner's guide to JavaScript. It starts with very basic level and goes to intermediate level. You'll be introduced with every language constructs, Event handling, Form handling and AJAX which is supported by JavaScript with XMLHttpRequest object. This XHR object is discussed in enough detail so that you can understand how the underlying AJAX functionality works in jQuery. At the end it discusses advance concepts and library build on/around JavaScript.
Generally speaking, a function is a "subprogram" that can be called by code external (or internal in the case of recursion) to the function. Like the program itself, a function is composed of a sequence of statements called the function body. Values can be passed to a function, and the function will return a value.
In JavaScript, functions are first-class objects, because they can have properties and methods just like any other object. What distinguishes them from other objects is that functions can be called. In brief, they are Function objects.
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.
Things you should know about Javascript ES5. A programming language that enables you to create dynamically updating content, control multimedia, animate images, and pretty much everything else
What is JavaScript?
JavaScript is a very powerful client-side scripting language. JavaScript is used mainly for enhancing the interaction of a user with the webpage. In other words, you can make your webpage more lively and interactive, with the help of JavaScript. JavaScript is also being used widely in game development and Mobile application development.
PHP stands for “PHP: Hypertext Preprocessor”. It is very good for creating dynamic content. PHP is a widely-used, free, and efficient alternative to competitors such as Microsoft's ASP.
In JavaScript, almost "everything" is an object.
-Booleans can be objects (if defined with the new keyword)
-Numbers can be objects (if defined with the new keyword)
-Strings can be objects (if defined with the new keyword)
-Dates are always objects
-Maths are always objects
-Regular expressions are always objects
-Arrays are always objects
-Functions are always objects
-Objects are always objects
JavaScript - An Introduction is a beginner's guide to JavaScript. It starts with very basic level and goes to intermediate level. You'll be introduced with every language constructs, Event handling, Form handling and AJAX which is supported by JavaScript with XMLHttpRequest object. This XHR object is discussed in enough detail so that you can understand how the underlying AJAX functionality works in jQuery. At the end it discusses advance concepts and library build on/around JavaScript.
Generally speaking, a function is a "subprogram" that can be called by code external (or internal in the case of recursion) to the function. Like the program itself, a function is composed of a sequence of statements called the function body. Values can be passed to a function, and the function will return a value.
In JavaScript, functions are first-class objects, because they can have properties and methods just like any other object. What distinguishes them from other objects is that functions can be called. In brief, they are Function objects.
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.
Mule Munit
1. Solution for JUnit Functional test cases By: Kiet Bui 22-Sep-2015
2. Abstract • The main motto of this white paper is what the issues to write test cases using JUnit are and how to overcome those issues.
3. Table of Contents • ABSTRACT 1. INTRODUCTION 2. PROBLEM STATEMENT 3. SOLUTION 4. BENEFITS 5. CONCLUSION 6. REFERENCES 7. ABOUT THE AUTHOR 8. ABOUT WHISHWORKS
4. Introduction • We have multiple unit test frameworks to write unit and functional test cases for our services. When we write functional test cases using JUnit we can’t mock mule components. To resolve this issues we have to use MUnit and I am going to explain what is the problem with JUnit and how to resolve using MUnit in the below.
5. Problem Statement • When we write functional test cases using JUnit, the test case will directly connect to original components like SAP, Salesforce etc. and insert/select the data. It is the issue in JUnit functional test case why because we are writing functional test cases to check whether entire functionality is working as expected or not without modifying the original components(SAP,Salesforce,Database) data, but in JUnit functional test cases it is directly connecting to original components and modifying the original data. • Examples: 1. SAP Connector • Mule flow:
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...Jeffrey Haguewood
Sidekick Solutions uses Bonterra Impact Management (fka Social Solutions Apricot) and automation solutions to integrate data for business workflows.
We believe integration and automation are essential to user experience and the promise of efficient work through technology. Automation is the critical ingredient to realizing that full vision. We develop integration products and services for Bonterra Case Management software to support the deployment of automations for a variety of use cases.
This video focuses on the notifications, alerts, and approval requests using Slack for Bonterra Impact Management. The solutions covered in this webinar can also be deployed for Microsoft Teams.
Interested in deploying notification automations for Bonterra Impact Management? Contact us at sales@sidekicksolutionsllc.com to discuss next steps.
"Impact of front-end architecture on development cost", Viktor TurskyiFwdays
I have heard many times that architecture is not important for the front-end. Also, many times I have seen how developers implement features on the front-end just following the standard rules for a framework and think that this is enough to successfully launch the project, and then the project fails. How to prevent this and what approach to choose? I have launched dozens of complex projects and during the talk we will analyze which approaches have worked for me and which have not.
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.
Connector Corner: Automate dynamic content and events by pushing a buttonDianaGray10
Here is something new! In our next Connector Corner webinar, we will demonstrate how you can use a single workflow to:
Create a campaign using Mailchimp with merge tags/fields
Send an interactive Slack channel message (using buttons)
Have the message received by managers and peers along with a test email for review
But there’s more:
In a second workflow supporting the same use case, you’ll see:
Your campaign sent to target colleagues for approval
If the “Approve” button is clicked, a Jira/Zendesk ticket is created for the marketing design team
But—if the “Reject” button is pushed, colleagues will be alerted via Slack message
Join us to learn more about this new, human-in-the-loop capability, brought to you by Integration Service connectors.
And...
Speakers:
Akshay Agnihotri, Product Manager
Charlie Greenberg, Host
GraphRAG is All You need? LLM & Knowledge GraphGuy Korland
Guy Korland, CEO and Co-founder of FalkorDB, will review two articles on the integration of language models with knowledge graphs.
1. Unifying Large Language Models and Knowledge Graphs: A Roadmap.
https://arxiv.org/abs/2306.08302
2. Microsoft Research's GraphRAG paper and a review paper on various uses of knowledge graphs:
https://www.microsoft.com/en-us/research/blog/graphrag-unlocking-llm-discovery-on-narrative-private-data/
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
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.
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.
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.
2. : AGENDA
History
The Three Layers of the Web
Programming with JavaScript
Document Access
Browser Access
Events
Animation
Forms
Go Pro
Errors and Debugging
Ajax
CoffeeScript
Knockout.js
3. : HISTORY
Created by Brendan Eich in 1995 for Netscape
Navigator 2 release. Called Mocha and later
LiveScript.
On release of 1.1 name was changed to
JavaScript.
In 1997 JavaScript 1.1 was submitted to ECMA
as a proposal. TC39 was assigned to standardize
the syntax and semantics of the language.
TC39 released ECMA-262 known as
ECMAScript.
ECMAScript is basis for all the JavaScript
implementations.
4. : THE THREE LAYERS OF THE WEB
HTML for Content
<p class=“warning”>There is no <em>download
link</em> on this page.</p>
CSS for Presentation
.warning { color: red; }
JavaScript for Behavior
<script type=“text/javascript”>
window.alert(document.getElementsByClassName(“
warning”)[0].innerHTML);
</script>
5. LIBRARIES
JavaScript can be used to create reusable libraries.
Some are:
Prototype
Script.aculo.us
Yahoo! User Interface Library
Dojo
jQuery
MooTools
Knockout
6. : PROGRAMMING WITH JAVASCRIPT
Running a JavaScript program/script.
There are two ways:
<script type=“text/javascript”>
window.alert(“JavaScript”);
</script>
<script type=“text/javascript”
src=“myScript.js”></script>
<script type=“text/javascript” src=“myScript.js”
defer></script>
There was once a
language attribute
also in the script tag.
i.e.,
language=“javascript
1.5” or whatever
7. STATEMENTS, COMMENTS AND
VARIABLES
Statements: Can be separated by new line or
semicolon.
Comments: 2 types.
Single line: // Author: Manvendra SK
Multi line: /* Perhaps some lengthy
license. */
Variables: Overwrites when redefined. 2 types.
Local: Declared using var keyword.
Global: Declared without var keyword or attached to
window object directly. i.e., window.someVar =
“value”;
We use assignment opertor (=) to assign values.
8. VARIABLE DATA TYPES
JavaScript is loosely typed language. While Java
is strictly typed.
Numbers: 3, -3, 3.33, -3.33. These all are numbers
in JS, whether it’s some integer or floating point
number.
Operations: addition (+), subtraction (-), division
(/), multiplication (*), modulo division (%)
Result is always promoted to float whenever possible.
i.e., 5 / 3, 3 / 5, 0.5 * 5, 0.5 + 5
Assignment operators: +=, -=, /=, *=, %=
Special operators: increment (++), decrement (--)
9. STRINGS
Strings: Series/sequence of characters from zero
to infinity. Can contain any character. Can be
created using single or double quotes.
Use backslash () to escape special characters.
i.e. “Hi this is “special” word here.”
“Hi this is ttabt here.“
Operations: Concatenation.
i.e., “Some ” + “string.”
“Some ” + someVar + “.”
var name = “Manvendra ”;
name = name + “SK”; or name += “SK”;
10. BOOLEANS
Booleans: Are you saying true or false.
Cases for true
“<1 space here>”, “string”, “undefined”, 1, 2, 3, -3, -2, -1,
true; all represents true value.
Cases for false
“<empty string>”, undefined, null, void(0), 0, false; all
represents false value.
Universal checking program:
<any value> ? “True” : “False”;
11. ARRAYS
Arrays: To hold a collection of items together.
Can store any data types together in single
array.
i.e., var array = [1, {“k”: “v”}, 2.3, [“another”,
“array”]];
2 types: Single dimensional and Multi
dimensional (array of array(s)).
i.e., var array = [“1st”, “2nd”, “3rd”];
var arrayM = [[“1st”], [“2nd”], [“3rd”]];
Accessing values stored in array: We use what is
called index which is some integer ranges from 0
to array’s length - 1.
13. ASSOCIATIVE ARRAYS
Associative Arrays: Kind of Java Maps.
Remember the Key-Value pairs?
i.e., var pincodes = [];
pincodes[“khanpur”] = 110062;
pincodes[“badarpur”] = 110044;
pincodes[“saket”] = 110017;
Accessing Associative arrays:
i.e., pincodes[“saket”]; // 110017
pincodes[“badarpur”]; // You guess here.
Associative arrays are actually Objects!
14. CONTROLLING PROGRAM FLOW
Conditions: Making decisions.
if statement: Expects a boolean expression.
Some comparison operators that we can use are:
less than (<), greater than (>), less than
equal to (<=), greater than equal to (>=),
equals to (==), not equals to (!=), not (!)
Multiple conditions operators: and (&&), or (||)
Expression is combination of values, variable
references, function calls and operators that evaluates
to some value.
15. IF STATEMENTS
if-else statement: if condition is false then execute the
else block.
else-if statements: It’s not reverse of the if-else. It just
says if condition false then check this (else-if)
condition.
How it looks like:
i.e., if (condition) {
// Some true code
} else if (condition) {
// Some 2nd
true code
} else {
// Some false code
}
16. LOOPS
Loops: Minimizing repetition
while loop: Simplest loop. While condition is true
run the code. Condition can be any expression.
do-while loop: Runs at least once, as condition is
evaluated after running the loop body. As always
condition can be any expression.
for loop: Succinct all the above!
All the loops must consist three things:
Incrementer, conditional expression, logic to
increase the incrementer – so that condition
eventually turns to false.
17. LOOPS FACES
How these look like?:
while loop: i.e., while (condition) {
// Run the code
}
do-while loop: i.e., do {
// Run the code
} while (condition)
for loop: i.e., for (declaration; condition; action) {
// Run the code
}
18. FUNCTIONS: WRITING CODE FOR
LATER
If we want to re-run some code again and again
from different places, then put that code in a
function and call this function.
Functions are like little packages of JavaScript
code waiting to be called into action.
Some predefined functions are alert(), prompt()
and confirm(). These all are available on the
top level window object.
Functions can return values. Values returned by
predefined window functions are: undefined,
user input string or empty string or null,
true or false.
19. MY FUNCTIONS
Writing your own functions:
i.e., function sayHi() {
alert(“Hi”);
}
Calling functions: i.e., sayHi();
Parentheses are
needed to call the
functions.
20. ARGUMENTS: PASSING DATA TO
FUNCTIONS
Arguments or parameters: When a function
expects something then it’s called a parameters.
While we pass the expected data to a function
then it’s called arguments.
Declaring parameters:
i.e., function sayHi(name) {
alert(“Hi ” + name);
}
Calling function with arguments:
i.e., sayHi(“Manvendra”);
Functions can contain any number of
parameters.
21. A SECRET ARRAY
arguments array: Functions have one secret.
They contain the arguments array. This array
contains all the arguments passed to the
function.
i.e., function poll() {
var affirmative = arguments[0];
var negative = arguments[1];
}
// Calling the function
poll(“affirmative”, “negative”);
22. RETURN AND SCOPE
Returning: As we know functions can return the
values. We use return statement to return
something.
i.e., function sayHi(name) {
return “Hi ” + name;
}
Scope: Can be local or global. Ensure functions
always declare variables using the var keyword
or else they will look for it in global scope and
will modify them.
23. I HAVE ANOTHER FACE
Alternate function syntax:
i.e., var sayHi = function() {
alert(“Hi”);
}
24. OBJECTS
Objects exist as a way of organizing variables
and functions into logical groups. If we create
objects to organize some variables and functions
then the terminology changes slightly, now they
are called properties and methods respectively.
We have used the objects in this presentation.
Where? Didn’t you use arrays? Array is an object
of JavaScript. Same array can be created as
follows: i.e., var array = new Array(1, 2, 3);
This is called instantiation of object using the
new keyword.
Built-in objects: String, Date, Math, Boolean,
Number, RegExp, Object, Array
25. CREATE YOUR OWN OBJECTS
We can create our own objects to encapsulate the
data and logic. i.e.,
var Person = new Object();
Person.name = “Manvendra SK”;
Person.age = 23;
Person.speakName = function() {
alert(“Hello, I’m ” + this.name);
};
Person.speakName();
27. CREATING REAL OBJECTS
We can create objects those can be instantiated
using the new keyword.
var Person = function(name, age) {
this.name = name;
this.age = age;
};
Person.prototype.speakName = function() {
alert(“Hello, I’m ” + this.name);
};
28. USING REAL OBJECTS
var manvendra = new Person(“Manvendra”, 23);
manvendra.speakName();
This method of creating objects is called Prototype
pattern.
29. : DOCUMENT ACCESS
Document Object Model: Mapping your HTML.
The browser stores its interpreted HTML code as
a structure of JavaScript objects, called DOM.
DOM consists of Nodes. There are currently 12
types of nodes. Most of which we use are
ELEMENT_NODE (1), ATTRIBUTE_NODE
(2), TEXT_NODE (3).
We can use the nodeType property to check the
type of the node. i.e.,
document.getElementsByTagName(“h1”)
[0].nodeType; // 1
31. GRAND NODE
In fact there is an universal node. document
node. This node exists even if the document is
blank.
32. DOM MANIPLUATION
Access elements: Use document.get*() methods.
Alter properties. It depends on the type of node.
If it’s some html node like div, h1, span, label then
you would set its innerHTML property or sometimes
textContent property, if element is li.
If it’s some input element then you would set its
value property.
Traversal: We use nextSibling,
previousSibling, parent, children etc.
properties.
33. Altering style: We can use the style property to
alter the style of any element. i.e.,
document.getElementsByTagName (“body”)
[0].style.background = “#ddd”;
document.getElementByTagName(“label”)
[0].style.position = “absolute”;
document.getElementByTagName(“label”)
[0].style.left = “300px”;
We can also use className property to access or
set a CSS class directly. It’s directly available on
the element.
MANIPLUATING STYLE AND
CLASSES
34. : BROWSER ACCESS
Browser Object Model: It targets the browser
environment rather than the document. It offers
some objects allow us to handle the browser by
our script.
window
location
navigator
screen
history
35. : EVENTS
JS enables us to write scripts that are triggered
by events that occur during the user’s
interaction with the page, like clicking a
hyperlink, scrolling the browser’s viewport,
typing a value into a form field or submitting a
form.
DOM Levels:
DOM Level 1
DOM Level 2
There is also DOM
Level 3
36. EVENT HANDLERS
Simplest way to run JS code in response to an
event is to use an event handler (function).
How to attach?: element.onevent = eventHandler
Event
handler
Note: I didn’t provide
parentheses to eventHandler
37. DEFAULT ACTIONS AND THIS
Default actions: Things the browser normally
does in response to events.
How to prevent?: return false or true to cancel
or let the default action follow.
this keyword. this is an object reference that you
get when executing a method on an object. When
browser invokes the event handler on some event
for an element, then within the event handler
this points to the element on which event is
fired.
We can’t set the value of this object.
38. EVENT LISTENERS
What’s wrong with event handlers? You can’t
assign multiple event handlers to an event. i.e.,
element.onclick = firstHandler;
element.onclick = secondHandler;
Now only secondHandler will be called, as it has
replaced the firstHandler.
However we can assign as many event listeners
as we want to an event of an element, and all of
them will be called.
39. IT’S LIKE HUB
As we can see we can plugin many event
listeners at once.
Event
listener
Event
listener
Event
listener
40. ATTACHING EVENT LISTENERS
How to attach event listener?: i.e.,
element.addEventListener(“event”,
eventListener, false);
for IE, element.attachEvent(“onevent”,
eventListener);
Object detection:
typeof element.property != “undefined”
41. EVENT PARAMETER
Event parameter of the listener: Browser
automatically passes the event parameter to the
event listener function. i.e.,
function someClickEventListener (event) {
// Use event argument’s methods
}
event parameter has some important methods.
Some of them are: preventDefault() and
stopPropagation().
42. EVENT OBJECT
IE has its own way. If you remember IE doesn’t
expect third argument. It means it also doesn’t
pass event parameter to the event listener
function. Then how to access it?
In IE there is a global event object, which is
window.event. And it has equivalent properties
like the event parameter which are:
returnValue which we can set to false, and
cancelBuble which we can set to true. These
two settings achieves the same effect as its event
parameter counterpart’s methods.
43. DETACHING EVENT LISTENERS
How to detach event listener: i.e.,
element.removeEventListener(“event”,
eventListener, false);
for IE, element.detachListener(“onevent”,
eventListener);
44. EVENT PROPAGATION
What is event propagation?
Event propagation runs in three phases:
Capture phase: Document to element.
Target phase: Element which triggered the event.
Bubbling phase: Element to Document.
45. : ANIMATION
Animation is nothing but the frames those comes
one by one and complete in some time from start
to end. We need some way to schedule the frames
to come one after other.
JavaScript provides two methods setTimeout
and setInterval both of which are available on
window object. These two methods comes with
their companions clearTimeout and
clearInterval respectively.
setTimeout calls the task only once, while
setInterval calls the task repeatedly.
46. USING SET* METHODS
How to use?: Both methods have same syntax.
i.e.,
window.setTimeout(callback, timeout);
Both methods return a timer’s id which (timer)
they have created. It’s where we use the clear*
methods, passing them this timer’s id.
Callback is a function that is called by the
script that expect it as a parameter upon its
task completion. It means functions can be
passed as parameters like normal variables.
Just pass function name without parentheses.
47. : FORMS
Forms are there to collect the data. And
JavaScript is known for its form validations. But
as we know JavaScript is more than that.
However forms are still integral part. Whenever
there is a single input box it must be contained
inside a form.
Some DOM Methods for HTML Form Controls
Method Element(s) Description
blur input, select,
textarea
Removes keyboard
focus
click input Simulates a mouse
click
focus input, select,
textarea
Gives keyboard
focus
48. …Continued
Some DOM Properties for HTML Form Controls
reset form Reset all control’s
value to default
select input, textarea Selects all the
contents
submit form Submits the form
without triggering
submit event
Property Element(s) Description
elements form A node list
containing all the
form controls
49. …Continued
checked input True only for
checkbox and radio
inputs if checked
else false
disabled button, input,
optgroup, option,
select, textarea
While true controls
is unavailable to
user
form button, input,
option, select,
textarea
A reference to the
form containing this
control
index option Index of this option
control within the
select control that
contains it (0 for
first)
50. …Continued
options select A node list
containing all the
options controls
selected option True if this option is
selected else false.
selectedIndex select Index of the
currently selected
option (0 for the
first)
value button, input,
option, select,
textarea
Current value of
this control, as it
would be submitted
to the server
51. Some DOM Events for HTML Form Controls
Event Element(s) Triggered when…
change input, select,
textarea
Control lost focus
after its value has
changed
select input, textarea User has selected
some text
submit form User has requested
to submit the form
52. HANDLING THE SUBMIT EVENT
How to handle the submit event of the form?: i.e.,
form.addEventListener(“submit”,
submitListener, false);
For IE, form.attachEvent(“onsubmit”,
submitListener)
53.
54. : Errors and Debugging
Every browser has its own way for JavaScript
error messages. As each browser has different
implementation of the language. Most sensible
are Firefox’s.
Three kinds of error can occur in JavaScript.
Syntax Errors: Occur when your code violates the
fundamental rules (or syntax) of the language.
Runtime Errors: Occur when a valid piece of code
tries to do something that it’s not allowed to do, or
that is impossible.
Logic Errors: Occur when there are bugs in our code.
And we don’t get intended results from the script.
55. DEBUGGING TOOLS
There are JavaScript debugging tools built right
into the browsers.
Some are:
Firefox: Ctrl+Shift+I
Chrome: Ctrl+Shift+I
Opera: Ctrl+Shift+I
Safari: Ctrl+Alt+I
IE: F12
Firefox’s Firebug: F12
Inside these tools we can execute our script step
by step, watch for variables values and more.
56. : AJAX
AJAX acronym for Asynchronous JavaScript And
XML.
This technology is used for asynchronous
information transfer between browser and server
in bite-size chunks.
It is supported using the XMLHttpRequest
object built right into the browser.
Firstly implemented by IE 5 and 6 and they did
using the ActiveX object.
IE 7+ don’t use ActiveX object, instead they use
XMLHttpRequest.
57. INITIALIZE
How to initialize?: i.e.,
var requester = new XMLHttpRequest();
For IE,
var requester = new
ActiveXObject(“Microsoft.XMLHTTP”);
58. PROPER INSTANTIATION
Example of instantiating the XMLHttpRequest:
try {
var requester = new XMLHttpRequest();
} catch (error) {
try {
var requester = new
ActiveXObject(“Microsoft.XMLHTTP”);
} catch (error) {
var requester = null;
}
}
59. USING THE XHR
Using the XMLHttpRequest:
requester.setRequestHeader(“Content-Type”,
“application/x-www-form-urlencoded”); //
Optional
requester.open(“GET”, “/url.xml”, true);
requester.send(null);
requester.onreadystatechange = function() {
// Use requester.readyState property, which is 0
to 4, uninitialized, loading, loaded, interactive,
complete.
// Also now check requester.state property, which
contains HTTP codes of response. For success use
200 or 304, other are failures.
60. READ THE DATA FROM XHR
Where is the data:
responseXML: If the server responsed with content-
type set to text/xml then we have DOM. We can
traverse it as usual to get the data. It also populates
the responseText property, just for an alternative.
responseText: If the server responsed with the
content-type set to text/plain or text/html then we
have single string as the data. But now the
responseXML will be empty.
61. : COFFEESCRIPT
CoffeeScript is a new way to write tricky and
lengthy JavaScript easily and intuitively.
http://coffeescript.org/
62. : KNOCKOUT.JS
Knockout is a MVVM (Model-View-ViewModel)
library. MVVM is an extension of MVC,
originally created by Microsoft. Knockout allows
us to do UI bindings declaratively rather than
using JS.
http://knockoutjs.com/
63.
64. : EXERCISES
Prompt for amount, interest rate and number of
years. Now calculate the Simple Interest using
the values, and show in alert box.
Check if any given string is palindrome. Use
input element to get the string.
Calculate the area of circle.
On click of input button ask the user name and
display it inside a input text box.
Copy text of first text box to second text box on
every change of value in first text box.
65. …Continued
Allow submission of form only if the user has
entered his name (should not be blank) and age
(must be greater than or equals to 18).
Change the color of a div element on mouse over
and restore it on mouse out.
Create a Clock object and encapsulate methods
like start and stop for starting and stopping the
clock. Implementation must use Prototype
pattern and event listener mechanism. Display
the clock in some div or span or p element.