Embed Size (px)
DESCRIPTION
java script
Citation preview
JavaScript Basics
JavaScript is the most popular programming language in the world.
It is the language for HTML, for the Web, for computers, servers, laptops, tablets, smart phones, and more.
JavaScript Can Change HTML Elements
The HTML DOM (the Document Object Model) is the official W3C standard for accessing HTML elements.
JavaScript can manipulate the DOM (change HTML contents).
The following example changes the content (innerHTML) of an HTML element identified with id="demo".
Example:
<html>
<head>
<title>Javascript</title>
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript";
</script>
</head>
<body>
<p id=”demo”>
</p>
</body>
</html>
The method document.getElementById() is one of many methods in the HTML DOM.
JavaScript Can Change HTML Styles (CSS)
Changing the style of an HTML element, is a variant of changing an HTML attribute.
Example:
document.getElementById("demo").style.fontSize = "25px";
In HTML, JavaScripts must be inserted between <script> and </script> tags.
JavaScripts can be put in the <body> and in the <head> section of an HTML page.
The <script> Tag
To insert a JavaScript into an HTML page, use the <script> tag.
The <script> and </script> tells where the JavaScript starts and ends.
The lines between <script> and </script> contain the JavaScript code:
JavaScript Functions and Events
Often, JavaScript code is written to be executed when an event occurs, like when the user clicks a button.
JavaScript code inside a function, can be invoked later, when an event occurs.
Invoke a function = Call upon a function (ask for the code in the function to be executed).
JavaScript in <head> or <body>
You can place any number of scripts in an HTML document.
Scripts can be placed in the <body> or in the <head> section of HTML, and/or in both.
Often you will see scripts at the bottom of the <body> section of a web page. This can reduce display time.
Sometimes you will see all JavaScript functions in the <head> section.
JavaScript in <head>
In this example, a JavaScript function is placed in the <head> section of an HTML page.
The function is invoked (called) when a button is clicked:
Example:
<html>
<head><script>function myFunction() { document.getElementById("demo").innerHTML = "Paragraph changed.";}</script></head>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
</body></html>
JavaScript in <body>
In this example, a JavaScript function is placed in the <body> section of an HTML page.
The function is invoked (called) when a button is clicked:
Example:
<html><body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
<script>function myFunction() { document.getElementById("demo").innerHTML = "Paragraph changed.";}</script>
</body></html>
External JavaScripts
Scripts can also be placed in external files.
External scripts are practical when the same code is used in many different web pages.
External JavaScript files have the file extension .js.
To use an external script, put the name of the script file in the source (src) attribute of the <script> tag.
Example:
<!DOCTYPE html><html><body><script src="myScript.js"></script></body></html>
Javascript Output
JavaScript does not have any print or output functions.
In HTML, JavaScript can only be used to manipulate HTML elements.
Manipulating HTML Elements
To access an HTML element from JavaScript, you can use the document.getElementById(id) method.
Use the "id" attribute to identify the HTML element, and innerHTML to refer to the element content.
Example:
<html><body><h1>My First Web Page</h1><p id="demo">My First Paragraph</p><script>document.getElementById("demo").innerHTML = "Paragraph changed.";</script>
</body></html>
Writing to The HTML Document
For testing purposes, you can use JavaScript to write directly to the HTML document:
Example:
<!DOCTYPE html><html><body><h1>My First Web Page</h1><p>My first paragraph.</p><script>document.write(Date());</script></body></html>
Example:
<!DOCTYPE html><html><body><h1>My First Web Page</h1><p>My first paragraph.</p><button onclick="myFunction()">Try it</button><script>function myFunction() { document.write(Date());}
</script></body></html>
JavaScript Syntax
JavaScript is a scripting language. It is a lightweight, but powerful, programming language.
Syntax definition: "The principles by which sentences are constructed in a language."
The sentences of a programming language are called computer statements, or just statements.
JavaScript Literals
In a programming language, literals are constant values like 3.14.
Number literals can be written with or without decimals, and with or without scientific notation (e).
3.14
1001
123e5
String literals can be written with double or single quotes:
"John Doe"
'John Doe'
JavaScript Variables
In a programming language, variables are containers for storing information (data).
The equal sign (=) assigns a value to a named variable (just like in normal algebra):
x = 5
length = 6
JavaScript Operators
JavaScript uses operators to compute values (just like algebra):
5 + 6
a * b
JavaScript can assign computed values to named variables (just like algebra):
x = 5 + 6
y = x * 10
Expressions like 5 + 6, and x * 10, are called expression literals.
JavaScript Statements
In HTML, JavaScript statements are written as sequences of "commands" to the HTML browser.
Statements are separated by semicolons.
x = 5 + 6;y = x * 10;
JavaScript Keywords
A JavaScript statement often starts with a keyword. The var keyword tells the browser to create a new variable.
var x = 5 + 6;var y = x * 10;
JavaScript Comments
Not all JavaScript statements are "commands". Anything after double slashes // is ignored by the browser:
// I will not be executed
JavaScript Data Types
JavaScript variables can hold many types of data: numbers, text strings, arrays, objects and much more:
var length = 16; // Number assigned by a number literal var lastName = "Johnson"; // String assigned by a string literalvar cars = ["Saab", "Volvo", "BMW"]; // Array assigned by an array literalvar person = {firstName:John, lastName:Doe}; // Object assigned by an object literal
JavaScript Functions
JavaScript statements written inside a function, can be invoked many times (reused).
Invoke a function = Call upon a function (ask for the code in the function to be executed).
Example:
function myFunction(a, b)
{ return a * b; }
JavaScript Identifiers
All programming languages must identify variables, functions, and objects, with unique names.
These unique names are called identifiers.
Identifier names can contain letters, digits, underscores, and dollar signs, but cannot begin with a number.
Reserved words (like JavaScript keywords) cannot be used as identifiers.
JavaScript is Case Sensitive
In JavaScript all identifiers are case sensitive.
The variables lastName and lastname, are two different variables.
The functions myFunction and myfunction, are two different functions.
JavaScript does not interpret Var; as var.
JavaScript statements
In HTML, JavaScript statements are "commands" to the browser.
The purpose, of the statements, is to tell the browser what to do.
This JavaScript statement tells the browser to write "Hello Dolly" inside an HTML element identified with id="demo":
Example:
document.getElementById("demo").innerHTML = "Hello Dolly.";
Semicolon ;
Semicolon separates JavaScript statements.
Normally you add a semicolon at the end of each executable statement.
Using semicolons also makes it possible to write many statements on one line.
Writing:
a = 5;b = 6;c = a + b;
Is the same as writing:
a = 5; b = 6; c = a + b;
JavaScript Code
JavaScript code (or just JavaScript) is a sequence of JavaScript statements.
Each statement is executed by the browser in the sequence they are written.
This example will manipulate two different HTML elements.
Example:
document.getElementById("demo").innerHTML = "Hello Dolly.";document.getElementById("myDiv").innerHTML = "How are you?";
JavaScript Code Blocks
JavaScript statements can be grouped together in blocks.
Blocks start with a left curly bracket, and end with a right curly bracket.
The purpose of a block is to make the sequence of statements execute together.
A good example of statements grouped together in blocks, are in JavaScript functions.
This example will run a function that will manipulate two HTML elements:
Example:
function myFunction() { document.getElementById("demo").innerHTML = "Hello Dolly."; document.getElementById("myDIV").innerHTML = "How are you?";}
JavaScript Statement Identifiers
JavaScript statements often start with a statement identifier to identify the JavaScript action to be performed.
Statement identifiers are reserved words and cannot be used as variable names (or any other things).
Here is a list of some of the JavaScript statements (reserved words) :
Statements DescriptionBreak Terminates a switch or a loop. Catch Marks the block of statements to be executed when an error
occurs in a try block.Continue Jumps out of a loop and starts at the top.Do…..while Executes a block of statements and repeats the block while a
condition is true.For Marks a block of statements to be executed as long as a
condition is true.For…in Marks a block of statements to be executed for each element of
an object (or array).Function Declares a function.If….else Marks a block of statements to be executed depending on a
condition.Return Exits a function.Switch Marks a block of statements to be executed depending on
different cases.Throw Throws (generates) an error.Try Implements error handling to a block of statements. Var Declares a variable.While Marks a block of statements to be executed while a condition is
true.
White Space in JavaScript Statements
JavaScript ignores extra spaces. You can add white space to your script to make it more readable.
The following lines are equivalent:
var person="Hege"var person = "Hege"
Breaking a JavaScript Statement
You can break up a code line within a text string with a backslash:
var text = "Hello \World!";
However, you cannot break up a code line like this:
var text = \ "Hello World!"; (wrong syntax)
JavaScript Comments
JavaScript comments can be used to explain the code, and make the code more readable.
JavaScript comments can also be used to prevent execution, when testing alternative code.
Single Line Comments
Single line comments start with //.
Any text between // and the end of a line, will be ignored by JavaScript (will not be executed).
The following example uses a single line comment in front of each line, to explain the code:
Example:
// Change heading:document.getElementById("myH").innerHTML = "My First Page";// Change paragraph:document.getElementById("myP").innerHTML = "My first paragraph.";
Example:
var x = 5; // Declare x, give it the value of 5var y = x + 2; // Declare y, give it the value of x + 2
Multi-line Comments
Multi-line comments start with /* and end with */.
Any text between /* and */ will be ignored by JavaScript.
The following example uses a multi-line comment (a comment block) to explain the code:
Example:
/*The code below will change the heading with id = "myH" and the paragraph with id = "myp" in my web page:*/document.getElementById("myH").innerHTML = "My First Page";document.getElementById("myP").innerHTML = "My first paragraph.";
JavaScript Variables
As with algebra, JavaScript variables can be used to hold values (x = 5) or expressions (z = x + y).
Variable can have short names (like x and y) or more descriptive names (age, sum, totalVolume).
Variable names must begin with a letter Variable names can also begin with $ and _ (but we will not use it) Variable names are case sensitive (y and Y are different variables)
One Statement, Many Variables
You can declare many variables in one statement. Start the statement with var and separate the variables by comma: var lastName = "Doe", age = 30, job = "carpenter";
HTML Events
An HTML event can be something the browser does, or something a user does.
Here are some examples of HTML events:
An HTML web page has finished loading
An HTML input field was changed An HTML button was clicked
Often, when events happen, you may want to do something.
JavaScript lets you execute code when events are detected.
Example:
<!DOCTYPE html>
<html>
<body>
<button onclick="getElementById('demo').innerHTML=Date()">The time is</button>
<p id="demo"></p>
</body>
</html>
Javascript Popup boxes
JavaScript has three kind of popup boxes: Alert box, Confirm box, and Prompt box.
Alert 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.
Syntax:
window.alert(“sometext”);
Example:
<!DOCTYPE html>
<html>
<body>
<p>Click the button to display an alert box:</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
alert("I am an alert box!");
}
</script>
</body>
</html>
Confirm box
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.
Syntax:
window.confirm(“sometext”);
Example:
<!DOCTYPE html>
<html>
<body>
<p>Click the button to display a confirm box.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var x;
if (confirm("Press a button!") == true) {
x = "You pressed OK!";
} else {
x = "You pressed Cancel!";
}
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
Prompt box
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.
Syntax:
window.prompt(“sometext”,”default text”);
Example:
<!DOCTYPE html>
<html>
<body>
<p>Click the button to demonstrate the prompt box.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var x;
var person = prompt("Please enter your name","Harry Potter");
if (person != null) {
document.getElementById("demo").innerHTML =
"Hello " + person + "! How are you today?";
}
}
</script>
</body>
</html>
Javascript Strings
JavaScript strings are used for storing and manipulating text.
A string simply stores a series of characters like "John Doe".
A string can be any text inside quotes. You can use single or double quotes:
String indexes are zero-based, which means the first character is [0], the second is [1], and so on.
You can use quotes inside a string, as long as they don't match the quotes surrounding the string:
Example:
var answer = "He is called 'John'";
String Length
The length of a string (a string object) is found in the built in property length.
Example:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var txt="ABCDEFGHIJKLMNOPQRSTUVWXYZ";
document.getElementById("demo").innerHTML = txt.length;
</script>
</body>
</html>
Finding a String in a String
The indexOf() method returns the position (a number) of the first occurrence of a specified text (string) in a string:
Example:
var str = "welcome";var pos = str.indexOf("c");
The lastIndexOf() method finds the last occurrence of a specified text inside a string:
Example:
var str = "welcome";var pos = str.lastIndexOf("e");
Searching for String Content
The search() method searches a string for a specified value and returns the position of the match:
Example:
var str = "hsfgshfgdsgxjhjh";var pos = str.search("x");
Replacing Content
The replace() method replaces a specified value with another value in a string:
Example:
str = "Please visit Microsoft!"var n = str.replace("Microsoft","W3Schools");
Convert to Upper Case
A string is converted to upper case with the method toUpperCase():
Example:
var txt = "Hello World!"; // Stringvar txt1 = txt.toUpperCase();
Convert to Lower Case
A string is converted to lower case with the method toLowerCase():
Example:
var txt = "Hello World!"; // Stringvar txt1 = txt.toLowerCase();
Convert a String to an Array
A string is converted to an array with the built in method string.split():
Example:
var txt = "welcome" // Stringtxt.split("");
String substring() method
The substring() method extracts the characters from a string, between two specified indices, and returns the new sub string.
This method extracts the characters in a string between "start" and "end", not including "end" itself.
If "start" is greater than "end", this method will swap the two arguments, meaning str.substring(1,4) == str.substring(4,1).
If either "start" or "stop" is less than 0, it is treated as if it were 0.
Syntax:
String.substring(start,end);
Example:
var str = "Hello world!";var res = str.substring(1, 4);
