Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
131 views

Introduction To JavaScript - Finals

1. JavaScript is a programming language used to make web pages interactive by running scripts on the user's computer without requiring downloads. 2. JavaScript can change HTML content, attributes, and styles, and can validate user input data. It displays output using alerts, writing to the page, or modifying HTML elements. 3. JavaScript variables are containers that store and assign data values like numbers and text strings. Variables must have unique names and can be short names or more descriptive names.

Uploaded by

Marck Lean
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
131 views

Introduction To JavaScript - Finals

1. JavaScript is a programming language used to make web pages interactive by running scripts on the user's computer without requiring downloads. 2. JavaScript can change HTML content, attributes, and styles, and can validate user input data. It displays output using alerts, writing to the page, or modifying HTML elements. 3. JavaScript variables are containers that store and assign data values like numbers and text strings. Variables must have unique names and can be short names or more descriptive names.

Uploaded by

Marck Lean
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 8

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";
<button type="button"
}
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>
<h1>My First Web Page</h1>
<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>
<h1>My First Web Page</h1>
<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:
<h1>JavaScript Variables</h1>
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>

<h1>JavaScript Variables</h1>

<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">
<button type="button"
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>

You might also like