Introduction To JavaScript

Introduction to JavaScript
Example 2.
JavaScript is a programming language used to make <!DOCTYPE html>
<html>
web pages interactive. It runs on your visitor's <body>
computer and doesn't require constant downloads
from your website. JavaScript is often used to <h1>What Can JavaScript Do?</h1>
create polls and quizzes.
<p id="demo">JavaScript can change the
style of an HTML element.</p>
JavaScript and Java are completely different
languages, both in concept and design. JavaScript <button type="button"
onclick="myFunction()">Click Me!</button>
was invented by Brendan Eich in 1995, and became
an ECMA standard in 1997. ECMA-262 is the official <script>
name. ECMAScript 6 (released in June 2015) is the function myFunction() {
var x = document.getElementById("demo");
latest official version of JavaScript. x.style.fontSize = "25px";
x.style.color = "red";
ECMAScript (European Computer Manufacturers }
</script>
Association Script) - ECMAScript (or ES) is a
trademarked scripting-language specification </body>
</html>
standardized by ECMA International. Well-known
implementations of the language, such as Example 3:
JavaScript, JScript and ActionScript have come into <!DOCTYPE html>
wide use for client-side scripting on the Web. <html>
<body>
JavaScript is the most popular programming <h1>JavaScript Can Validate Input</h1>

language in the world. One of many HTML methods
<p>Please input a number between 1 and
is getElementById(). 10:</p>
What JavaScript can do: <input id="numb">
<button type="button"
1. JavaScript Can Change HTML Content onclick="myFunction()">Submit</button>
2. JavaScript Can Change HTML Attributes
3. JavaScript Can Change HTML Styles (CSS) <p id="demo"></p>
4. JavaScript Can Validate Data <script>
function myFunction() {
Sample Codes: var x, text;
Example 1:
// Get the value of the input field with
<!DOCTYPE html>
id="numb"
<html>
x = document.getElementById("numb").value;
<body>
// If x is Not a Number or less than one
<h1>What Can JavaScript Do?</h1>
or greater than 10
if (isNaN(x) || x < 1 || x > 10) {
<p id="demo">JavaScript can change HTML
text = "Input not valid";
content.</p>
} else {
text = "Input OK";
}
onclick="document.getElementById('demo').i
nnerHTML = 'Hello JavaScript!'">
Click Me!</button> document.getElementById("demo").innerHTML
= text;
</body> }
</html> </script>
</body>
</html>
3. Using innerHTML
<!DOCTYPE html>
JavaScript Display Possibilities
<html>
<body>
JavaScript does NOT have any built-in print or
display functions. JavaScript can "display" data in
<h1>My First Web Page</h1>
different ways:
<p>My First Paragraph.</p>
1. Writing into an alert box, using
<p id="demo"></p>
window.alert().
2. Writing into the HTML output using
<script>
document.write().
document.getElementById("demo").innerHTML = 7
3. Writing into an HTML element, using
+ 6;
innerHTML.
</script>
4. Writing into the browser console, using
console.log().
</body>
</html>
Examples:
1.Using window.alert() 4.Using console.log()

<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<body> <body>
<p>My first paragraph.</p> <h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script> <p>
window.alert(5 + 6); Activate debugging in your browser (Chrome, IE,
</script> Firefox) with F12, and select "Console" in the
debugger menu.
</body> </p>
</html>
<script>
2.Using document.write() console.log(5 + 6);
<!DOCTYPE html> </script>
<html>
<body> </body>
</html>
<p>My first paragraph.</p> JavaScript Variables
JavaScript variables are containers for storing data
<script> values.
document.write(5 + 6);
</script> Example:
<!DOCTYPE html>
</body> <html>
</html> <body>
<h1>JavaScript Variables</h1>
<p>In this example, x, y, and z are variables</p> To assign a value to the variable, use the equal
<p id="demo"></p> sign:
ex: var carName = "Volvo";
<script>
var x = 5;
var y = 6; Example:
var z = x + y; <!DOCTYPE html>
document.getElementById("demo").innerHTML = z; <html>
</script> <body>
</body> <h1>JavaScript Variables</h1>

</html>
<p>Create a variable, assign a value to it, and
JavaScript Identifiers display it:</p>
All JavaScript variables must be identified with
unique names. These unique names are called <p id="demo"></p>
identifiers. Identifiers can be short names (like x
and y), or more descriptive names (age, sum, <script>
totalVolume). The general rules for constructing var carName = "Volvo";
names for variables (unique identifiers) are: document.getElementById("demo").innerHTML =
carName;
1. Names can contain letters, digits, </script>
underscores, and dollar signs. </body>
2. Names must begin with a letter </html>
3. Names can also begin with $ and _
4. Names are case sensitive (y and Y are Value = undefined
different variables) In computer programs, variables are often declared
5. Reserved words (like JavaScript keywords) without a value. The value can be something that
cannot be used as names has to be calculated, or something that will be
provided later, like user input. A variable declared
JavaScript Data Types without a value will have the value undefined.
JavaScript variables can hold numbers like 100, and
text values like "John Doe". In programming, text Example:
values are called text strings. JavaScript can handle <!DOCTYPE html>
many types of data, but for now, just think of <html>
numbers and strings. Strings are written inside <body>
double or single quotes. Numbers are written
without quotes. If you put quotes around a <h1>JavaScript Variables</h1>
number, it will be treated as a text string.
<p>A variable declared without a value will have
the value undefined.</p>
Declaring (Creating) JavaScript Variables
Creating a variable in JavaScript is called <p id="demo"></p>
"declaring" a variable. You declare a JavaScript
variable with the var keyword: <script>
var carName;
ex: var carName; document.getElementById("demo").innerHTML =
carName;
</script>
</body>
</body> </html>
</html>
Example 3:
<!DOCTYPE html>
JavaScript Arithmetic <html>
You can do arithmetic with JavaScript variables, <body>
using operators mathematical operators:
Example 1:
<!DOCTYPE html> <p>Add "5" + 2 + 3. and display the result:</p>
<html>
<body> <p id="demo"></p>
<h1>JavaScript Variables</h1> <script>

var x = "5" + 2 + 3;
<p>Add 5 + 2 + 3, and display the result:</p> document.getElementById("demo").innerHTML =
x;
<p id="demo"></p> </script>
<script> </body>
var x = 5 + 2 + 3; </html>
document.getElementById("demo").innerHTML =
x;
</script>
</body>
</html>
You can also add strings, but strings will be

concatenated (added end-to-end):
Example 2:
<!DOCTYPE html>
<html>
<body>
<p>Add "John" + " " + "Doe":</p>
<p id="demo"></p>
<script>
var x = "John" + " " + "Doe";
document.getElementById("demo").innerHTML =
x;
</script>
Arithmetic Operator
 (+) - Addition
 (-) - Subtraction
 (*) - Multiplication
 (/) - Divide
 (%) - Modulus
 (++) - Increment by 1
 (--) - Decrement by 1
Comparison Operator
 == - Equal
 != - not equal
 > - greater than
 < - less than
 >= - greater than or equal
 <= - less than or equal
Logical operator
 && - AND
 || - OR
 ! - NOT
Control Flow Statements
1. If Statement - is the fundamental control

statement that allows JavaScript to make
decisions and execute statements
conditionally
Syntax:
If (expression) {
Statement(s) to be executed
if expression is true
}
Example:
JavaScript Data Types:
<!DOCTYPE html>
 Numbers e.g. 123, 150, 160 <html>
 String of text e.g. “this text string” <body>
 Boolean e.g. true or false
<h1> Validate Input</h1>
JavaScript variable scope:
 Global variables: A global variable has <p>input a number</p>
global scope w/c means it is defined <input id="numb">
everywhere in your JavaScript code.
 Local variables: A local variable will be <button type="button"
visible only within a function where it is onclick="myFunction()">Click Me!</button>
defined.
<p id="demo"></p> function myFunction() {
<script> var x, text;
function myFunction() { // Get the value of the input field with id="numb"
var x, text; x = document.getElementById("numb").value;
// Get the value of the input field with id="numb" if (isNaN(x) || x <= 18) {
x = document.getElementById("numb").value; text = "too young";
} else {
text = "old enough";
if (isNaN(x) || x == 1) { }
text = "input is 1"; document.getElementById("demo").innerHTML
} = text + " to vote";
document.getElementById("demo").innerHTML }
= text; </script>
} </body>
</script> </html>
</body> 3. If…else if… statement - is the one level

</html> advance form of control statement that
allows JavaScript to make correct decision
2. If…else Statement - is the next form of out of several conditions
control statement that allows JavaScript to
execute statements in more controlled way. Syntax:
Syntax: if (expression1) {
If (expression) { Statement(s)
Statement(s) } else if (expression 2) {
} else { Statement(s)
Statement(s) } else {
} Statement(s)
}
Example:
Example:
<!DOCTYPE html>
<html> <!DOCTYPE html>
<body> <html>
<body>
<h1> Validate Input</h1>
<p>input your age</p> <h1> Validate Input</h1>
<p>input your age</p>
<input id="numb">
<input id="numb">
onclick="myFunction()">Click Me!</button> <button type="button"
onclick="myFunction()">Click Me!</button>
<p id="demo"></p>
<script> <p id="demo"></p>
<script>
default: statement(s)
function myFunction() { }
var x, text;
// Get the value of the input field with id="numb"

x = document.getElementById("numb").value;
if (isNaN(x) || x == 0) { Example:
text = "input invalid"; <!DOCTYPE html>
} <html>
else if (x <= 17) { <body>
text = "not eligible";
} <h1>JavaScript Can Validate Input</h1>
else{
text = "you are elible"; <p>input your age</p>
}
document.getElementById("demo").innerHTML <input id="numb">
= text + " to vote";
} <button type="button"
</script> onclick="myFunction()">Click Me!</button>
</body> <p id="demo"></p>

</html>
<script>
4. JavaScript Switch Case
o Handles the exact condition function myFunction()
o Switch statement is to give an {
expression to evaluate and several var x, day;
different statements to execute
based on the value of the // Get the value of the input field with id="numb"
expression. x = document.getElementById("numb").value;
o Case against the value of the
expression until a match is found switch(x)
o Default, if nothing matches {
case '1':
day = "Monday"
Syntax: break;
Switch (expression)
{ case '2':
Case condition 1: statement(s) day = "Tuesday"
break; break;
Case condition 2: statement(s) default:

break; }
...
... document.getElementById("demo").innerHTML
Case condition n: statement(s) = day;
break; }
</script>
</body>
</html>

Introduction To JavaScript - Finals

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Introduction To JavaScript - Finals

Uploaded by

Copyright:

Available Formats

JavaScript is the most popular programming <h1>JavaScript Can Validate Input</h1>

What JavaScript can do: <input id="numb">

1.Using window.alert() 4.Using console.log()

</body> <h1>JavaScript Variables</h1>

<h1>JavaScript Variables</h1> <script>

You can also add strings, but strings will be

<p>Add "John" + " " + "Doe":</p>

Control Flow Statements

1. If Statement - is the fundamental control

</body> 3. If…else if… statement - is the one level

// Get the value of the input field with id="numb"

</body> <p id="demo"></p>

Case condition 2: statement(s) default:

You might also like