JavaScript - a Brief

Introduction
What is JavaScript
Object based (not object oriented) programming language
◦ very limited object creation
◦ a set of pre-defined objects associated with
◦ HTML document structure
◦ many HTML tags constitute JS Objects
◦ Browser functionality
◦ provides a limited API to Browser functionality
It is not compiled but translated. JavaScript Translator is responsible to translate the JavaScript
code which is embedded in browser.
Why we Use JavaScript?
Using HTML we can only design a web page but you can not run any logic on web browser like
addition of two numbers, check any condition, looping statements (for, while), decision making
statement (if-else) at client side. All these are not possible using HTML So for perform all these
task at client side you need to use JavaScript.
JavaScript…Java ?
Java - Programming Language (PL)
◦ Interactive Web Graphics
◦ Creating web browser applications
◦ Writing stand-alone applications

JavaScript - Scripting Language

◦ Runs within the context of the Web browser
◦ Customizing pages based on browser version
◦ Visual Feedback to user actions
◦ Validating data entered on HTML Forms
What can it be used for
Some pretty amazing things….
◦ Text animation
◦ graphic animation
◦ simple browser based application
◦ HTML forms submission
◦ client-side forms data validation (relieving the server of this task)
◦ web site navigation
Applications of Javascripts
10 THINGS YOU CAN BUILD
WITH JAVASCRIPT
1. WEBSITES:
Okay, so you can file this one under ‘pretty obvious’. Adding interactivity and
behavior to otherwise static sites was what JavaScript was invented to do by
Brendan Eich way back in 1995. It’s still used for that. This one’s easy. Any
remotely modern web site is running JavaScript on some level.
See for yourself [Link]
10 THINGS YOU CAN BUILD
WITH JAVASCRIPT
2. WEB APPLICATIONS:
As browsers and personal computers have continued to improve, so, too, has
the abilities to create robust web applications. Just think of applications like
Google Maps. If you want to explore a map in Google Maps, all you have to do is
click and drag with the mouse. You may see a part of the map that is less
detailed that then fills itself in. That’s JavaScript at work behind the scenes.
10 THINGS YOU CAN BUILD
WITH JAVASCRIPT
3. PRESENTATIONS:
A very popular use for JavaScript is to create presentations as websites. Who
needs Powerpoint or Keynote? Using the RevealJS library this becomes really
easy if you’re already familiar with HTML and CSS. If you’re not familiar with
these tools, you can still use [Link], which uses RevealJS to build a web-
based slide deck for you.
10 THINGS YOU CAN BUILD
WITH JAVASCRIPT
4. SERVER APPLICATIONS:
With the advent of NodeJS a few year ago, JavaScript made its way from the
browser and into the server. Since then, Node has been adopted by many
major companies, such as Wal-Mart, as a key part of their back-end
infrastructure.
[Link]® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

As an asynchronous event-driven JavaScript runtime, [Link] is designed to build scalable

network applications. many connections can be handled concurrently.
10 THINGS YOU CAN BUILD
WITH JAVASCRIPT
5. WEB SERVERS:
While we’re on the topic of server applications. Have you seen Node’s Hello
World application? It’s easy to build a web server in about 10 lines of code. Of
course, you can create much more robust servers using node or the standard
server application framework expressJS. Many of the previously mentioned
applications using Node are actually built using the MEAN stack (Mongo,
Express, Angular, Node), of which Express is a key component.
10 THINGS YOU CAN BUILD
WITH JAVASCRIPT
6. GAMES:
While the browser hasn’t been a traditional games platform in the past, recently
it has become a robust venue for games. Additionally, with the addition of the
HTML5 canvas (more on that in a second), the level of complexity that is
possible in browser-based games has increased exponentially. There are even
browser games to teach you programming!
See for yourself
[Link]
10 THINGS YOU CAN BUILD
WITH JAVASCRIPT
7. ART:
One of the new features in the HTML5 specification is the canvas element,which
allows the browser to render three-dimensional shapes. This opened the
browser as a new medium for digital art projects.
10 THINGS YOU CAN BUILD
WITH JAVASCRIPT
8. SMARTWATCH APPS:
Popular smartwatch maker Pebble has created [Link], a small javascript
framework that allows a developer to create an application for the Pebble line of
watches in JavaScript. But Pebble makes up a relatively small part of the market
share. What if you want to develop for iOS or Android…
10 THINGS YOU CAN BUILD
WITH JAVASCRIPT
9. MOBILE APPS:
One of the most powerful things you can do with JavaScript is build applications for
non-web contexts. That’s a fancy way of saying you can make apps for things that
aren’t the internet. For instance, mobile devices are now the
most popular way to access the internet. What this means is that ALL of your
websites should be responsive (but that could be another blog post). Additionally,
it means that mobile applications are as important a product as a web property for
digital goods. The catch is that mobile apps come in two major flavors, Apple and
Android. And those apps are written in two completely different languages.
So that means you need three times as many developers to build and support a
product for mobile devices plus the web. Here’s the good news: It is possible to
have a ‘write it once’ solution for all three platforms. Phonegap is one of the oldest
and well-established frameworks in this space.
More recently React Native has come on the scene and shows a lot of promise of becoming the
major player in the cross-platform space.
React native is an open source framework created and maintained by facebook. It is one of the
other popular cross-platform frameworks that have been launched by social media king
Facebook
Long story short: You can make mobile apps with JavaScript you can deploy and download right
to their respective app stores. Here’s a list of apps made with React Native.
10 THINGS YOU CAN BUILD
WITH JAVASCRIPT
10. FLYING ROBOTS:
Yes, you read that right. Several commercially available
quadcopters come outfitted with a simple OS that makes it
possible to install NodeJS. This means that you can program a
flying robot using JavaScript.
As it’s probably pretty clear, Atwood’s Law continues to ring true
but not in a bad way. JavaScript remains the most accessible
programming language on the planet. So it’s great to see that it’s
possible to create such a wide variety of projects using it.
 Programming a drone is eas
y!
Install [Link] and get the ar-drone module. All you need to do then
is to execute the following code with node.
That will make your drone take off, move around, do a flip and
carefully land again. Seriously, that’s all!
Document Object Model(DOM)
With the object model, JavaScript gets all the power it needs to create
dynamic HTML:
JavaScript can change all the HTML elements in the page
JavaScript can change all the CSS styles in the page
JavaScript can remove existing HTML elements and attributes
JavaScript can add new HTML elements and attributes
JavaScript can react to all existing HTML events in the page
JavaScript can create new HTML events in the page
DOM
DOM elements
DOM CSS
DOM Event
DOM Form
You can use W3School for proper understanding
JavaScript native functions
parseInt()
◦ Converts a string into an integer, if possible
parseFloat ()
◦ Converts a string into a floating-point number, if possible
string ()
◦ Converts any object into a string
number ()
◦ Converts any object into a number, if possible
isNAN ()
◦ true if the object is Not A Number
escape() and unescape()
◦ Converts and deconverts strings to “safe” characters
Events
onAbort
onBlur
onChange
onClick
onError
onFocus
onLoad
onMouseOut
onMouseOver
onReset
onSelect
onSubmit
onUnload
onAbort
Activated when a user aborts the loading of an image
<img name=ball src=images/[Link] onAbort=“alert(‘You missed a nice picture’)”>
onBlur
Used with frame, select, text, textarea and window objects
invoked when an object loses the focus
use with select, text and textarea for data validation
onChange
Used with select, text and textarea objects
use instead of onBlur to validate only if a value has changed
<form>
Color: <select onChange=“processSelection()”>
<option value=“R”>Red
<option value=“G”>Green
<option value=“B”>Blue
</select>
</form>
onClick
Used with button, checkbox,link, radio, reset, and submit objects.
<input type=button name=btn1 value=“Click Me” onClick=“alert(‘button was clicked’;” >
onMouseOut and onMouseOver
Used with area and link objects
user moves mouse off of an area or link
onSubmit
Use with form objects to run a handler whenever a form has been submitted.
Useful to validate all fields prior to actual submission