Lecture20 - JavaScript PDF

28/04/2019 Lecture20 Instructor: Asma’a Khtoom
Introduction to Java Script
JavaScript is the programming language of HTML and the Web.it is one of the 3 languages all web
developers must learn:
1. HTML to define the content of web pages
2. CSS to specify the layout of web pages
3. JavaScript to program the behavior of web pages
It is Client-side scripting used to change interface behaviors within a specific web page, in response
to mouse or keyboard actions or at specified timing events. In this case, the dynamic behavior
occurs within the presentation. Like js , ajax.
JavaScript HTML methods
1. One of many JavaScript HTML methods is getElementById().:returns the element that has
the ID attribute with the specified value. It returns null if no elements with the specified ID
exists. An ID should be unique within a page. However, if more than one element with the
specified ID exists, the getElementById() method returns the first element in the source
code.
2. (innerHTML): The innerHTML property sets or returns the HTML content (inner HTML) of an
element.
Different Examples Show the Effects of Java Script.
1. Change the elements content using JS, when the page loaded.
<!DOCTYPE html>
<html>
<body>
<h1>My Web Page</h1>
<p id="myP1">This is a p element.</p>
1
<p id="myP2">This is a p2 element.</p>
<script>
document.getElementById("myP1").innerHTML = "Hello Student.";
document.getElementById("myP2").innerHTML = "How are you?";
</script>
</body></html>
2. Change the elements content using JS, when the button clicked.
This example uses the getElementById() method to "find" an HTML element (with id="demo") and
changes the element content (innerHTML) to "Hello JavaScript"(on button click)
<html><body>
<h2>What Can JavaScript Do?</h2>
<p id="demo">JavaScript can change HTML content.</p>
<button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'

id="#btn" >Click Me!</button>
</body></html>
3. Change the style of element using JS.
Using functions: If there is more than one change you should write them in a function in a script
which can be written in body or head.
<html>
<body>
<p id="demo">JavaScript can change the style of an HTML element.</p>
2
</script>
<button type="button" onclick="myFunction()">Click Me!</button>
<script>
function myFunction() {
document.getElementById("demo").style.fontSize = "25px";
document.getElementById("demo").style.color = "red";
document.getElementById("demo").style.backgroundColor = "yellow";
}</script>
</body></html>
4. Change HTML elements attributes using JS.
Example1. Change img src
<html> <body>
<button onclick="document.getElementById('myImage').src='pic_bulbon.gif'" id="on">Turn on
the light</button>
<img id="myImage" src="pic_bulboff.gif" style="width:100px">
<button onclick="document.getElementById('myImage').src='pic_bulboff.gif'" id="off">Turn off

the light</button>
</body>
</html>
3
Example2. (Change the HTML content, URL, and target of a link)

<!DOCTYPE html>
<html>
<body>
<a id="myAnchor" href="http://www.microsoft.com">Microsoft</a>
<button onclick="myFunction()">Change link</button>
<script>
document.getElementById("myAnchor").innerHTML = "W3Schools";
document.getElementById("myAnchor").href = "https://www.w3schools.com";
document.getElementById("myAnchor").target = "_blank";
</script>
</body>
</html>
5. Show and hide elements using JS.
<html>
<body>
<p id="demo">JavaScript can hide HTML elements.</p>
<button type="button" onclick="document.getElementById('demo').style.display='none'" > Hide

</button>
<button type="button" onclick="document.getElementById('demo').style.display='block' ">

Show</button>
</body>
</html>
4
6. Copy paragraph into another one

<!DOCTYPE html>
<html>
<head>
<script>
var x = document.getElementById("myP").innerHTML;
document.getElementById("demo").innerHTML = x;
}
</script>
</head>
<body>
<p id="myP">I am a paragraph.</p>
<p>Click the button get the HTML content of the p element.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
</body>
</html>
JavaScript Output
JavaScript can "display" data in different ways:
 Writing into an HTML element, using innerHTML.

 Writing into the HTML output using document.write().
 Writing into an alert box, using window.alert().
1. Using innerHTML
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>

<p>My First Paragraph</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 5 + 6;</script></body>
</html>
5
2. Using document.write().
<!DOCTYPE html>
<html>
<body>

<p>My first paragraph.</p>
<script>
document.write(5 + 6);
</script>
</body>
</html>
Case 2: if in button Using document.write() after an HTML document is loaded, will delete all existing
HTML.
<!DOCTYPE html>
<html>
<body>

<button type="button" onclick="document.write(5 + 6)">Try it</button>
</body>
</html>
3. Using window.alert()
Example1.
<!DOCTYPE html>
<html>
<body>

<script>
window.alert(5 + 6);
</script>
</body>
</html>
6
Example 2:
<html>
<body>
<p id="demo">Click the button to alert the text of this paragraph.</p>
<button onclick="myFunction()">Try it</button>
<script>
alert(document.getElementById("demo").innerHTML);}</script></body>
</html>
JavaScript Functions
 A JavaScript function is a block of code designed to perform a particular task.

 A JavaScript function is executed when "something" invokes it (calls it).
 A JavaScript function is defined with the function keyword, followed by a name, followed by
parentheses ().
Example1
<html>
<body>
<p>This example calls a function which

performs a calculation, and returns the
result:</p>
<p id="demo"></p>
<script>
function myFunction(p1, p2) {
return p1 * p2;
document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>
</body>
</html>
7
Function Invocation
The code inside the function will execute when "something" invokes (calls) the function:
1. When an event occurs (when a user clicks a button)
Example
<html>
<body>
<img id="myImage" src="pic_bulboff.gif" width="100" height="180">
<p>
<button type="button" onclick="light(1)">Light On</button>
<button type="button" onclick="light(0)">Light Off</button>
</p>
<script>
function light(sw) {
var pic;
if (sw == 0) {
pic = "pic_bulboff.gif"
} else {
pic = "pic_bulbon.gif"
} document.getElementById('myImage').src = pic;
</script>
</body>
</html>
2. When it is invoked (called) from JavaScript code
8
Example: Calculate the product of two numbers, and return the result:
<p id="demo"></p>
<script>
var x = myFunction(4, 3); // Function is called, return value will end up in x (x=12)
function myFunction(a, b) {
return a * b; // Function returns the product of a and b
}
</script>
Function Return
When JavaScript reaches a return statement, the function will stop executing. Accessing a function
without () will return the function definition instead of the function result.
Example1: Convert Fahrenheit to Celsius:
<p id="demo"></p>
<script>
function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
}
document.getElementById("demo").innerHTML = toCelsius(77);
</script>
Example2
Instead of using a variable to store the return value of a function:
<p id="demo"></p>
<script>
var x = toCelsius(77);
var text = "The temperature is " + x + " Celsius";
function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
}
document.getElementById("demo").innerHTML = toCelsius(77); </script>
Or you can use the function directly, as a variable value:
var text = "The temperature is " + toCelsius(77) + " Celsius";
JavaScript Form Validation
9
Example1. Data validation: This code work as required attribute:
<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}
</script>
</head>
<body>
<form name="myForm" action="/action_page.php"

onsubmit="return validateForm()" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
</body>
</html>
Example2. Data validation: Check to enter only numbers and between 1-10
<!DOCTYPE html>
10
<html>
<body>
<h2>JavaScript Can Validate Input</h2>
<p>Please input a number between 1 and 10:</p>
<input id="numb">
<button type="button" onclick="myFunction()">Submit</button>
<p id="demo"></p>
<script>
var x, text;
// Get the value of the input field with id="numb"
x = document.getElementById("numb").value;
// If x is Not a Number or less than one or greater than 10
if (isNaN(x) || x < 1 || x > 10) {
text = "Input not valid";
} else {
text = "Input OK";
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
11

Lecture20 - JavaScript PDF

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Lecture20 - JavaScript PDF

Загружено:

Авторское право:

Доступные форматы

28/04/2019 Lecture20 Instructor: Asma’a Khtoom

Introduction to Java Script

1. HTML to define the content of web pages

2. CSS to specify the layout of web pages

3. JavaScript to program the behavior of web pages

JavaScript HTML methods

Different Examples Show the Effects of Java Script.

<h1>My Web Page</h1>

<p id="myP1">This is a p element.</p>

<p id="myP2">This is a p2 element.</p>

<h2>What Can JavaScript Do?</h2>

<p id="demo">JavaScript can change HTML content.</p>

<button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'

3. Change the style of element using JS.

4. Change HTML elements attributes using JS.

Example1. Change img src

<button onclick="document.getElementById('myImage').src='pic_bulboff.gif'" id="off">Turn off

Example2. (Change the HTML content, URL, and target of a link)

<a id="myAnchor" href="http://www.microsoft.com">Microsoft</a>

<button onclick="myFunction()">Change link</button>

5. Show and hide elements using JS.

<p id="demo">JavaScript can hide HTML elements.</p>

<button type="button" onclick="document.getElementById('demo').style.display='none'" > Hide

<button type="button" onclick="document.getElementById('demo').style.display='block' ">

6. Copy paragraph into another one

<p id="myP">I am a paragraph.</p>

<p>Click the button get the HTML content of the p element.</p>

<button onclick="myFunction()">Try it</button>

JavaScript can "display" data in different ways:

 Writing into an HTML element, using innerHTML.

<h1>My First Web Page</h1>

<h1>My First Web Page</h1>

<h2>My First Web Page</h2>

<h1>My First Web Page</h1>

<p id="demo">Click the button to alert the text of this paragraph.</p>

<button onclick="myFunction()">Try it</button>

 A JavaScript function is a block of code designed to perform a particular task.

<p>This example calls a function which

function myFunction(p1, p2) {

document.getElementById("demo").innerHTML = myFunction(4, 3);

1. When an event occurs (when a user clicks a button)

<img id="myImage" src="pic_bulboff.gif" width="100" height="180">

<button type="button" onclick="light(1)">Light On</button>

<button type="button" onclick="light(0)">Light Off</button>

2. When it is invoked (called) from JavaScript code

Example1: Convert Fahrenheit to Celsius:

Instead of using a variable to store the return value of a function:

JavaScript Form Validation

Example1. Data validation: This code work as required attribute:

<form name="myForm" action="/action_page.php"

<h2>JavaScript Can Validate Input</h2>

<p>Please input a number between 1 and 10:</p>

<button type="button" onclick="myFunction()">Submit</button>

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

// If x is Not a Number or less than one or greater than 10

if (isNaN(x) || x < 1 || x > 10) {

text = "Input not valid";

text = "Input OK";

Вам также может понравиться