JavaScript
Why Study JavaScript?
JavaScript is one of the 3 languages all web developers must learn:
1. HTML to define the content of web pages
2. CSS to specify the layout of web pages
3. JavaScript to program the behavior of web pages
What is JavaScript
•JavaScript is a lightweight, interpreted programming language.
•Designed for creating network-centric applications.
•Complementary to and integrated with Java.
•Complementary to and integrated with HTML.
•Open and cross-platform
Applications of Javascript
Programming
•Client side validation - to verify any user input before submitting it to the
server
•Manipulating HTML Pages - - Javascript helps in manipulating HTML pages
•User Notifications - o raise dynamic pop-ups on the webpages
•Back-end Data Loading - Javascript provides Ajax library which helps in loading
back-end data while you are doing some other processing.
•Presentations - Javascript provides RevealJS and BespokeJS libraries to build a
web-based slide presentations.
•Server Applications - Node JS is built on Chrome's Javascript runtime for
building fast and scalable network application
Advantages of JavaScript
The merits of using JavaScript are −
•Less server interaction − You can validate user input before sending the page
off to the server.
•Immediate feedback to the visitors − They don't have to wait for a page reload
to see if they have forgotten to enter something.
•Increased interactivity − You can create interfaces that react when the user
hovers over them with a mouse or activates them via the keyboard.
•Richer interfaces − You can use JavaScript to include such items as
drag-and-drop components and sliders to give a Rich Interface to your site
visitors.
Limitations of JavaScript
It lacks the following important features −
•Client-side JavaScript does not allow the reading or writing of files. This has
been kept for security reason.
•JavaScript cannot be used for networking applications because there is no such
support available.
•JavaScript doesn't have any multi-threading or multiprocessor capabilities.
JavaScript
•JavaScript Can Change HTML Content
•JavaScript Can Change HTML Attribute Values
•JavaScript Can Change HTML Styles (CSS)
•JavaScript Can Hide HTML Elements
•JavaScript Can Show HTML Elements
NB JavaScript accepts both double and single quotes:
JavaScript - Syntax
JavaScript can be implemented using JavaScript statements that are placed
within the <script>... </script> HTML tags in a web page.
<script language = "javascript" type = "text/javascript">
JavaScript code
</script>
Language − This attribute specifies what scripting language you are using.
Typically, its value will be javascript
Type − This attribute is what is now recommended to indicate the scripting
language in use and its value should be set to "text/javascript".
Your First JavaScript Code
<html>
<body>
<script language = "javascript" type = "text/javascript">
<!--
[Link]("Hello World!")
//-->
</script>
</body>
</html>
JavaScript
•Whitespace and Line Breaks - JavaScript ignores spaces, tabs, and newlines that
appear in JavaScript programs.
•Semicolons are Optional - JavaScript, however, allows you to omit this
semicolon if each of your statements are placed on a separate line.
Note − It is a good programming practice to use semicolons.
•Case Sensitivity - JavaScript is a case-sensitive language.
Comments in JavaScript
•Any text between a // and the end of a line is treated as a comment and is
ignored by JavaScript.
•Any text between the characters /* and */ is treated as a comment. This may
span multiple lines.
•JavaScript also recognizes the HTML comment opening sequence <!--. JavaScript
treats this as a single-line comment, just as it does the // comment.
•The HTML comment closing sequence --> is not recognized by JavaScript so it
should be written as //-->.
Comments example
<script language = "javascript" type = "text/javascript">
<!--
// This is a comment. It is similar to comments in C++
/*
* This is a multi-line comment in JavaScript
* It is very similar to comments in C Programming
*/
//-->
</script>
Warning for Non-JavaScript Browsers
<html>
<body>
<script language = "javascript" type = "text/javascript">
<!--
[Link]("Hello World!")
//-->
</script>
<noscript>
Sorry...JavaScript is needed to go ahead.
</noscript>
</body>
</html>
JavaScript - Placement in HTML File
Ways to include JavaScript in an HTML file are as follows
•Script in <head>...</head> section.
•Script in <body>...</body> section.
•Script in <body>...</body> and <head>...</head> sections.
•Script in an external file and then include in <head>...</head> section.
JavaScript Can Change HTML Content
One of many JavaScript HTML methods is getElementById().
<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p id="demo">JavaScript can change HTML content.</p>
<button type="button" onclick='[Link]("demo").innerHTML = "Hello
JavaScript!"'>Click Me!</button>
</body>
</html>
The <script> Tag
In HTML, JavaScript code is inserted between <script> and </script> tags.
Example
<script>
[Link]("demo").innerHTML = "My First JavaScript";
</script>
JavaScript Functions and Events
A JavaScript function is a block of JavaScript code, that can be executed when "called" for.
JavaScript in <head> or <body>
You can place any number of scripts in an HTML document.
Scripts can be placed in the <body>, or in the <head> section of an HTML page, or in both.
External JavaScript
Scripts can also be placed in external files
JavaScript files have the file extension .js.
External JavaScript
Advantages of External JavaScript
•It separates HTML and code
•It makes HTML and JavaScript easier to read and maintain
•Cached JavaScript files can speed up page loads
An external script can be referenced in 3 different ways:
•With a full URL (a full web address) –
<script src="[Link]
•With a file path (like /js/)
<script src="/js/[Link]"></script>
•Without any path - <script src="[Link]"></script>
JavaScript Output
JavaScript Display Possibilities
JavaScript can "display" data in different ways:
•Writing into an HTML element, using innerHTML.
•Writing into the HTML output using [Link]().
•Writing into an alert box, using [Link]().
•Writing into the browser console, using [Link]().
