JavaScript
What is JavaScript and Why it is Used?
JavaScript is a programming language .
Used both on the client-side and server-side that allows you to make web pages interactive.
Where HTML and CSS are language that give structure and style to web pages,JavaScript gives web pages ,JavaScript gives web pages interactive elements that engage a user.
JavaScript can change HTML content
one of many JavaScript HTML methods is getElenentById( ).
the example below “finds” an HTML elements(with id=”demo” and change the elements content (innerHTML) to “Hello JavaScript”.
<!DOCTYPE html>
<html>
<p id="demo">JavaScript can change HTML content.</p>
<button type="button" onclick="document.getElementById("demo"),innerHTML="Hello Javascript!">Click me
</button>
</body>
</html>
The < script > tag
In HTML JavaScript code is inserted between <script> and </script>tags.
<!DOCTYPE html>
<html>
<p id="demo">JavaScript in Body</p>
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
</body>
</html>
JavaScript in <head>
In this example a JavaScript function is placed in the <head> section of an HTML page. the function is called when a button is clicked.
<!DOCTYPE html>
<html><head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>
<h1>A Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try
it</button>
</body>
</html>
JavaScript Display Possibilities
JavaScript can display data in different ways:
Writing into an HTML elements 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( ).
Using innerHTML
To access an HTML elements JavaScript can use the document.getElementById(id) method.
The id attribute defines the HTML elements. The innerHTML property defines the HTML content.
<!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>
Using document.write.
It is convenient to use document.write( ).
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
document.write(10+ 6);
</script>
</body>
</html>
Using window.alert( )
You can use an alert box to display data.
<!DOCTYPE html>
<html>
<body>
<p>My first paragraph.</p>
<script>
window.alert(52 + 6);
</script>
</body>
</html>
Using
console.log( )
For debugging purposes, you can call the 
console.log() method
in the browser to display data.
<!DOCTYPE html>
<html>
<body>
<h2>Activate Debugging</h2>
<p>F12 on your keybord will activate debugging.</p>
<p>Then select "Console" in the debugger menu.</p>
<p>Then click Run again.</p>
<script>
console.log(50 + 9);
</script>
</body>
</html>
Javascript print( )
JavaScript does not have any print object or print methods.
You cannot access output devices from JavaScript.
The only exception is that you can call the window.print() method in
the browser to print the content of the current window.
<!DOCTYPE html>
<html>
<body>
<h2>The window.print() Method</h2>
<p>Click the button to print the current page.</p>
<button onclick="window.print()">Print this page</button>
</body>
</html>
.png)
Comments
Post a Comment