1.
Date and Time </body>
<!DOCTYPE html> </html>
<html>
<body> 5. It can hide html elements
<h2>My First JavaScript</h2> <!DOCTYPE html>
<button type="button" <html>
onclick="document.getElementById('demo').innerHTML = Date()"> <body>
Click me to display Date and Time.</button> <h2>What Can JavaScript Do?</h2>
<p id="demo"></p> <p id="demo">JavaScript can hide HTML elements.</p>
</body> <button type="button"
</html> onclick="document.getElementById('demo').style.display='none'">Click
Me!</button></body>
</html>
2. Change text
<!DOCTYPE html>
<html> 6. It can show hidden blocks too
<body> <!DOCTYPE html>
<h2>What Can JavaScript Do?</h2> <html>
<p id="demo">I'll say your name</p> <body>
<button type="button" onclick="document.getElementById('demo').innerHTML = 'Hello <h2>What Can JavaScript Do?</h2>
Sagar!'">Click Me!</button> <p>JavaScript can show hidden HTML elements.</p>
</body> <p id="demo" style="display:none">Hello JavaScript!</p>
</html> <button type="button"
onclick="document.getElementById('demo').style.display='block'">Click Me!</button>
3. It can change source image too </body>
<!DOCTYPE html> </html>
<html>
<body>
<h2>What Can JavaScript Do?</h2> 7. In HTML, JavaScript code is inserted between <script> and </script> tags.
<p>JavaScript can change HTML attribute values.</p> Scripts can be placed in the <body>, or in the <head> section of an HTML
<p>In this case JavaScript changes the value of the src (source) attribute of an page, or in both.
image.</p>
<button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on 8.In this example, a JavaScript function is placed in the <head> section of an HTML
the light</button> page.
<img id="myImage" src="pic_bulboff.gif" style="width:100px"> <!DOCTYPE html>
<button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off <html>
the light</button> <head>
</body> <script>
</html> function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
4. It can change the size of the text too }
<!DOCTYPE html> </script>
<html> </head>
<body> <body>
<h2>What Can JavaScript Do?</h2> <h2>Demo JavaScript in Head</h2>
<p id="demo">JavaScript can change the style of an HTML element.</p> <p id="demo">A Paragraph</p>
<button type="button" <button type="button" onclick="myFunction()">Try it</button>
onclick="document.getElementById('demo').style.fontSize='35px'">Click Me!</button> </body>
</html> Writing into an alert box, using window.alert().
<!DOCTYPE html>
<html>
8. In this example, a JavaScript function is placed in the <body> section of an HTML <body>
page. <h1>My First Web Page</h1>
<!DOCTYPE html> <p>My first paragraph.</p>
<html> <script>
<body> window.alert(5 + 6);
<h2>Demo JavaScript in Body</h2> </script>
<p id="demo">A Paragraph</p> </body>
<button type="button" onclick="myFunction()">Try it</button> </html>
<script>
function myFunction() { Writing into the browser console, using console.log().
document.getElementById("demo").innerHTML = "Paragraph changed."; For printing
} <!DOCTYPE html>
</script> <html>
</body> <body>
</html> <button onclick="window.print()">Print this page</button>
</body>
9.JavaScript can "display" data in different ways: </html>
Writing into an HTML element, using innerHTML.
<!DOCTYPE html> 10. A computer program is a list of "instructions" to be "executed" by a computer.
<html> In a programming language, these programming instructions are called statements.
<body> A JavaScript program is a list of programming statements.
<h1>My First Web Page</h1>
<p>My First Paragraph</p> 11. JavaScript statements are composed of
<p id="demo"></p> Values, Operators, Expressions, Keywords, and Comments.
<script> JavaScript syntax is the set of rules, how JavaScript programs are constructed:
document.getElementById("demo").innerHTML = 5 + 6; // How to create variables:
</script> var x;
</body> let y;
</html> // How to use variables:
x = 5;
Writing into the HTML output using document.write(). y = 6;
The document.write() method should only be used for testing. let z = x + y;
Using document.write() after an HTML document is loaded, will delete all existing Fixed values are called Literals.
HTML: Variable values are called Variables.
<!DOCTYPE html>
<html> Numbers are written with or without decimals:
<body> Strings are text, written within double or single quotes:
<h1>My First Web Page</h1> In a programming language, variables are used to store data values.
<p>My first paragraph.</p> JavaScript uses the keywords var, let and const to declare variables.
<script> JavaScript uses arithmetic operators ( + - * / ) to compute values:
document.write(5 + 6); JavaScript uses an assignment operator ( = ) to assign values to variables:
</script> All JavaScript identifiers are case sensitive.
</body> The variables lastName and lastname, are two different variables:
</html> Historically, programmers have used different ways of joining multiple words into one
variable name:
