Java Script (Module 1).pptx

Introduction to Javascript
Module 1

What is JavaScript?
● JavaScript was initially created to “make web pages alive”.
● The programs in this language are called scripts. They can be written right in a web
page’s HTML and run automatically as the page loads.
● Scripts are provided and executed as plain text. They don’t need special preparation or
compilation to run.
● In this aspect, JavaScript is very different from another language called Java.
● JavaScript can execute not only in the browser, on any device that has a special
program called the JavaScript engine.

Why Js
● client-side scripting (JavaScript) benefits:
● usability: can modify a page without having to post back to the
server (faster UI)
● efficiency: can make small, quick changes to page without waiting
for server
● event-driven: can respond to user actions like clicks and key
presses

Where to write js code ?
● script tag should be placed in HTML page's head
● script code is stored in a separate .js file
● JS code can be placed directly in the HTML file's body or head (like CSS)
but this is bad style (should separate content, presentation, and behavior)
<script src="filename" type="text/javascript"> script(s) </script>
HTML

Comments (same as Java)
// single-line comment
/* multi-line comment */
JS
identical to Java's comment syntax
4 comment syntaxes
HTML: 
CSS/JS/PHP: /* comment */
Java/JS/PHP: // comment
PHP: # comment

Script 1:
Use of alert box
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 1</title>
<script>
alert('Hello, I am ____!');
</script>
</head>
<body>
</body>
</html>

Using document.write() - This simply prints the specified text or HTML content
to the page.
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
document.write(5 + 6);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
document.write("<b>I am new text</b>");
</script>
</body>
</html>
String in webpage HTML tag in webpage

Using document.writeln() -method is identical to the write() method, with
the addition of writing a newline character after each statement.
<!DOCTYPE html>
<html>
<body>
<script>
document.write(5 + 6);
document.write(“<b> my lucky
number</b>”);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<script>
document.writeln(5 + 6);
document.writeln(“<b> my lucky
number</b>”);
</script>
</body>
</html>
document.write document.writeln

4 Ways to Declare
a JavaScript
Variable:
var keyword
var x = 5;
var y = 6;
var z = x + y;
let keyword
let x = 5;
let y = 6;
let z = x + y;
undeclared variables
x = 5;
y = 6;
z = x + y;

Scope of var and let
<!DOCTYPE html>
<html>
<body>
<h2>Redeclaring a Variable Using let</h2>
<script>
let x = 10;
document.writeln(x); {
let x = 2;
document.writeln(x); }
document.writeln(x);
</script> </body> </html>
var x = 10;
// Here x is 10
{
var x = 2;
// Here x is 2
}
// Here x is 2
let var

Declare a variable with
const unless you know that
the value will change.
const num1 = 5;
const num2 = 3;
// add two numbers
const sum = num1 + num2;
// display the sum
document.write('The sum of ' + num1 + ' and ' + num2
+ ' is: ' + sum);

JavaScript Popup Boxes
JavaScript has three kind of popup boxes: Alert box, Confirm box, and Prompt box.
An alert box is often used if you
want to make sure information
comes through to the user.
When an alert box pops up, the
user will have to click "OK" to
proceed.
<!DOCTYPE html>
<html>
<body> <h2>Alert Example</h2>
<button onclick="displayBox()">Magic</button>
<script>
function displayBox() {
alert("I am an alert box!n Nice to meet you"); }
</script>
</body>
</html>

A confirm box is often used
if you want the user to verify
or accept something.
When a confirm box pops
up, the user will have to click
either "OK" or "Cancel" to
proceed.
If the user clicks "OK", the
box returns true. If the user
clicks "Cancel", the box
returns false.
<!DOCTYPE html>
<html>
<body>
<h2>Confirm Box</h2>
<button onclick="typeReply()">Check</button>
<p id="display"></p> <script>
function typeReply() {
var txt;
if (confirm("Would you like to order tea?")) {
txt = "Tea is ordered";
} else {
txt = "You pressed Cancel!";
}
document.getElementById("display").innerHTML = txt;
}
</script>
</body>
</html>

A prompt box is often used if
you want the user to input a
value before entering a page.
When a prompt box pops up,
the user will have to click
either "OK" or "Cancel" to
proceed after entering an
input value.
If the user clicks "OK" the
box returns the input value.
If the user clicks "Cancel" the
box returns null.
<!DOCTYPE html>
<html>
<body>
<h2>Prompt</h2>
<button onclick="userName()">Try it</button>
<p id="demo"></p>
<script>
function userName() {
let text;
let person = prompt("Please enter your name:", "Richie");
if (person == null || person == "") {
text = "Empty";
} else {
text = "Hello " + person + "! How are you today?";
}
document.getElementById("demo").innerHTML = text;
}
</script></body></html>

References
https://javascript.info/intro#what-is-javascript

Java Script (Module 1).pptx

Recommended

Recommended

More Related Content

Similar to Java Script (Module 1).pptx

Similar to Java Script (Module 1).pptx (20)

More from Shehrevar Davierwala

More from Shehrevar Davierwala (20)

Recently uploaded

Recently uploaded (20)

Java Script (Module 1).pptx