What is JavaScript ?
JavaScript is the programming language of HTML and the Web.
It makes web page dynamic. It is an interpreted programming
language with object-oriented capabilities.
JavaScript History
• 1995 by Brendan Eich (NetScape)
• Mocha
• LiveScript
• JavaScript
• ECMAScript
Server
User
HTML
CSS
JavaScript
Tools
• Notepad
• Notepad ++
• Visual Studio
• Any Text Editor
JavaScript and Java Same?
Advantage of JavaScript
• Client Side Execution
• Validation on Browser
• Easy Language
Disadvantage of JavaScript
• Less Secure
• No Hardware Access
• JavaScript Enable Browsers
Way of adding JavaScript
• Inline
• Inside head Tag
• Inside body Tag <script>
• External file
• Inside head Tag </script>
• Inside body Tag
Inline
• Inside head Tag
<html>
<head><title>Hello JS</title>
<script type="text/javascript">
[Link](“Hello User”);
</script>
</head>
<body>
<h1>I am Heading</h1>
<p>I am first Paragraph.</p>
</body>
</html>
Inline
• Inside body Tag
<html>
<head><title>Hello JS</title></head>
<body>
<h1>I am Heading</h1>
<p>I am first Paragraph.</p>
<script type="text/javascript">
[Link](“Hello User”);
</script>
</body>
</html>
External Notepad
• Inside head Tag
<html> [Link](“Hello User”);
<head><title>Hello JS</title>
<script src=“[Link]” type="text/javascript">
</script>
</head>
• Save with .js extension
<body>
Ex: - [Link]
<h1>I am Heading</h1> • Now link this file to HTML
<p>I am first Paragraph.</p>
</body>
</html>
External Notepad
• Inside body Tag
[Link](“Hello User”);
<html>
<head><title>Hello JS</title></head>
<body>
<h1>I am Heading</h1>
<p>I am first Paragraph.</p> • Save with .js extension
<script src=“[Link]” type="text/javascript"> Ex: - [Link]
</script> • Now link this file to HTML
</body>
</html>
<script type="text/javascript"> <script src = “[Link]” type="text/javascript">
[Link](“Hello World”);
</script> </script>
• <script> - Opening Script Tag.
• src – It’s an attribute of script tag. It defines source/location of script file.
• [Link] – This is our script file. Where data is file name and .js is the extension of
javascript file.
• type – It’s an attribute of script tag which tells the browser it is a javascript. This is
optional now a days.
• text/javascript – Its type of document
• [Link](“Hello World”); - This is a function to display data.
• </script> - Closing Script tag
<html>
<head><title>Hello JS</title></head>
<body>
<h1>I am Heading</h1>
<p>I am first Paragraph.</p>
<script src = “[Link]” type="text/javascript"></script>
<script src = “[Link]” type="text/javascript"></script>
<script src = “[Link]” type="text/javascript"></script>
</body>
</html>
<html>
<head><title>Hello JS</title></head>
<body>
<h1>I am Heading</h1>
<p>I am first Paragraph.</p>
<script type="text/javascript">
[Link](“Hello world”);
</script>
<script src = “[Link]” type="text/javascript"> </script>
<script src = “[Link]” type="text/javascript">
[Link](“Hello world”);
</script>
</body>
</html>
Display
• [Link]( )
• [Link]( )
• [Link]( )
• innerHTML
[Link]( )
This function is used to write arbitrary HTML and content into
page. If we use this function after an HTML document is fully
loaded, will delete all existing HTML. It is used only for testing
purpose.
Ex: - [Link](“Hello World”);
[Link](variable);
[Link](4+2);
[Link](“Hello World.<br>”);
[Link](“Hello World.<br>” + variable + “<br>”);
[Link]( )
This function is used to display data in alert dialog box. alert
really should be used only when you truly want to stop everything
and let the user know something.
Ex: - [Link](“Hello World”);
[Link](variable);
[Link](4+2);
[Link](“Hello World” + variable);
[Link]( )
This function is used to display data in console. This is used for
debugging purpose. We can identify our code’s error.
Ex: - [Link](“Hello World”);
[Link](variable);
[Link](4+2);
[Link](“Hello World” + variable);
