|
|
| Line 1: |
Line 1: |
| | | | |
| − | <br />
| |
| − | https://www.javascript.com/
| |
| − |
| |
| − | https://www.w3schools.com/js/default.asp
| |
| − |
| |
| − | JavaScript enables interactive web pages and is an essential part of web applications. JavaScript was initially created to execute in the browser. Historically, JavaScript was used primarily for client-side scripting, in which scripts written in JavaScript are embedded in a HTML webpage <span style="color:green">'''and run by a JavaScript Engine in the user's web browser'''</span>. Today, JavaScript can execute not only in the browser, but also on the server, or actually on any device that has a special program called the JavaScript engine. Node.js, for example, is an open-source, cross-platform JavaScript run-time environment that executes JavaScript code outside of a browser.
| |
| − |
| |
| − | 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.
| |
| − |
| |
| − |
| |
| − | Note: 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
| |
| − |
| |
| − |
| |
| − | '''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
| |
| − |
| |
| − |
| |
| − | ==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.
| |
| − |
| |
| − |
| |
| − | <br />
| |
| − |
| |
| − | ==Installation==
| |
| − |
| |
| − |
| |
| − | <br />
| |
| − | ==IDE for JavaScript==
| |
| − |
| |
| − |
| |
| − | <br />
| |
| − | ==Using JavaScript==
| |
| − | Historically, JavaScript was used primarily for client-side scripting, in which scripts written in JavaScript are embedded in a HTML webpage and run by a JavaScript engine in the user's web browser. Today, JavaScript can execute not only in the browser, but also on the server, or actually on any device that has a special program called the JavaScript engine. Node.js, for example, is an open-source, cross-platform JavaScript run-time environment that executes JavaScript code outside of a browser.
| |
| − |
| |
| − |
| |
| − | <br />
| |
| − | ===From the web browser console===
| |
| − | Let's see how that works. Open the Web Browser console («Ctrl + Shit + i» and go to the console tab). This console is a JavaScript shell. You can so execute JavaScript commands.
| |
| − |
| |
| − |
| |
| − | For example, you can display the body of the web page by executing:
| |
| − | <syntaxhighlight lang="javascript">
| |
| − | document.body
| |
| − | </syntaxhighlight>
| |
| − |
| |
| − |
| |
| − | You can make changes in the background color with:
| |
| − | <syntaxhighlight lang="javascript">
| |
| − | document.body.style.backgroundColor = "red";
| |
| − | </syntaxhighlight>
| |
| − |
| |
| − |
| |
| − | Another example:
| |
| − | <syntaxhighlight lang="javascript">
| |
| − | window.alert(5 + 6);
| |
| − | alert(5 + 6);
| |
| − | </syntaxhighlight>
| |
| − |
| |
| − |
| |
| − | <br />
| |
| − | ====Google Chrome Developer Tools====
| |
| − | * Google Chrome Customize Developer Tools: Dark Theme / Color Schema: https://stackoverflow.com/questions/20777454/google-chrome-customize-developer-tools-theme-color-schema
| |
| − |
| |
| − |
| |
| − | <br />
| |
| − |
| |
| − | ===JS code embedded in a HTML page===
| |
| − | Try it at https://jsfiddle.net/
| |
| − | <syntaxhighlight lang="html">
| |
| − | <!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>
| |
| − | </syntaxhighlight>
| |
| − | The method that is executed ''onclick'': '''''"document.getElementById('demo').innerHTML = Date()"''''' is a JS method that has been embedded into a HTML code.
| |
| − |
| |
| − |
| |
| − | <br />
| |
| − | ====Inside a HTML file using the -script- Tag====
| |
| − | https://www.w3schools.com/js/js_whereto.asp
| |
| − |
| |
| − | In HTML, JavaScript code must be inserted between '''''script''''' tags.
| |
| − |
| |
| − | Old JavaScript examples may use a type attribute: <nowiki> <script type="text/javascript"> </nowiki>. 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 <nowiki> <body> </nowiki>, 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:
| |
| − |
| |
| − | Try it at https://jsfiddle.net/
| |
| − | <syntaxhighlight lang="html">
| |
| − | <!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>
| |
| − | </syntaxhighlight>
| |
| − |
| |
| − |
| |
| − | Example 2 - In this example, a JavaScript function is placed in the <nowiki> <body> </nowiki> section of an HTML page. The function is invoked (called) when a button is clicked:
| |
| − |
| |
| − | Try it at https://jsfiddle.net/
| |
| − | <syntaxhighlight lang="html">
| |
| − | <!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>
| |
| − | </syntaxhighlight>
| |
| − |
| |
| − |
| |
| − | <br />
| |
| − | ====Calling an external JS file from a HTML page====
| |
| − | 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 <nowiki> <script> </nowiki> tag is located.
| |
| − | *External scripts cannot contain <nowiki> <script> </nowiki> 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
| |
| − | <syntaxhighlight lang="javascript">
| |
| − | function myFunction() {
| |
| − | document.getElementById("demo").innerHTML = "Paragraph changed.";
| |
| − | }
| |
| − | </syntaxhighlight>
| |
| − |
| |
| − |
| |
| − | 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="html">
| |
| − | <script src="myScript.js"></script>
| |
| − | </syntaxhighlight>
| |
| − |
| |
| − |
| |
| − | 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:
| |
| − |
| |
| − | Try it at https://jsfiddle.net/
| |
| − | <syntaxhighlight lang="html">
| |
| − | <!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 />
| |
| − | ===Using Nodejs from the linux terminal===
| |
| − | See [[HTTP REST APIs with Node.js - Express.js|Nodejs]]
| |
| − |
| |
| − |
| |
| − |
| |
| − | '''From the Nodejs console:'''
| |
| − |
| |
| − | Go to a terminal and execute the command '''''«node»'''''. This will open the Nodejs Shell/Interpreter:
| |
| − | node
| |
| − |
| |
| − | Try some commands in the shell:
| |
| − | <syntaxhighlight lang="javascript">
| |
| − | console.log("Hello world!");
| |
| − | </syntaxhighlight>
| |
| − |
| |
| − | <syntaxhighlight lang="javascript">
| |
| − | function myFunction() {
| |
| − | console.log("Hello world!");
| |
| − | }
| |
| − | </syntaxhighlight>
| |
| − |
| |
| − |
| |
| − |
| |
| − | '''You can also create a JS script and run it using the '''''node''''' command:'''
| |
| − |
| |
| − | javaScript.js
| |
| − | <syntaxhighlight lang="javascript">
| |
| − | function add(){
| |
| − | var result = 5 + 10;
| |
| − | console.log(result);
| |
| − | }
| |
| − | add()
| |
| − | </syntaxhighlight>
| |
| − |
| |
| − | node javaScript.js
| |
| − |
| |
| − |
| |
| − | <br />
| |
| − | ===Using Nodejs from VS Code===
| |
| − |
| |
| − |
| |
| − | <br />
| |
| − |
| |
| − | ==The Syntax==
| |
| − | https://www.w3schools.com/js/js_syntax.asp
| |
| − |
| |
| − |
| |
| − | <br />
| |
| − | ===Variables===
| |
| − |
| |
| − | *JavaScript uses the '''''var''''' keyword to declare variables. An equal sign is used to assign values to variables. In this example, x is defined as a variable. Then, x is assigned (given) the value 6:
| |
| − |
| |
| − | *JavaScript variables value can be changed anytime.
| |
| − |
| |
| − | *JavaScript variables are loosely-typed which means it does not require a data type to be declared.
| |
| − |
| |
| − | <blockquote>
| |
| − | <syntaxhighlight lang="javascript">
| |
| − | var x, y;
| |
| − | x = 5;
| |
| − | y = 6;
| |
| − | var total = x + y;
| |
| − | var pi = 3.14;
| |
| − | var person = "John Doe";
| |
| − | </syntaxhighlight>
| |
| − | </blockquote>
| |
| − |
| |
| − |
| |
| − | *A variable declared without a value will have the value '''''undefined''''':
| |
| − | <blockquote>
| |
| − | <syntaxhighlight lang="javascript">
| |
| − | var carName;
| |
| − | </syntaxhighlight>
| |
| − | </blockquote>
| |
| − |
| |
| − |
| |
| − | <br />
| |
| − |
| |
| − | ===Comments===
| |
| − | Code after double slashes // or between /* and */ is treated as a comment.
| |
| − |
| |
| − |
| |
| − | <br />
| |
| − | ===Identifier===
| |
| − |
| |
| − | *Identifiers are names.
| |
| − | *In JavaScript, identifiers are used to name variables (and keywords, and functions, and labels).
| |
| − | *The rules for legal names are much the same in most programming languages.
| |
| − | *In JavaScript, the first character must be a letter, or an underscore (_), or a dollar sign ($). Subsequent characters may be letters, digits, underscores, or dollar signs.
| |
| − | *Numbers are not allowed as the first character. This way JavaScript can easily distinguish identifiers from numbers.
| |
| − | *All JavaScript identifiers are '''case sensitive:'''
| |
| − |
| |
| − | :*The variables lastName and lastname, are two different variables.
| |
| − | :*JavaScript does not interpret VAR or Var as the keyword var.
| |
| − |
| |
| − | *Hyphens are not allowed. It is not allowed to name a variable as «first-name». Hyphens are reserved for subtractions.
| |
| − |
| |
| − |
| |
| − | <br />
| |
| − | ==Data types==
| |
| − | https://codeburst.io/javascript-data-types-explained-347555cd2d4d
| |
| − |
| |
| − | https://www.w3schools.com/js/js_datatypes.asp
| |
| − |
| |
| − |
| |
| − | You can use the JavaScript <code>typeof</code> operator to find the type of a JavaScript variable.
| |
| − |
| |
| − | The <code>typeof</code> operator returns the type of a variable or an expression:<syntaxhighlight lang="javascript">
| |
| − | typeof "" // Returns "string"
| |
| − | typeof "John" // Returns "string"
| |
| − | typeof "John Doe" // Returns "string"
| |
| − |
| |
| − | typeof 0 // Returns "number"
| |
| − | typeof 314 // Returns "number"
| |
| − | typeof 3.14 // Returns "number"
| |
| − | typeof (3) // Returns "number"
| |
| − | typeof (3 + 4) // Returns "number"
| |
| − |
| |
| − | typeof undefined // undefined
| |
| − | typeof null // object - You can consider it a bug in JavaScript that typeof null is an object. It should be null.
| |
| − | </syntaxhighlight><br />
| |
| − | {| class="wikitable"
| |
| − | !
| |
| − | !'''Data Type'''
| |
| − | !Description
| |
| − | ! colspan="2" |Example
| |
| − | |-
| |
| − | | rowspan="6" |'''Primitives'''
| |
| − | |'''Number'''
| |
| − | |There is only one type of Number in JavaScript. Numbers can be written with or without a decimal point. A number can also be <code>+Infinity</code>, <code>-Infinity</code>, and <code>NaN</code> (not a number).
| |
| − | | colspan="2" |
| |
| − | var num1 = 32;
| |
| − |
| |
| − | var num2 = +Infinity;
| |
| − | |-
| |
| − | |'''String'''
| |
| − | |Strings are used for storing text. Strings must be inside of either double or single quotes. In JS, Strings are immutable (they cannot be changed).
| |
| − | | colspan="2" |
| |
| − | var str1 = 'hello, it is me';
| |
| − |
| |
| − | var str2 = "hello, it's me";
| |
| − | |-
| |
| − | |'''Boolean'''
| |
| − | |A boolean represents only one of two values: true, or false.
| |
| − | | colspan="2" |
| |
| − | var boo1 = true;
| |
| − |
| |
| − | var boo2 = false;
| |
| − | |-
| |
| − | |'''Undefined'''
| |
| − | |A variable that has no value is '''undefined'''.
| |
| − |
| |
| − |
| |
| − | You can also empty an object by setting it to <code>undefined</code>
| |
| − | |
| |
| − | var testVar;
| |
| − |
| |
| − | console.log(testVar); // undefined
| |
| − | | rowspan="2" |'''Difference Between Undefined and Null''':
| |
| − | undefined and null are equal in value but different in type:<syntaxhighlight lang="typescript">
| |
| − | typeof undefined // undefined
| |
| − | typeof null // object
| |
| − |
| |
| − | null === undefined // false
| |
| − | null == undefined // true
| |
| − | </syntaxhighlight><br />
| |
| − | |-
| |
| − | |'''Null'''
| |
| − | |In JavaScript <code>null</code> is "nothing". It is supposed to be something that doesn't exist.
| |
| − | Unfortunately, in JavaScript, the data type of <code>null</code> is an object.
| |
| − |
| |
| − | You can consider it a bug in JavaScript that <code>typeof null</code> is an object. It should be <code>null</code>.
| |
| − |
| |
| − | You can empty an object by setting it to <code>null</code>:
| |
| − | <br />
| |
| − | |var nothing = null;
| |
| − | |-
| |
| − | |'''Symbol'''
| |
| − | |Symbols are new in ES6. A Symbol is an '''immutable''' primitive value that is '''unique'''. For the sake of brevity, that is the extent that this article will cover Symbols.
| |
| − | | colspan="2" |const mySymbol = Symbol('mySymbol');
| |
| − | |-
| |
| − | | rowspan="3" |'''Non-primitives'''
| |
| − | |'''Object'''
| |
| − | |An object is a collection of properties. These properties are stored in key/value pairs. Properties can reference any type of data, including objects and/or primitive values.
| |
| − | | colspan="2" |<syntaxhighlight lang="javascript">
| |
| − | var obj = {
| |
| − | key1: 'value',
| |
| − | key2: 'value',
| |
| − | key3: true,
| |
| − | key4: 32,
| |
| − | key5: {}
| |
| − | }
| |
| − | </syntaxhighlight>
| |
| − | |-
| |
| − | |'''Array'''
| |
| − | |
| |
| − | | colspan="2" |var cars = ["Saab", "Volvo", "BMW"];
| |
| − | |-
| |
| − | |'''RegExp'''
| |
| − | |
| |
| − | | colspan="2" |
| |
| − | |}
| |
| − |
| |
| − |
| |
| − | <br />
| |
| − | ==Operators==
| |
| − |
| |
| − | {{#lst:Java|operators}}
| |
| − |
| |
| − |
| |
| − | <br />
| |
| − |
| |
| − | ==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 <code>innerHTML</code>.
| |
| − | *Writing into the HTML output using <code>document.write()</code>.
| |
| − | *Writing into an alert box, using <code>window.alert()</code>.
| |
| − | *Writing into the browser console, using <code>console.log()</code>.
| |
| − |
| |
| − | <br />
| |
| − | {| class="wikitable"
| |
| − | !Different ways/Method
| |
| − | !Example
| |
| − | Try the codes at https://jsfiddle.net/
| |
| − | |-
| |
| − | |Writing into an HTML element using '''innerHTML'''
| |
| − |
| |
| − | |To access an HTML element, JavaScript can use the <code>document.getElementById(id)</code> method. The <code>id</code> attribute defines the HTML element.
| |
| − | The <code>innerHTML</code> property defines the HTML content.<syntaxhighlight lang="html">
| |
| − | <!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>
| |
| − | </syntaxhighlight>
| |
| − | |-
| |
| − | | rowspan="2" |Writing into the HTML output using '''document.write()'''
| |
| − | *It is convenient and It should only be used for testing purposes.
| |
| − | |<syntaxhighlight lang="html">
| |
| − | <!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>
| |
| − | </syntaxhighlight>
| |
| − | |-
| |
| − | |Using document.write() after an HTML document is loaded, will '''delete all existing HTML''':<syntaxhighlight lang="html">
| |
| − | <!DOCTYPE html>
| |
| − | <html>
| |
| − | <body>
| |
| − |
| |
| − | <h1>My First Web Page</h1>
| |
| − | <p>My first paragraph.</p>
| |
| − |
| |
| − | <button type="button" onclick="document.write(5 + 6)">Try it</button>
| |
| − |
| |
| − | </body>
| |
| − | </html>
| |
| − | </syntaxhighlight><br />
| |
| − | |-
| |
| − | |Writing into an alert box using '''window.alert()'''
| |
| − | *You can use an alert box to display data.
| |
| − | |<syntaxhighlight lang="html">
| |
| − | <!DOCTYPE html>
| |
| − | <html>
| |
| − | <body>
| |
| − |
| |
| − | <h1>My First Web Page</h1>
| |
| − | <p>My first paragraph.</p>
| |
| − |
| |
| − | <script>
| |
| − | window.alert(5 + 6);
| |
| − | </script>
| |
| − |
| |
| − | </body>
| |
| − | </html>
| |
| − | </syntaxhighlight>
| |
| − | |-
| |
| − | |Writing into the browser console using '''console.log()'''
| |
| − | *For debugging purposes, you can use the <code>console.log()</code> method to display data.
| |
| − | :* <span style="color:#FF0000">You'll need to go to the browser console to see the output.</span>
| |
| − | |<syntaxhighlight lang="html">
| |
| − | <!DOCTYPE html>
| |
| − | <html>
| |
| − | <body>
| |
| − |
| |
| − | <script>
| |
| − | console.log(5 + 6);
| |
| − | </script>
| |
| − |
| |
| − | </body>
| |
| − | </html>
| |
| − | </syntaxhighlight>
| |
| − | |}
| |
| − | <br />
| |
| − |
| |
| − | ==Control flow statements==
| |
| − |
| |
| − |
| |
| − | <br />
| |
| − | ===If statements===
| |
| − |
| |
| − |
| |
| − | <br />
| |
| − | ===For Loops===
| |
| − |
| |
| − |
| |
| − | <br />
| |
| − | ===While Loops===
| |
| − |
| |
| − |
| |
| − | <br />
| |
| − | ==Functions==
| |
| − | https://www.w3schools.com/js/js_functions.asp
| |
| − |
| |
| − | 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 />
| |
| − | ===Callback Functions===
| |
| − | https://codeburst.io/javascript-what-the-heck-is-a-callback-aba4da2deced
| |
| − |
| |
| − | https://www.dashingd3js.com/lessons/javascript-callback-functions
| |
| − |
| |
| − |
| |
| − | Simply put: A callback is a function that is to be executed after another function has finished executing — hence the name ‘call back’.
| |
| − |
| |
| − | More complexly put: In JavaScript, functions are objects. Because of this, functions can take functions as arguments, and can be returned by other functions. Functions that do this are called higher-order functions. Any function that is passed as an argument is called a callback function.
| |
| − |
| |
| − | <syntaxhighlight lang="javascript">
| |
| − | function functionOne(x){
| |
| − | return x;
| |
| − | };
| |
| − |
| |
| − |
| |
| − | function functionTwo(var1){
| |
| − | // some code
| |
| − | }
| |
| − |
| |
| − | functionTwo(functionOne);
| |
| − | </syntaxhighlight>
| |
| − |
| |
| − |
| |
| − | <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";
| |
| − | </syntaxhighlight>
| |
| − |
| |
| − |
| |
| − | <br />
| |
| − |
| |
| − | ====Change HTML Attribute Values====
| |
| − | In this example JavaScript changes the value of the src (source) attribute of an <img> tag:
| |
| − |
| |
| − | <syntaxhighlight lang="javascript">
| |
| − | <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>
| |
| − | </syntaxhighlight>
| |
| − |
| |
| − |
| |
| − | <br />
| |
| − | ====Change HTML Styles - CSS====
| |
| − | Changing the style of an HTML element, is a variant of changing an HTML attribute:
| |
| − | <syntaxhighlight lang="javascript">
| |
| − | document.getElementById("demo").style.fontSize = "35px";
| |
| − | </syntaxhighlight>
| |
| − |
| |
| − |
| |
| − | <br />
| |
| − | ====Hide HTML Elements====
| |
| − | Hiding HTML elements can be done by changing the display style:
| |
| − | <syntaxhighlight lang="javascript">
| |
| − | document.getElementById("demo").style.display = "none";
| |
| − | </syntaxhighlight>
| |
| − |
| |
| − |
| |
| − | <br />
| |
| − | ====Show HTML Elements====
| |
| − | Showing hidden HTML elements can also be done by changing the display style:
| |
| − | <syntaxhighlight lang="javascript">
| |
| − | document.getElementById("demo").style.display = "block";
| |
| − | </syntaxhighlight>
| |
| − |
| |
| − |
| |
| − | <br />
| |
| − | ==Reading JSON from URL in JavaScript==
| |
| − | http://zetcode.com/articles/javascriptjsonurl/
| |
| − |
| |
| − |
| |
| − | <br />
| |
| − |
| |
| − | ==Hoisting in JavaScript==
| |
| − | https://scotch.io/tutorials/understanding-hoisting-in-javascript
| |
| − |
| |
| − |
| |
| − | <br />
| |
