Getting started with JavaScript Introduction Topic
This draft deletes the entire topic.
Examples
-
Nearly all web browsers and JavaScript environments support writing messages to a console using a suite of logging methods. The most common of these is the
console.log()method.Open up the JavaScript Console in your browser, type the following, and press Enter:
console.log("Hello, World!");
In this example the
console.log()function printsHello, World!to the console, along with a new line, and returnsundefined(which is also shown above in the console output window), because it has no explicit return value.The
console.log()function is also commonly used for debugging purposes. See the Console topic for more instructions on using the console.Note: It is also important to note that
console.log()can also be used to log variables, and not only strings. This is especially useful when logging objects. For example:var foo = "bar"; console.log(foo); // Prints "bar" to the console, returns undefined as in the example above.
Logging an object and all of its properties and methods (this is useful, for example, to log JSON responses received from an API call):
The console can also be used to show the result of a function. The function will be executed and the return of this function will be shown in the log. Example:
Also, to log two or more values, simply separate them by commas:
console.log("thisVar:", thisVar, "and that", thatVar);For more information on how to use the console, see the Console topic.
-
DOM stands for Document Object Model and it is an object-oriented approximation from structured documents like XML and HTML.
Setting the
textContentproperty of anElementis one way to output text on a web page.
Associated HTML:document.getElementById("paragraph").textContent = "Hello, World";<p id="paragraph"></p>This will set the text content of the element that has the id
paragraphto "Hello, World".Or, if you haven't yet defined the HTML element in your HTML page, you can create a new HTML element programmatically. In this example we are creating a new
<p></p>:const element = document.createElement('p'); element.textContent = "Hello, World"; document.body.appendChild(element); //add the newly created element to the DOMIf you're trying to manipulate elements (the DOM) using JavaScript, the JavaScript code must be run after the relevant element has been created in the document. This often means putting the JavaScript
<script>tags after all of your other<body>content, or using event such asonloador jQuery's$(document).ready()to delay your code until after the page has loaded to execute the code once the document is ready. -
-
The
alertmethod displays a visual alert box on screen. The alert method parameter is displayed to the user in plain text.Syntax
window.alert(message);or
alert(message);Examples
alert('hello, world');In Chrome, you would get a pop-up like this:
Notes
The
alertmethod is technically a property ofwindowobject, but since allwindowproperties are automatically global variables, we can usealertas a global variable instead of as a property ofwindow- meaning you can directly usealert()instead ofwindow.alert().Unlike using
console.log,alertacts as a modal prompt meaning that the code callingalertwill pause until the prompt is answered. Traditionally this means that no other JavaScript code will execute until the alert is dismissed:alert('Pause!'); console.log('Alert was dismissed');However the specification actually allows other event-triggered code to continue to execute even though a modal dialog is still being shown. In such implementations, it is possible for other code to run while the modal dialog is being shown.
More information about usage of the
alertmethod can be found in the modals prompts topic.The use of alerts is usually discouraged in favour of other methods that do not block users from interacting with the page - in order to create a better user experience. Nevertheless, it can be useful for debugging.
-
An easy way to get an input from a user is by using the
prompt()method.Syntax
prompt(text, [default])
or
window.prompt(text, [default])
- text: The text displayed in the prompt box [Required]
- default: A default value for the input field [Optional]
Examples
var age = prompt("How old are you?") console.log(age); // Prints the value inserted by the user
If the user clicks "OK" button, the input value is returned. Otherwise, the method returns null.
Note: While the prompt box is displayed, the user is prevented from accessing other parts of the page.
-
Using canvas elements
HTML provides the canvas element for building raster-based images.
First build a canvas for holding image pixel information.
var canvas = document.createElement('canvas'); canvas.width = 500; canvas.height = 250;Then select a context for the canvas, in this case two-dimensional:
var ctx = canvas.getContext('2d');Then set properties related to the text:
ctx.font = '30px Cursive'; ctx.fillText("Hello world!", 50, 50);Then insert the
canvaselement into the page to take effect:document.body.appendChild(canvas);Using SVG
SVG is for building scalable vector-based graphics and can be used within HTML.
First create an SVG element container with dimensions:
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); svg.width = 500; svg.height = 50;Then build a
textelement with the desired positioning and font characteristics:var text = document.createElementNS('http://www.w3.org/2000/svg', 'text'); text.setAttribute('x', '0'); text.setAttribute('y', '50'); text.style.fontFamily = 'Times New Roman'; text.style.fontSize = '50';Then add the actual text to display to the
textelement:text.textContent = 'Hello world!';Finally add the
textelement to oursvgcontainer and add thesvgcontainer element to the HTML document:svg.appendChild(text); document.body.appendChild(svg);Image file
If you already have an image file containing the desired text and have it placed on a server, you can add the URL of the image and then add the image to the document as follows:
var img = new Image(); img.src = 'https://i.ytimg.com/vi/zecueq-mo4M/maxresdefault.jpg'; document.body.appendChild(img); -
Description
The Window.confirm() method displays a modal dialog with an optional message and two buttons, OK and Cancel.
Syntax
result = window.confirm(message);- message is the optional string to be displayed in the dialog.
- result is a boolean value indicating whether OK or Cancel was selected (true means OK).
Examples
Example 1
For example,
window.confirmcan be used to ask for user confirmation before doing a dangerous operation like deleting something in a Control Panel.if(confirm("Are you sure you want to delete this?")) { deleteItem(itemId); }
Example 2
You can store the the user's interaction result in a variable for later use, as well:
var deleteConfirm = confirm("Are you sure you want to delete this?");Notes
-
The argument is optional and not required by the specification.
-
Dialog boxes are modal windows - they prevent the user from accessing the rest of the program's interface until the dialog box is closed. For this reason, you should not overuse any function that creates a dialog box (or modal window). And regardless, there are very good reasons to avoid using dialog boxes for confirmation.
Remarks
JavaScript (not to be confused with Java) is a dynamic, weakly-typed language used for client-side as well as server-side scripting.
JavaScript is a case-sensitive language. It means the language considers capital letters as different from their lowercase counterparts. Keywords in JavaScript are all lowercase.
JavaScript is a commonly referenced implementation of ECMAScript standard.
Topics in this tag often refer to the use of JavaScript within the browser, unless otherwise stated. JavaScript files alone can't be run directly by the browser; it's necessary to embed them in an HTML document. If you have some JavaScript code you'd like to try, you can embed it in some placeholder content like this, and save the result as example.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test page</title>
</head>
<body>
Inline script (option 1):
<script>
// YOUR CODE HERE
</script>
External script (option 2):
<script src="your-code-file.js"></script>
</body>
</html>
