What is Javascript?
JavaScript is the client-side scripting
language used today on the Web. It‘s widely used in tasks ranging from the
validation of form data to the creation of complex user interfaces. Yet the
language has capabilities that many of its users have yet to discover.
JavaScript can be used to manipulate the very markup in the documents in which
it is contained. As more developers discover its true power, JavaScript is
becoming a first class client-side Web technology
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
JS Example
<script
type="text/javascript">
document.write("Hello World from
JavaScript!");
</script>
Event
} Onchange: An HTML element has been changed
} Onclick: The user clicks an HTML element
} Onmouseover:The user moves the mouse over an HTML element
} Onmouseout: The
user moves the mouse away from an HTML element
} Onkeydown:The user pushes a keyboard key
} Onload:The browser has finished loading the page
Example
Functions and Events
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML = "Paragraph
changed.";
}
</script>
</head>
<body>
<h2>JavaScript in Head</h2>
<p id="demo">jhgfhgfhgfhg uhygfghyfhg hgfhgfh hyfhgfh .</p>
<button type="button"
onclick="myFunction()">Try it</button>
</body>
</html>
Where
JS?
} 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 an HTML page, or in both.
Example
Change HTML Content
<!DOCTYPE
html>
<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!"'>Click Me!</button>
</body>
</html>
Example
: Can Change HTML Styles
<!DOCTYPE
html>
<html>
<body>
<h2>What
Can JavaScript Do?</h2>
<p
id="demo">JavaScript can change the style of an HTML
element.</p>
<button
type="button" onclick="document.getElementById('demo').style.fontSize='35px'">Click
Me!</button>
</body>
</html>
Display
Possibilities
} Writing
into an HTML element, using innerHTML.
} Writing
into the HTML output using document.write().
} Writing
into an alert box, using window.alert().
} Writing
into the browser console, using console.log().
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>
<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>
document.write
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
document.write(5 + 6);
</script>
</body>
</html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
document.write(5 + 6);
</script>
</body>
</html>
document.write
On click
<!DOCTYPE
html>
<html>
<body>
<h2>What
Can JavaScript Do?</h2>
<p
id="demo">JavaScript can change the style of an HTML
element.</p>
<button
type="button"
onclick="document.getElementById('demo').style.color='red' ">Click
Me!</button>
</body>
</html>
window.alert
<!DOCTYPE
html>
<html>
<body>
<p>Click
the button to display an alert box.</p>
<button
onclick="myFunction()">Try it</button>
<script>
function
myFunction() {
alert("Hello! I am an alert
box!");
}
</script>
</body>
</html>
Semicolons;
<!DOCTYPE
html>
<html>
<body>
<h2>JavaScript
Statements</h2>
<p>JavaScript
statements are separated by semicolons.</p>
<p
id="demo1"></p>
<script>
var a, b,
c;
a = 1;
b = 2;
c = a +
b;
document.getElementById("demo1").innerHTML
= c;
</script>
</body>
</html>
a = 5; b = 6; c = a + b;
JavaScript
Can Hide HTML Elements
<!DOCTYPE
html>
<html>
<body>
<h2>What
Can JavaScript Do?</h2>
<p
id="demo">JavaScript can hide HTML elements.</p>
<button
type="button"
onclick="document.getElementById('demo').style.display='none'">Click
Me!</button>
</body>
</html>
Show
HTML Elements
} <!DOCTYPE
html>
} <html>
} <body>
} <h2>What
Can JavaScript Do?</h2>
} <p>JavaScript
can show hidden HTML elements.</p>
} <p
id="demo" style="display:none">Hello
JavaScript!</p>
} <button
type="button" onclick="document.getElementById('demo').style.display='block'">Click
Me!</button>
} </body>
} </html>
JavaScript
Operators
<body>
<h2>JavaScript Operators</h2>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML
= (5 + 6) * 10;
</script>
</body>
Camel
Case
} Hyphens are not allowed in JavaScript.
Like: first-name, last-name, master-card
Upper Camel Case (Pascal Case):
FirstName, LastName, MasterCard, InterCity.
Lower Camel Case:
firstName, lastName, masterCard, interCity.
Var
} <body>
} <h2>The
var Keyword Creates Variables</h2>
} <p
id="demo"></p>
} <script>
} var x, y;
} x = 5 +
6;
} y = x *
10;
} document.getElementById("demo").innerHTML
= y;
} </script>
} </body>
Work
with Function
Function
Invocation
} When an
event occurs (when a user clicks a button)
} When it
is invoked (called) from JavaScript code
} Automatically
(self invoked)
Function
Return
Functions
often compute a return value. The return value is
"returned" back to the "caller"
Functions
function name(parameter1,
parameter2, parameter3) {
code to be executed
}
code to be executed
}
Why
Functions?
You can
reuse code: Define the code once, and use it many times.
You can
use the same code many times with different arguments, to produce different
results.
<!DOCTYPE
html>
<html>
<body>
<h2>JavaScript
Functions</h2>
<p>This
example calls a function to convert from Fahrenheit to Celsius:</p>
<p
id="demo"></p>
<script>
function
toCelsius(f) {
return (5/9) * (f-32);
}
document.getElementById("demo").innerHTML
= toCelsius(100);
</script>
</body>
</html>
Why Functions?
You can
reuse code: Define the code once, and use it many times.
You can
use the same code many times with different arguments, to produce different
results.
<!DOCTYPE
html>
<html>
<body>
<h2>JavaScript
Functions</h2>
<p>This
example calls a function to convert from Fahrenheit to Celsius:</p>
<p
id="demo"></p>
<script>
function
toCelsius(f) {
return (5/9) * (f-32);
}
document.getElementById("demo").innerHTML
= toCelsius(100);
</script>
</body>
</html>
Functions
<!DOCTYPE
html>
<html>
<body>
<h2>JavaScript
Functions</h2>
<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>
Function
Return
} When JavaScript reaches a return statement,
the function will stop executing.
} If the function was invoked from a statement, JavaScript
will "return" to execute the code after the invoking statement.
} Functions often compute a return value. The
return value is "returned" back to the "caller":
Objects,
Properties, and Methods
} Object : Car
} Properties:
car.name = Fiat
car.model = 500
car.weight = 850kg
car.color = white
car.model = 500
car.weight = 850kg
car.color = white
} Methods
car.start()
car.drive()
car.brake()
car.stop()
car.drive()
car.brake()
car.stop()
Object Example
var person = {firstName:"John",
lastName:"Doe", age:50, eyeColor:"blue"};
Example
<p>Creating a JavaScript Object.</p>
<p id="demo"></p>
<script>
var person = {
firstName:"John",
lastName:"Doe",
age:50,
eyeColor:"blue“
};
document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + "
years old.";
</script>
Example
<p>Creating
a JavaScript Object.</p>
<p
id="demo"></p>
<script>
var
person = {
firstName : "John",
lastName
: "Doe",
age
: 50,
eyeColor
: "blue"
};
document.getElementById("demo").innerHTML
=
person.firstName
+ " is " + person.age + " years old.";
</script>
Accessing
Object Properties
<p>
There
are two different ways to access an object property:
</p>
<p>You
can use person.property or person["property"].</p>
<p
id="demo"></p>
<script>
var
person = {
firstName: "John",
lastName : "Doe",
id
: 5566
};
document.getElementById("demo").innerHTML
=
person.firstName
+ " " + person.lastName;
</script>
1 Comments
Thank you sharing the excellent post . you helped me to gain more information on the latest technique. Other wise If any one who want a make carrier in linux core to advanced level contact us on 9311002620 or visit https://htsindia.com/Courses/web-and-graphic-designing/web-designing-training-course
ReplyDeletePost a Comment