JavaScript
https://www.w3schools.com/js/default.asp
JavaScript and Java are completely different languages, both in concept and design.
JavaScript is one of the 3 languages all web developers must learn:
- HTML to define the content of web pages
- CSS to specify the layout of web pages
- JavaScript to program the behavior of web pages
Web pages are not the only place where JavaScript is used. Many desktop and server programs use JavaScript. Node.js is the best known. Some databases, like MongoDB and CouchDB, also use JavaScript as their programming language.
What JavaScript can do:
What JavaScript can do / What is used for / some of the most important methods:
- JavaScript Can Change HTML Content
- JavaScript Can Change HTML Attribute Values
- JavaScript Can Change HTML Styles (CSS)
- JavaScript Can Hide HTML Elements
- JavaScript Can Show HTML Elements
Contents
JSFiddle
JSFiddle is an online community for testing and showcasing user-created and collaborational HTML, CSS and JavaScript code snippets, known as 'fiddles'. It allows for simulated AJAX calls.
Installation
IDE for JavaScript
Using JavaScript
First example: Try it at https://jsfiddle.net/
<!DOCTYPE html>
<html>
<body>
<h2>My First JavaScript</h2>
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.</button>
<p id="demo"></p>
</body>
</html>
Where to
https://www.w3schools.com/js/js_whereto.asp
Inside a HTML file using the -script- Tag
In HTML, JavaScript code must be inserted between script tags.
Old JavaScript examples may use a type attribute: <script type="text/javascript"> . The type attribute is not required. JavaScript is the default scripting language in HTML.
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 1 - 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:
Try it at https://jsfiddle.net/
<!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>
Example 2 - 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:
Try it at https://jsfiddle.net/
<!DOCTYPE html>
<html>
<body>
<h1>A 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>
Outside a HTML file - JavaScript file
JavaScript files have the file extension .js
- You can place an external script reference in head or body as you like.
- The script will behave as if it was located exactly where the <script> tag is located.
- External scripts cannot contain <script> tags.
External JavaScript Advantages:
- It separates HTML and code
- It makes HTML and JavaScript easier to read and maintain
- Cached JavaScript files can speed up page loads
myScript.js
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
To use an external script, put the name of the script file in the src (source) attribute of a <script> tag:
<script src="myScript.js"></script>
External scripts can be referenced with a full URL or with a path relative to the current web page:
Example 1 - This example uses a full URL to link to a script:
<!DOCTYPE html>
<html>
<body>
<h2>External JavaScript</h2>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Try it</button>
<p>(myFunction is stored in an external file called "myScript.js")</p>
<script src="https://www.w3schools.com/js/myScript.js"></script>
<!-- <p>(myFunction is stored in an external file called "myScript.js")</p> -->
</body>
</html>
</syntaxhighlight
<br />
==Control flow statements==
<br />
===If statements===
<br />
===For Loops===
<br />
===While Loops===
<br />
==Functions==
A JavaScript function is a block of JavaScript code, that can be executed when "called" for.
For example, a function can be called when an event occurs, like when the user clicks a button.
<br />
==Methods==
<br />
===Some of the most important methods===
https://www.w3schools.com/js/js_intro.asp
<br />
====Change HTML Content====
This example uses the method to "find" an HTML element (with id="demo") and changes the element content (innerHTML) to "Hello JavaScript":
<syntaxhighlight lang="javascript">
document.getElementById("demo").innerHTML = "Hello JavaScript";
Change HTML Attribute Values
In this example JavaScript changes the value of the src (source) attribute of an tag:
<button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the light</button>
<img id="myImage" src="pic_bulboff.gif" style="width:100px">
<button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off the light</button>
Change HTML Styles - CSS
Changing the style of an HTML element, is a variant of changing an HTML attribute:
document.getElementById("demo").style.fontSize = "35px";
Hide HTML Elements
Hiding HTML elements can be done by changing the display style:
document.getElementById("demo").style.display = "none";
Show HTML Elements
Showing hidden HTML elements can also be done by changing the display style:
document.getElementById("demo").style.display = "block";
