JAVASCRIPT
NOTES: -Code after double slashes // or between /* and */ is treated as a comment. -Case sensitive. -JavaScript treats a dollar sign as a letter, identifiers containing $ are valid variable names. -JavaScript treats underscore as a letter, identifiers containing _ are valid variable names. -let variables cannot be re-declared, var variables can be, however can impose problems. -the characters "+=" can be used to concatenate strings.CHANGING HTML CONTENT
First need to get the HTML element TAG to change, for that use: getElementById() SAMPLE: document.getElementById("machete").innerHTML = "Hello JavaScript"; You can use " or ', both accepted.CHANGING HTML STYLE CSS
SAMPLE: document.getElementById("machete").style.fontSize = "35px"; To HIDE SAMPLE: document.getElementById("machete").style.display = "none"; To SHOW SAMPLE: document.getElementById("machete").style.display = "block";WHERE TO ALLOW THE SCRIPT TAGS
Can be placed in the either the <body>, or in the <head> section of an HTML page. .......SAMPLE FUNCTION AND INVOKE <script> function myFunction() { document.getElementById("machete").innerHTML = "change completed."; } </script> <button type="button" onclick="myFunction()">Try it</button>EXTERNAL SCRIPT INVOKE
FULL URL:<script src="https://machetevault.github.io/conf/machete.js"></script> FILE PATH:<script src="/conf/machete.js"></script> FILENAME:<script src="machete.js"></script>OUTPUT
-into HTML: innerHTML | document.write() SAMPLE:<script>document.write(5 + 6);</script> | <button type="button" onclick="document.write(5 + 6)">Try it</button> -alert box: windows.alert() SAMPLE:<script>window.alert(5 + 6);</script> -console log: console.log() SAMPLE:<script>console.log(5 + 6);</script>JAVASCRIPT KEYWORDS
var > declare a variable. let > declare a block variable. const > declare a block constant. [cannot be changed] if > mark a block of statements to be executed on a condition. switch > mark a block of statements to be executed in different cases. for > mark a block of statements to be executed in a loop. function > declare a function. return > exits a function. try > implement error handling to a block of statements. NOTE: var keyword should only be used in code written for older browsers. "let" most common.OBJECTS & OPERATORS
NOTE: const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}; -key:value pair -normally declared with "const" -not necessarily one line, it can be multiple lines ::: how to access properties ? objectName.propertyName | objectName["propertyName"] keyword >>> THIS "refers to an object" | "this is not a variable. It is a keyword. You cannot change the value of this." ::: how to access object methods ? objectName.methodName() | name = person.fullName(); typeof "John Doe" >> find the type of a JavaScript variable.COMMON HTML DOM EVENTS
-onchange() -onclick() -onmouseover() -onmouseout() -onkeydown() -onload()CODENUMBERS AND STRINGS
NOTES: -The backslash (\) escape character turns special characters into string characters. -Exists some different built-in properties that can help on JS with some actions. ::: GET LENGTH let text = "MACHETE"; let length = text.length; RESULT: 7 ::: METHODS slice() extracts a part of a string and returns the extracted part in a new string. | let part = text.slice(7, 13); let part = text.slice(7); will show the rest of the string after position 7. let part = text.slice(-12); will do the inverse. substring(), is similar to slice() // let part = str.substring(7, 13); replace(), method replaces a specified value with another value in a string. SAMPLE: let newText = text.replace("Microsoft", "W3Schools"); -replaces only the first match. replaceAll() will replace all matches. -returns a new string. -does not change the string it is called on. -replace case insensitive, use a regular expression with an /i flag. SAMPLE: let newText = text.replace(/MICROSOFT/i, "W3Schools"); indexOf() method returns the index (position) the first occurrence of a string in a string SAMPLE: let index = text.indexOf("locate");
©® - Since 2023