[ Professor JavaScript ] Part 6: Syntax — Part 1
It is additional online learning material for Professor JavaScript YouTube channel, Part 6: Syntax — Part 1
Professor JavaScript is a JavaScript online learning courses YouTube Channel. Students can learn how to develop codes with JavaScript from basic to advanced levels through the online courses in this YouTube channel.
It is additional online learning material for Professor JavaScript YouTube channel, Part 6: Syntax — Part 1.
All languages, human and computer languages, have syntaxes.
Based on two dictionaries, Syntax is:
[ from Cambridge Dictionary ] The structure of statements or elements in a computer language.
[ from dictionary.com ] The grammatical rules and structural patterns governing the ordered use of appropriate words and symbols for issuing commands, writing code, etc., in a particular software application or programming language.
1. Two double quotes ( “ “ ) or two single quotes ( ‘ ‘ ) are considered the same in JavaScript
Using two double quotes ( “ “ ) or two single quotes ( ‘ ‘ ) in a statement are considered the same. For examples:
First example:
<script type=”text/javascript” gwd-events=”handlers”>
window.gwd = window.gwd || {};
gwd.button_1_on_click = function(event) {
text_1.value = “It uses two double quotes to define a string value”;
};
gwd.button_2_on_click = function(event) {
text_1.value = ‘It uses two single quotes to define a string value’;
};
</script>
Source code: Using Double and Single Quotes Experiment 1
Live test: click here
Second example:
<script type=”text/javascript” gwd-events=”handlers”>
window.gwd = window.gwd || {};
gwd.button_2_on_click = function(event) {
document.getElementById(“experiment_text”).style.visibility = “visible”;
};
gwd.button_1_on_click = function(event) {
document.getElementById(“experiment_text”).style.visibility = “hidden”;
};
gwd.button_3_on_click = function(event) {
document.getElementById(‘experiment_text’).style.visibility = ‘visible’;
};
gwd.button_4_on_click = function(event) {
document.getElementById(‘experiment_text’).style.visibility = ‘hidden’;
};
</script>
Source code: Using Double and Single Quotes Experiment 2
Live test: Click here
2. Where To Write JavaScript Codes
JavaScript codes can be written in two different places, inserted in an HTML page or a separate independent file.
on an HTML page, JavaScript codes must be written between <script> and </script> tag pair. JavaScript codes can be inserted in <head> or <body> sections of an HTML page, or both of them.
If you use Google Web Designer software to code your JavaScript codes on an HTML page, you don’t need to decide to write your JavaScript codes inside <head> or <body> sections of the HTML page. Google Web Designer decides it automatically for you, but you can also decide it manually on the “Code View” mode of Google Web Designer.
If you use the same JavaScript codes on many different HTML pages, it’s better to write it in a separate independent file ( with .js file extension ), and then include and use it on many different HTML pages.
To include and use JavaScript codes from a separate independent file, for example “MyJavaScriptCodesLibrary.js”, on an HTML page, you must include the file using “src=”MyJavaScriptCodesLibrary.js”” on a <script> tag. For example:
<script src=”MyJavaScriptCodesLibrary.js”></script>
You can include a separate independent JavaScript file on an HTML page on the <head> or <body> sections of the HTML page.
You don’t need to use <script></script> tags pair in a separate independent JavaScript code file.
If the HTML file includes and uses the separate independent JavaScript file from a different folder or website, you must add a complete folder path or URL before the JavaScript file name. For example:
First example:
MyJavaScriptCodesLibrary.js file is inside js sub folder and the HTML file is inside the main folder:
<script src=”js/MyJavaScriptCodesLibrary.js”></script>
Second example:
JavaScriptCodesLibrary.js is inside other website:
<script src=”https://www.OtherWebsiteName.com/js/JavaScriptCodesLibrary.js"></script>
Real codes example:
<script src=”MyFirstJavaScriptLibrary2.js”></script>
<script src=”js/MySecondJavaScriptLibrary.js”></script>
<script src=”http://professor-javascript.42web.io/MyThirdJavaScriptLibrary.js"></script>
Source code: Including JS Files to an HTML File Experiment
Live test: Click here
3. JavaScript is a Case-Sensitive Programming Language
Two same words with different lower-upper case alphabets on it are considered as two different words in JavaScript.
For example:
<script>
var first_variable, First_Variable, FIRST_VARIABLE;
first_variable = 10;
First_Variable = 100;
FIRST_VARIABLE = 1000;
</script><script type=”text/javascript” gwd-events=”handlers”>
window.gwd = window.gwd || {};
gwd.button_1_on_click = function(event) {
text_1.value = first_variable.toString();
};
gwd.button_2_on_click = function(event) {
text_1.value = First_Variable.toString();
};
gwd.button_3_on_click = function(event) {
text_1.value = FIRST_VARIABLE.toString();
};
</script>
Source code: Case Sensitive Experiment
Live test: click here
This online learning course is written by Roby Widjaja ( the owner and content creator of Professor JavaScript YouTube Channel ).