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.
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 Arithmetic Operators
Arithmetic operators are used to perform arithmetic between variables and/or values.
JavaScript Assignment Operators
Assignment operators are used to assign values to JavaScript variables.
JavaScript String Operators
The + operator, and the += operator can also be used to concatenate (add) strings.
Comparison Operators
Comparison operators are used in logical statements to determine equality or difference between variables or values.
Conditional (Ternary) Operator
The conditional operator assigns a value to a variable based on a condition.
Logical Operators
Logical operators are used to determine the logic between variables or values.
JavaScript Bitwise Operators
Bit operators work on 32 bits numbers. Any numeric operand in the operation is converted into a 32 bit number. The result is converted back to a JavaScript number.
The delete Operator
The delete operator deletes a property from an object:
JavaScript String:
The String object lets you work with a series of characters; it wraps Javascript's string primitive data type with a number of helper methods.
As JavaScript automatically converts between string primitives and String objects, you can call any of the helper methods of the String object on a string primitive.
JavaScript Arrays:
The Array object lets you store multiple values in a single variable. It stores a fixed-size sequential collection of elements of the same type. An array is used to store a collection of data, but it is often more useful to think of an array as a collection of variables of the same type.
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.
JavaScript Events:
HTML events are "things" that happen to HTML elements. When JavaScript is used in HTML pages, JavaScript can "react" on these events.
What can JavaScript Do?
Event handlers can be used to handle, and verify, user input, user actions, and browser actions:
Things that should be done every time a page loads
Things that should be done when the page is closed
Action that should be performed when a user clicks a button
Content that should be verified when a user inputs data
This year ECMA International will be ratifying the biggest update to the JavaScript language in its history. In this talk we'll look at key features already appearing in browsers as well as those coming in the near future. We'll also explore how you can begin leveraging the power of ES6 across all browsers today. If you haven't looked at JavaScript recently, you soon realize that a bigger, better world awaits.
If you don't have knowledge of HTML, CSS & JavaScript than you may face some difficulties in validating a HTML form yet I will make the entire step very easy to understand by you.
Form validation normally used to occur at the server, after the client had entered all the necessary data and then pressed the Submit button. If the data entered by a client was incorrect or was simply missing, the server would have to send all the data back to the client and request that the form be resubmitted with correct information. This was really a lengthy process which used to put a lot of burden on the server.
JavaScript provides a way to validate form's data on the client's computer before sending it to the web server. Form validation generally performs two functions.
Basic Validation − First of all, the form must be checked to make sure all the mandatory fields are filled in. It would require just a loop through each field in the form and check for data.
Data Format Validation − Secondly, the data that is entered must be checked for correct form and value. Your code must include appropriate logic to test correctness of data.
Slide ini merupakan tutorial dasar dari penggunaan javaScript. Bagaimana javascript berjalan dan penggunaannya, javaScript statement, javaScript variable, javaScript looping, dan javaScript operator.
JavaScript is lingua franca of the Web. It's pervasive and since 1999 a standard ( ECMAScript 262). Yes, there are other technologies you can use: Flash, Java Applets, Dart, but none of these have the overwhelming support and community that JavaScript does. Over the years it has been maligned as a poorly designed language but I will argue that it has just been misunderstood. This talk will focus on the fundamentals of the language and its integration with the browser, the DOM and server communication via JSON and Ajax.
In the talk Bryan will present:
* Language fundamentals
* Object-Oriented programming
* Functional programming
* DOM APIs
* Event model
* Odds and ends
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 Arithmetic Operators
Arithmetic operators are used to perform arithmetic between variables and/or values.
JavaScript Assignment Operators
Assignment operators are used to assign values to JavaScript variables.
JavaScript String Operators
The + operator, and the += operator can also be used to concatenate (add) strings.
Comparison Operators
Comparison operators are used in logical statements to determine equality or difference between variables or values.
Conditional (Ternary) Operator
The conditional operator assigns a value to a variable based on a condition.
Logical Operators
Logical operators are used to determine the logic between variables or values.
JavaScript Bitwise Operators
Bit operators work on 32 bits numbers. Any numeric operand in the operation is converted into a 32 bit number. The result is converted back to a JavaScript number.
The delete Operator
The delete operator deletes a property from an object:
JavaScript String:
The String object lets you work with a series of characters; it wraps Javascript's string primitive data type with a number of helper methods.
As JavaScript automatically converts between string primitives and String objects, you can call any of the helper methods of the String object on a string primitive.
JavaScript Arrays:
The Array object lets you store multiple values in a single variable. It stores a fixed-size sequential collection of elements of the same type. An array is used to store a collection of data, but it is often more useful to think of an array as a collection of variables of the same type.
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.
JavaScript Events:
HTML events are "things" that happen to HTML elements. When JavaScript is used in HTML pages, JavaScript can "react" on these events.
What can JavaScript Do?
Event handlers can be used to handle, and verify, user input, user actions, and browser actions:
Things that should be done every time a page loads
Things that should be done when the page is closed
Action that should be performed when a user clicks a button
Content that should be verified when a user inputs data
This year ECMA International will be ratifying the biggest update to the JavaScript language in its history. In this talk we'll look at key features already appearing in browsers as well as those coming in the near future. We'll also explore how you can begin leveraging the power of ES6 across all browsers today. If you haven't looked at JavaScript recently, you soon realize that a bigger, better world awaits.
If you don't have knowledge of HTML, CSS & JavaScript than you may face some difficulties in validating a HTML form yet I will make the entire step very easy to understand by you.
Form validation normally used to occur at the server, after the client had entered all the necessary data and then pressed the Submit button. If the data entered by a client was incorrect or was simply missing, the server would have to send all the data back to the client and request that the form be resubmitted with correct information. This was really a lengthy process which used to put a lot of burden on the server.
JavaScript provides a way to validate form's data on the client's computer before sending it to the web server. Form validation generally performs two functions.
Basic Validation − First of all, the form must be checked to make sure all the mandatory fields are filled in. It would require just a loop through each field in the form and check for data.
Data Format Validation − Secondly, the data that is entered must be checked for correct form and value. Your code must include appropriate logic to test correctness of data.
Slide ini merupakan tutorial dasar dari penggunaan javaScript. Bagaimana javascript berjalan dan penggunaannya, javaScript statement, javaScript variable, javaScript looping, dan javaScript operator.
JavaScript is lingua franca of the Web. It's pervasive and since 1999 a standard ( ECMAScript 262). Yes, there are other technologies you can use: Flash, Java Applets, Dart, but none of these have the overwhelming support and community that JavaScript does. Over the years it has been maligned as a poorly designed language but I will argue that it has just been misunderstood. This talk will focus on the fundamentals of the language and its integration with the browser, the DOM and server communication via JSON and Ajax.
In the talk Bryan will present:
* Language fundamentals
* Object-Oriented programming
* Functional programming
* DOM APIs
* Event model
* Odds and ends
Presentation on C++ Programming Languagesatvirsandhu9
It consists information about c++ programming language which is a object oriented language. This presentation is very useful for those who want to learn c++ from beginning.
Intro to ES6 and why should you bother !Gaurav Behere
The presentation walks you through the latest changes in JavaScript, that came as a part of ES6 recommendations.
Intro to few new changes suggested & why should we as JS developer, bother.
In 2015, I used to write extensions for Joomla, WordPress, phpBB3, etc and I ...Juraj Vysvader
In 2015, I used to write extensions for Joomla, WordPress, phpBB3, etc and I didn't get rich from it but it did have 63K downloads (powered possible tens of thousands of websites).
Providing Globus Services to Users of JASMIN for Environmental Data AnalysisGlobus
JASMIN is the UK’s high-performance data analysis platform for environmental science, operated by STFC on behalf of the UK Natural Environment Research Council (NERC). In addition to its role in hosting the CEDA Archive (NERC’s long-term repository for climate, atmospheric science & Earth observation data in the UK), JASMIN provides a collaborative platform to a community of around 2,000 scientists in the UK and beyond, providing nearly 400 environmental science projects with working space, compute resources and tools to facilitate their work. High-performance data transfer into and out of JASMIN has always been a key feature, with many scientists bringing model outputs from supercomputers elsewhere in the UK, to analyse against observational or other model data in the CEDA Archive. A growing number of JASMIN users are now realising the benefits of using the Globus service to provide reliable and efficient data movement and other tasks in this and other contexts. Further use cases involve long-distance (intercontinental) transfers to and from JASMIN, and collecting results from a mobile atmospheric radar system, pushing data to JASMIN via a lightweight Globus deployment. We provide details of how Globus fits into our current infrastructure, our experience of the recent migration to GCSv5.4, and of our interest in developing use of the wider ecosystem of Globus services for the benefit of our user community.
Enterprise Resource Planning System includes various modules that reduce any business's workload. Additionally, it organizes the workflows, which drives towards enhancing productivity. Here are a detailed explanation of the ERP modules. Going through the points will help you understand how the software is changing the work dynamics.
To know more details here: https://blogs.nyggs.com/nyggs/enterprise-resource-planning-erp-system-modules/
Climate Science Flows: Enabling Petabyte-Scale Climate Analysis with the Eart...Globus
The Earth System Grid Federation (ESGF) is a global network of data servers that archives and distributes the planet’s largest collection of Earth system model output for thousands of climate and environmental scientists worldwide. Many of these petabyte-scale data archives are located in proximity to large high-performance computing (HPC) or cloud computing resources, but the primary workflow for data users consists of transferring data, and applying computations on a different system. As a part of the ESGF 2.0 US project (funded by the United States Department of Energy Office of Science), we developed pre-defined data workflows, which can be run on-demand, capable of applying many data reduction and data analysis to the large ESGF data archives, transferring only the resultant analysis (ex. visualizations, smaller data files). In this talk, we will showcase a few of these workflows, highlighting how Globus Flows can be used for petabyte-scale climate analysis.
We describe the deployment and use of Globus Compute for remote computation. This content is aimed at researchers who wish to compute on remote resources using a unified programming interface, as well as system administrators who will deploy and operate Globus Compute services on their research computing infrastructure.
AI Pilot Review: The World’s First Virtual Assistant Marketing SuiteGoogle
AI Pilot Review: The World’s First Virtual Assistant Marketing Suite
👉👉 Click Here To Get More Info 👇👇
https://sumonreview.com/ai-pilot-review/
AI Pilot Review: Key Features
✅Deploy AI expert bots in Any Niche With Just A Click
✅With one keyword, generate complete funnels, websites, landing pages, and more.
✅More than 85 AI features are included in the AI pilot.
✅No setup or configuration; use your voice (like Siri) to do whatever you want.
✅You Can Use AI Pilot To Create your version of AI Pilot And Charge People For It…
✅ZERO Manual Work With AI Pilot. Never write, Design, Or Code Again.
✅ZERO Limits On Features Or Usages
✅Use Our AI-powered Traffic To Get Hundreds Of Customers
✅No Complicated Setup: Get Up And Running In 2 Minutes
✅99.99% Up-Time Guaranteed
✅30 Days Money-Back Guarantee
✅ZERO Upfront Cost
See My Other Reviews Article:
(1) TubeTrivia AI Review: https://sumonreview.com/tubetrivia-ai-review
(2) SocioWave Review: https://sumonreview.com/sociowave-review
(3) AI Partner & Profit Review: https://sumonreview.com/ai-partner-profit-review
(4) AI Ebook Suite Review: https://sumonreview.com/ai-ebook-suite-review
How to Position Your Globus Data Portal for Success Ten Good PracticesGlobus
Science gateways allow science and engineering communities to access shared data, software, computing services, and instruments. Science gateways have gained a lot of traction in the last twenty years, as evidenced by projects such as the Science Gateways Community Institute (SGCI) and the Center of Excellence on Science Gateways (SGX3) in the US, The Australian Research Data Commons (ARDC) and its platforms in Australia, and the projects around Virtual Research Environments in Europe. A few mature frameworks have evolved with their different strengths and foci and have been taken up by a larger community such as the Globus Data Portal, Hubzero, Tapis, and Galaxy. However, even when gateways are built on successful frameworks, they continue to face the challenges of ongoing maintenance costs and how to meet the ever-expanding needs of the community they serve with enhanced features. It is not uncommon that gateways with compelling use cases are nonetheless unable to get past the prototype phase and become a full production service, or if they do, they don't survive more than a couple of years. While there is no guaranteed pathway to success, it seems likely that for any gateway there is a need for a strong community and/or solid funding streams to create and sustain its success. With over twenty years of examples to draw from, this presentation goes into detail for ten factors common to successful and enduring gateways that effectively serve as best practices for any new or developing gateway.
Developing Distributed High-performance Computing Capabilities of an Open Sci...Globus
COVID-19 had an unprecedented impact on scientific collaboration. The pandemic and its broad response from the scientific community has forged new relationships among public health practitioners, mathematical modelers, and scientific computing specialists, while revealing critical gaps in exploiting advanced computing systems to support urgent decision making. Informed by our team’s work in applying high-performance computing in support of public health decision makers during the COVID-19 pandemic, we present how Globus technologies are enabling the development of an open science platform for robust epidemic analysis, with the goal of collaborative, secure, distributed, on-demand, and fast time-to-solution analyses to support public health.
Check out the webinar slides to learn more about how XfilesPro transforms Salesforce document management by leveraging its world-class applications. For more details, please connect with sales@xfilespro.com
If you want to watch the on-demand webinar, please click here: https://www.xfilespro.com/webinars/salesforce-document-management-2-0-smarter-faster-better/
Large Language Models and the End of ProgrammingMatt Welsh
Talk by Matt Welsh at Craft Conference 2024 on the impact that Large Language Models will have on the future of software development. In this talk, I discuss the ways in which LLMs will impact the software industry, from replacing human software developers with AI, to replacing conventional software with models that perform reasoning, computation, and problem-solving.
Paketo Buildpacks : la meilleure façon de construire des images OCI? DevopsDa...Anthony Dahanne
Les Buildpacks existent depuis plus de 10 ans ! D’abord, ils étaient utilisés pour détecter et construire une application avant de la déployer sur certains PaaS. Ensuite, nous avons pu créer des images Docker (OCI) avec leur dernière génération, les Cloud Native Buildpacks (CNCF en incubation). Sont-ils une bonne alternative au Dockerfile ? Que sont les buildpacks Paketo ? Quelles communautés les soutiennent et comment ?
Venez le découvrir lors de cette session ignite
Cyaniclab : Software Development Agency Portfolio.pdfCyanic lab
CyanicLab, an offshore custom software development company based in Sweden,India, Finland, is your go-to partner for startup development and innovative web design solutions. Our expert team specializes in crafting cutting-edge software tailored to meet the unique needs of startups and established enterprises alike. From conceptualization to execution, we offer comprehensive services including web and mobile app development, UI/UX design, and ongoing software maintenance. Ready to elevate your business? Contact CyanicLab today and let us propel your vision to success with our top-notch IT solutions.
top nidhi software solution freedownloadvrstrong314
This presentation emphasizes the importance of data security and legal compliance for Nidhi companies in India. It highlights how online Nidhi software solutions, like Vector Nidhi Software, offer advanced features tailored to these needs. Key aspects include encryption, access controls, and audit trails to ensure data security. The software complies with regulatory guidelines from the MCA and RBI and adheres to Nidhi Rules, 2014. With customizable, user-friendly interfaces and real-time features, these Nidhi software solutions enhance efficiency, support growth, and provide exceptional member services. The presentation concludes with contact information for further inquiries.
How Recreation Management Software Can Streamline Your Operations.pptxwottaspaceseo
Recreation management software streamlines operations by automating key tasks such as scheduling, registration, and payment processing, reducing manual workload and errors. It provides centralized management of facilities, classes, and events, ensuring efficient resource allocation and facility usage. The software offers user-friendly online portals for easy access to bookings and program information, enhancing customer experience. Real-time reporting and data analytics deliver insights into attendance and preferences, aiding in strategic decision-making. Additionally, effective communication tools keep participants and staff informed with timely updates. Overall, recreation management software enhances efficiency, improves service delivery, and boosts customer satisfaction.
Quarkus Hidden and Forbidden ExtensionsMax Andersen
Quarkus has a vast extension ecosystem and is known for its subsonic and subatomic feature set. Some of these features are not as well known, and some extensions are less talked about, but that does not make them less interesting - quite the opposite.
Come join this talk to see some tips and tricks for using Quarkus and some of the lesser known features, extensions and development techniques.
1. JAVASCRIPT – AN INTRODUCTION
SK Manvendra
IntelliGrape Software
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>
There was once a
language attribute
also in the script tag.
i.e.,
language=“javascript
1.5” or whatever
<script type=“text/javascript” src=“myScript.js”
defer></script>
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.
Expression is combination of values, variable
references, function calls and operators that evaluates
to some value.
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 (||)
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].node
Type; // 1
30. DOM Structure:
html
ELEMENT_NODE
head
ELEMENT_NODE
title
ELEMENT_NODE
Some title
TEXT_NODE
body
ELEMENT_NODE
p
ELEMENT_NODE
a
ELEMENT_NODE
some link
TEXT_NODE
href
ATTRIBUTE_NODE
Go to
TEXT_NODE
31. GRAND NODE
In fact there is an universal node. document
node. This node exists even if the document is
blank.
document
ELEMENT_NODE
Rest of
DOM
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. MANIPLUATING STYLE AND CLASSES
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.
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).
Event
handler
How to attach?: element.onevent = eventHandler
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
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
Some DOM Properties for HTML Form Controls
Property Element(s) Description
elements form A node list
containing all
the form
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)
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.