1. Using JavaScript
To begin experimenting with JavaScript, you should install an Integrated Development Environment (IDE) that supports this language. There are many good choices, such as NetBeans, Eclipse, Visual Studio, and Brackets. In this book we will be using NetBeans, which is available for free from Netbeans.org. To follow along make sure you download one of the bundles that include HTML 5 support, as this also includes support for JavaScript.
Alternatively, you can develop using a simple text editor such as Notepad although this is less convenient than using an IDE. If you choose to do so, just create an empty document with an .html file extension and open it in the editor of your choice.
Creating a Project
After installing NetBeans, go ahead and launch the program. You then need to create a project, which will manage the HTML source files and other resources of your website. Go to File New Project to display the New Project window. From there select the HTML 5 category in the left frame, and then the HTML 5 Application project in the right frame. Click the Next button and you can configure the name and location of the project. When you are done, click Finish to let the wizard make your project.
You have now created an HTML 5 project. In the Projects panel (Window Projects) you can see that the project consists of a single file called index.html, located in your sites root folder. The file contains some basic HTML 5 markup, which can be simplified further to the markup seen below.
Embedding JavaScript
There are two ways of inserting JavaScript into a web document. The first is to place the code within a script element. A document can have multiple such elements, and each can enclose any number of JavaScript statements.
The other, more common method is to include the code in an external file and then link to that file using the src attribute of the script element. This way several documents can use the same code without having to duplicate it on every page.
By convention, the .js extension is used for files that contain JavaScript code. To add a new file with this name to your NetBeans project, right-click on the Site Root folder in the Projects panel and select New JavaScript file. From the dialog box give the source file the name mycode.js. Click Finish and the file will be added to your project and opened for you.
For the purpose of experimentation, you can inline your code using the first method of embedding. However, for real world applications, all but the simplest of scripts should be made external. This makes the code easier to read and maintain, as it separates the JavaScript code (page behavior) from the HTML markup (page content). As external files are cached by browsers, this also improves performance of the site.
Displaying Text
As is common when learning a new programming language, the first example JavaScript code will display a Hello World text string. This is accomplished by adding the following line within the body element of the web document.
document.write("Hello World");
This code statement uses the write method that belongs to the document object. The method accepts text as its argument, delimited by double quotes. These concepts will be explored further in later chapters.
Statements in JavaScript are separated by semicolons. The semicolon may be omitted if the statement is followed by a line break, as this is also interpreted as a statement separator.
document.write("Hello World")
The full web document should now look like this.
document.write("Hello World");
To view the page, open the HTML file with a web browser. In NetBeans, this is done by clicking Run Run Project (F6), or by clicking the green arrow on the toolbar. You can select your preferred browser from Run Set Project Browser. When the document is viewed in the browser, the script is executed as soon as the page loads and the text string is displayed.
View Source
While you have the browser opened, you can view the source code that makes up the page by pressing Ctrl + U. This shortcut works in all major browsers, including Chrome, Firefox, and Internet Explorer (IE). The source code window reveals the HTML markup, as well as the unparsed JavaScript code.
Viewing the source code of web pages in this way provides a great way to learn from other web developers. Whenever you find an interesting feature on a web page whether it is made with HTML, CSS, JavaScript or another language the page source will often reveal how it was created.
Browser Compatibility
JavaScript is most often run on the client-side, inside the browser, as opposed to the server-side. For the code to be executed it is therefore required that the client views the document in a browser that supports JavaScript.
Since JavaScript is the most popular client-side scripting language, it works with virtually all browsers in use today. However, the client may choose to disable JavaScript, so there is no way to guarantee that client-side code is executed. Even so, most web sites today use JavaScript, and many rely on it to function correctly.
HTML provides the noscript element to specify alternative content for browsers that do not support JavaScript or that have it disabled.
Please enable JavaScript for full functionality of this site.
Console Window
Most browsers have a development console available that allows you to view information from your JavaScript code for debugging purposes. To print information to this console, the log method of the console object is used.
console.log("Hello Console");
The process for bringing up the console is the same in Chrome, Firefox, and Internet Explorer. You right-click on the page and select Inspect Element. This brings up the development window from where you can find the Console tab. In Internet Explorer, you will need to launch the development window first and then refresh the page in order to view the console output.
Comments
Comments are used to clarify code to developers and they have no effect on the parsing of the code. JavaScript has the standard notations for single-line ( // ) and multiline ( /**/ ) comments, as used by many other languages.
// single-line comment
/* multi-line
comment */
As in HTML, whitespace characters such as spaces, tabs, and comments are generally ignored in JavaScript. This allows you a lot of freedom in how to format your code. The formatting you use is a matter of preference. Choose a style that makes sense to you and aim to keep it consistent.
Code Hints
If you are unsure of what a specific object contains, or what arguments a function takes, you can take advantage of code hints in some IDEs, such as NetBeans. The code hint window is brought up by pressing Ctrl + Space and provides quick access to any code entities you are able to use within the current context. This is a powerful feature that you should learn to make good use of.
Footnotes
https://netbeans.org/downloads/ .
2. Variables
Variables are containers used for storing data, such as numbers or strings, so that they can be used multiple times in a script.