Javascript (JS)
What is JS?
JavaScript (JS) is a programming language that allows implementation of complex things on web pages. Every time a web page does more than just sit there and display static information for the user to look at—displaying timely content updates, interactive maps, animated 2D/3D graphics, scrolling video jukeboxes, or more—you can bet that JavaScript is probably involved.
JS is a lightweight, interpreted, object-oriented language with functions, and is best known as the scripting language for Web pages, but it’s used in many non-browser environments as well both on user machines and servers. Contrary to popular misconception, JS is not “Interpreted Java”. In a nutshell, JavaScript is a dynamic scripting language supporting prototype based object construction. The basic syntax is intentionally similar to both Java and C++ to reduce the number of new concepts required to learn the language. Language constructs, such as if statements, for and while loops, and switch and try … catch blocks function the same as in these languages (or nearly so).
JS Structure
Embed or Include
JS can either embed the code directly inside an HTML file, or can be placed in a line in the HTML file that will point to the external JavaScript file. In most cases the latter is recommended.
In order to do that we add the script opening and closing tags. Between the two is where JS code resides.
Output
The first is how to interact with the JS code running in the browser. There are a number of ways JavaScript can display text for the user (output). They are:
- Alert: The most simple one is by using the alert function which shows a pop-up in the browser with the text. The alert() function is actually rarely used, but it is an easy way to use JS. ALERT
- document.write: JavaScript code uses the document.write function to change the content of a page. This function was often used when one wanted to change what’s shown. Today, there are some more advanced techniques.
- console.log: Most web browsers provide what is called a “JS console”. It is an additional window which is normally not visible, where the browser can print out warnings and errors generated by the execution of JS code. (E.g. if there is a syntax error in the code.) In order to see the console it needs to be opened. On Mac with Chrome it can be opened by using: Command-Option-J. In Windows Chrome Console Log can be opened with CTRL-SHIFT-I.
Input
There are two ways to receive input. Neither of these are in use a lot, but they can be easily used to play around with the basics.
- prompt: A prompt will show a pop-up window with the text provided as the first parameter & with a textbox the user can fill. When the user presses the “OK” box, the value entered by the user in the text box will be returned by the prompt() function. Here is an example: PROMPT
- confirm: This method isn’t really an input method. It allows the developer to ask a Yes/No question. Calling the confirm() function will show a pop-up window with the provided texts and with two buttons. If the user presses OK the confirm() function will return true, if the user presses cancel or hits the ESC key, the function will return false. Of course in order for this to make more sense you’ll have to understand what true and false really mean and what this if - else construct does. If you have programming background then you probably already understand the code, and even if you don’t have programming background you might figure out. That code can basically be translated to the following English sentence:
If confirm returned true, print “Hello World”, otherwise print “OK, I won’t print it.”
JS Variables
A variable means anything that can vary. In JS, a variable stores the data value that can be changed later on. There are three reseerved keywords to declare a variable they const, let, & var.
**
var`: The var keyword is used in all JS code from 1995 to 2015. If a developer wants to run code in older browsers, you must use var.const
: was a keyword were added to JS in 2015. The general rule is to always declare variables with const. Unless…let
: If you think the value of the variable can change, use let. Let was a keyword were added to JS in 2015.
References:
- Javascript
- Introduction to JavaScript - basic output
- JavaScript input with prompt and confirm
- JavaScript Variables