KEMBAR78
txWelcome to Javascript Welcome to Javascript.pp
WELCOME TO
JAVASCRIPT
-Abdul Rehman
Javascript Pre-requisite
■ HTML
■ CSS
About JavaScript
■ JavaScript was introduced as a full-fledged client-side language used for developing web applications in 1995. JavaScript is easy
to learn, debug, and test. It is an event-based, platform-independent, and an interpreted language with all the procedural
programming capabilities.
■ Web applications that were developed using server-side programming languages like Java and Dot Net involved travel of user
requests all the way from the client(browser) to the server hosting the application. The multiple request-response cycles between
client and server who were consuming both time and network bandwidth.
■ JavaScript got introduced as a Client-Side programming language with the capability of executing user requests on the Client-
Side. This could help in reducing the number of request-response cycles between client and server and decrease the network
bandwidth thus reducing the overall response time.
■ Later, in 1997 ECMAScript established a standard for the scripting languages that redefined the core features any scripting
language should have and how to implement those features. From then, JavaScript evolved year after year with every new
version of ECMAScript introducing new features. Developers prefer JavaScript to create dynamic, interactive, and scalable web
applications as it helps developers in extending the functionalities of the web pages effectively.
Why we need JavaScript?
When an application is loaded on the browser, there is a 'SignUp' link on the
top right corner.
Why we need JavaScript?
When this link is clicked, the 'SignUp' form is displayed. It contains three fields
- 'Username', 'Email', and 'Password' and in some cases a 'Submit' button as
well.
Why we need JavaScript?
When data is entered in the fields and the button is clicked, then data entered
in the fields will be validated and accordingly,next view page loaded. If data is
invalid, an error message is displayed, if valid, the application navigates to
homepage
To implement the requirement of handling user action like a click of a button or link and to respond to these
requests by displaying the expected output, server-side languages like Java/JSP can be used as shown in the below
diagram.
But server-side languages have certain limitations such as :-
•Multiple request-response cycles to handle multiple user requests
•More network bandwidth consumption
•Increased response time
If client-side scripting language JavaScript is used then, this can be done without consulting the server as can be
seen in the below diagram.
The home page of MyMovie.com contains the SignUp link. The user performs click action on this link. The
user action is handled on the client side itself with the help of the JavaScript code. This code arrives on the
client along with the home page of the application.
When invoked on click of the link, this code executes on the client-side itself to validate the user-entered data
and accordingly display the corresponding view.
What is JavaScript?
Web page designed using HTML and CSS is static.
What is JavaScript?
Web page designed using HTML and CSS is static.
JavaScript combined with HTML and CSS makes it dynamic.
What is JavaScript?
Web page designed using HTML and CSS is static.
JavaScript combined with HTML and CSS makes it dynamic.
Ways of Writing JavaScript
JavaScript code can be embedded within the HTML page or can be written in an
external file.
• Inline Scripting
Ways of Writing JavaScript
JavaScript code can be embedded within the HTML page or can be written in an
external file.
• Inline Scripting
• Internal Scripting
Ways of Writing JavaScript
JavaScript code can be embedded within the HTML page or can be written in an
external file.
• Inline Scripting
• Internal Scripting
• External Scripting
JavaScript
■ When JavaScript code are written within the HTML file itself, it is called
internal scripting.
■ Internal scripting, is done with the help of HTML tag : <script> </script>
■ This tag can be placed either in the head tag or body tag within the HTML
file.
JavaScript
■ When JavaScript code are written within the HTML file itself, it is called
internal scripting.
■ Internal scripting, is done with the help of HTML tag : <script> </script>
■ This tag can be placed either in the head tag or body tag within the HTML
file.
JavaScript code written inside <head> element is as shown below:
JavaScript
JavaScript code written inside <body> element is as shown below :
JavaScript code written inside <head> element is as shown below:
JavaScript code can be written in an external file also. The file containing JavaScript code is saved with the extension *.js
(e.g. fileName.js)
To include the external JavaScript file, the script tag is used with attribute 'src' as shown in the below-given code-snippet:
Demo.js :-
Demo.js :-
Demo.html :-
The below-mentioned points can help you choose between any two ways of
writing the script based on some parameters.
Q & A
Roger is developing a web application. There is a requirement to check if the
length of the name entered by the user is between 6 and 10. He is suggested
by the architect to do the processing on the client-side itself. Can Roger use
JavaScript programming to achieve the solution?
A. No, JavaScript strictly supports only server-side programming.
B. Yes, JavaScript supports Client-Side programming, but we should avoid it due to security reasons.
C. Yes, JavaScript supports Client-Side programming and is an appropriate solution to given problem
statement. check
D. No, JavaScript is only scripting language not a programming language
Explanation: JavaScript supports Client-Side programming and it is best to do client-side validations.
Q & A
Danny has built a web application using HTML, CSS, and JavaScript. Which of
the following, he requires on his machine to execute this application?
A. Java Virtual machine - JVM
B. Web Browser
C. Web Server
D. Both the Web Browser and Server
Explanation: Web browser interprets the JavaScript code, render the HTML elements with
the CSS styles.
Q & A
Ginny is trying to run a web application created using JavaScript on her machine. She has only
Firefox and Safari browsers installed. She is unable to see the output. What do you think could be
the reason?
A. JavaScript can run only on IE
B. JavaScript does not execute if multiple browsers are installed on the machine
C. She did not open the browser to see the output for JavaScript code
D. The browser may not be compatible with the OS of the machine
Explanation: JavaScript code output will be rendered in the browser.
Q & A
Which of the below is NOT a JavaScript transpiler?
A. Traceur
B. Babel
C. TypeScript
D. Webpack
Explanation: Traceur is a JavaScript compiler popularly used while developing code in
AngularJS. It takes ECMAScript Edition 6 (ES6) which mainly includes classes, generators,
destroying, etc., and then compiles to ECMAScript Edition 5 (ES5) which runs into the users'
browser.
Q & A
Which among the below given tag can be used to embed JavaScript code inside an
HTML file?
A. <link></link>
B. <embed></embed>
C. <script></script>
D. <style></style>
Explanation: We can use the script tag to write javaScript code within the HTML file.
txWelcome to Javascript Welcome to Javascript.pp
txWelcome to Javascript Welcome to Javascript.pp
txWelcome to Javascript Welcome to Javascript.pp
txWelcome to Javascript Welcome to Javascript.pp

txWelcome to Javascript Welcome to Javascript.pp

  • 1.
  • 3.
  • 10.
    About JavaScript ■ JavaScriptwas introduced as a full-fledged client-side language used for developing web applications in 1995. JavaScript is easy to learn, debug, and test. It is an event-based, platform-independent, and an interpreted language with all the procedural programming capabilities. ■ Web applications that were developed using server-side programming languages like Java and Dot Net involved travel of user requests all the way from the client(browser) to the server hosting the application. The multiple request-response cycles between client and server who were consuming both time and network bandwidth. ■ JavaScript got introduced as a Client-Side programming language with the capability of executing user requests on the Client- Side. This could help in reducing the number of request-response cycles between client and server and decrease the network bandwidth thus reducing the overall response time. ■ Later, in 1997 ECMAScript established a standard for the scripting languages that redefined the core features any scripting language should have and how to implement those features. From then, JavaScript evolved year after year with every new version of ECMAScript introducing new features. Developers prefer JavaScript to create dynamic, interactive, and scalable web applications as it helps developers in extending the functionalities of the web pages effectively.
  • 11.
    Why we needJavaScript? When an application is loaded on the browser, there is a 'SignUp' link on the top right corner.
  • 12.
    Why we needJavaScript? When this link is clicked, the 'SignUp' form is displayed. It contains three fields - 'Username', 'Email', and 'Password' and in some cases a 'Submit' button as well.
  • 13.
    Why we needJavaScript? When data is entered in the fields and the button is clicked, then data entered in the fields will be validated and accordingly,next view page loaded. If data is invalid, an error message is displayed, if valid, the application navigates to homepage
  • 14.
    To implement therequirement of handling user action like a click of a button or link and to respond to these requests by displaying the expected output, server-side languages like Java/JSP can be used as shown in the below diagram. But server-side languages have certain limitations such as :- •Multiple request-response cycles to handle multiple user requests •More network bandwidth consumption •Increased response time
  • 15.
    If client-side scriptinglanguage JavaScript is used then, this can be done without consulting the server as can be seen in the below diagram. The home page of MyMovie.com contains the SignUp link. The user performs click action on this link. The user action is handled on the client side itself with the help of the JavaScript code. This code arrives on the client along with the home page of the application. When invoked on click of the link, this code executes on the client-side itself to validate the user-entered data and accordingly display the corresponding view.
  • 16.
    What is JavaScript? Webpage designed using HTML and CSS is static.
  • 17.
    What is JavaScript? Webpage designed using HTML and CSS is static. JavaScript combined with HTML and CSS makes it dynamic.
  • 18.
    What is JavaScript? Webpage designed using HTML and CSS is static. JavaScript combined with HTML and CSS makes it dynamic.
  • 19.
    Ways of WritingJavaScript JavaScript code can be embedded within the HTML page or can be written in an external file. • Inline Scripting
  • 20.
    Ways of WritingJavaScript JavaScript code can be embedded within the HTML page or can be written in an external file. • Inline Scripting • Internal Scripting
  • 21.
    Ways of WritingJavaScript JavaScript code can be embedded within the HTML page or can be written in an external file. • Inline Scripting • Internal Scripting • External Scripting
  • 22.
    JavaScript ■ When JavaScriptcode are written within the HTML file itself, it is called internal scripting. ■ Internal scripting, is done with the help of HTML tag : <script> </script> ■ This tag can be placed either in the head tag or body tag within the HTML file.
  • 23.
    JavaScript ■ When JavaScriptcode are written within the HTML file itself, it is called internal scripting. ■ Internal scripting, is done with the help of HTML tag : <script> </script> ■ This tag can be placed either in the head tag or body tag within the HTML file. JavaScript code written inside <head> element is as shown below:
  • 24.
    JavaScript JavaScript code writteninside <body> element is as shown below : JavaScript code written inside <head> element is as shown below:
  • 25.
    JavaScript code canbe written in an external file also. The file containing JavaScript code is saved with the extension *.js (e.g. fileName.js) To include the external JavaScript file, the script tag is used with attribute 'src' as shown in the below-given code-snippet:
  • 26.
  • 27.
  • 28.
    The below-mentioned pointscan help you choose between any two ways of writing the script based on some parameters.
  • 29.
    Q & A Rogeris developing a web application. There is a requirement to check if the length of the name entered by the user is between 6 and 10. He is suggested by the architect to do the processing on the client-side itself. Can Roger use JavaScript programming to achieve the solution? A. No, JavaScript strictly supports only server-side programming. B. Yes, JavaScript supports Client-Side programming, but we should avoid it due to security reasons. C. Yes, JavaScript supports Client-Side programming and is an appropriate solution to given problem statement. check D. No, JavaScript is only scripting language not a programming language Explanation: JavaScript supports Client-Side programming and it is best to do client-side validations.
  • 30.
    Q & A Dannyhas built a web application using HTML, CSS, and JavaScript. Which of the following, he requires on his machine to execute this application? A. Java Virtual machine - JVM B. Web Browser C. Web Server D. Both the Web Browser and Server Explanation: Web browser interprets the JavaScript code, render the HTML elements with the CSS styles.
  • 31.
    Q & A Ginnyis trying to run a web application created using JavaScript on her machine. She has only Firefox and Safari browsers installed. She is unable to see the output. What do you think could be the reason? A. JavaScript can run only on IE B. JavaScript does not execute if multiple browsers are installed on the machine C. She did not open the browser to see the output for JavaScript code D. The browser may not be compatible with the OS of the machine Explanation: JavaScript code output will be rendered in the browser.
  • 32.
    Q & A Whichof the below is NOT a JavaScript transpiler? A. Traceur B. Babel C. TypeScript D. Webpack Explanation: Traceur is a JavaScript compiler popularly used while developing code in AngularJS. It takes ECMAScript Edition 6 (ES6) which mainly includes classes, generators, destroying, etc., and then compiles to ECMAScript Edition 5 (ES5) which runs into the users' browser.
  • 33.
    Q & A Whichamong the below given tag can be used to embed JavaScript code inside an HTML file? A. <link></link> B. <embed></embed> C. <script></script> D. <style></style> Explanation: We can use the script tag to write javaScript code within the HTML file.

Editor's Notes

  • #27 NOTE: In external file, JavaScript code is not written inside <script> </script> tag.