Difference between revisions of "JavaScript"
Adelo Vieira (talk | contribs) (→Using JavaScript) |
Adelo Vieira (talk | contribs) (→Where to) |
||
| Line 76: | Line 76: | ||
Try it at https://jsfiddle.net/ | Try it at https://jsfiddle.net/ | ||
| − | <syntaxhighlight lang=" | + | <syntaxhighlight lang="html"> |
<!DOCTYPE html> | <!DOCTYPE html> | ||
<html> | <html> | ||
| Line 101: | Line 101: | ||
Try it at https://jsfiddle.net/ | Try it at https://jsfiddle.net/ | ||
| − | <syntaxhighlight lang=" | + | <syntaxhighlight lang="html"> |
<!DOCTYPE html> | <!DOCTYPE html> | ||
<html> | <html> | ||
| Line 146: | Line 146: | ||
To use an external script, put the name of the script file in the src (source) attribute of a <nowiki> <script> </nowiki> tag: | To use an external script, put the name of the script file in the src (source) attribute of a <nowiki> <script> </nowiki> tag: | ||
| − | <syntaxhighlight lang=" | + | <syntaxhighlight lang="html"> |
<script src="myScript.js"></script> | <script src="myScript.js"></script> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| Line 155: | Line 155: | ||
Example 1 - This example uses a full URL to link to a script: | Example 1 - This example uses a full URL to link to a script: | ||
| − | <syntaxhighlight lang=" | + | <syntaxhighlight lang="html"> |
<!DOCTYPE html> | <!DOCTYPE html> | ||
<html> | <html> | ||
Revision as of 15:39, 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
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>
Output
https://www.w3schools.com/js/js_output.asp
JavaScript Display Possibilities. JavaScript can "display" data in different ways:
- 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().
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";
