Difference between revisions of "JavaScript"
Adelo Vieira (talk | contribs) (→The -script- Tag) |
Adelo Vieira (talk | contribs) |
||
| Line 18: | Line 18: | ||
* JavaScript Can Hide HTML Elements | * JavaScript Can Hide HTML Elements | ||
* JavaScript Can Show HTML Elements | * JavaScript Can Show HTML Elements | ||
| + | |||
| + | |||
| + | ==JSFiddle== | ||
| + | https://jsfiddle.net/ | ||
| + | |||
| + | 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. | ||
Revision as of 14:29, 14 October 2019
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
Where to
https://www.w3schools.com/js/js_whereto.asp
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 </nowiki> <head> </nowiki> section of an HTML page, or in both.
Example 1 - In this example, a JavaScript function is placed in the </nowiki> <head> </nowiki> section of an HTML page. The function is invoked (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>
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:
<!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>
Control flow statements
If statements
For Loops
While Loops
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.
Methods
Some of the most important methods
https://www.w3schools.com/js/js_intro.asp
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":
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";
