JAVASCRIPT: A Beginner’s Guide to Learning the Basics of JavaScript Programming (2015)

Chapter 1. JavaScript 101

JavaScript is a client-side scripting language. It is used to improve website or webpage functionality. Also, it is used in conjunction with HTML and CSS to create responsive websites.

JavaScript is one of many client side-scripting languages (e.g., VBScript, PerlScript, Jscript, ActionScript) that exist in the web. However, it is the most popular and widely used. Due to its wide usage, it has spawned multiple frameworks. Frameworks are there to make coding easier. They also improve and enhance the functionality of languages. JavaScript frameworks will be discussed in the later parts of this book.

On the other hand, this scripting language is behind many website features and additional functions on the web. It is safe to say that compared to other languages, JavaScript is the most used in the world. With almost every website employing this programming language in every page it has, without a doubt, its absence will make the Internet boring.

Aside from that, JavaScript is cross platform and it is a useful tool in creating impromptu programs and macros. Due to the mass availability of browsers in every computer and smart devices, you can easily create a decent program with the use of a text-editing program and a web browser.

Frequently Asked Questions

Before you go ahead on learning JavaScript, take some time to read this small FAQ section. The information listed here may clear up some misunderstanding and misconceptions about this scripting language.

Is It Compatible to All Web Browsers?

Despite being standardized, be wary that browsers may behave or perform differently in some codes or cases. In addition, JavaScript also has a server side-scripting version. It provides more power to its client side scripting. However, do note that this book will only tackle the client-side scripting version.

Nevertheless, most browsers support JavaScript, and the ones you use will certainly understand scripts written in JavaScript. By the way, this book prefers the use of Google Chrome. You can get Google Chrome from Google.com. However, the usage of other browsers is not discouraged so long as they have a web developer console, which will be discussed later.

Is It Related to the Java Programming Language?

It is not directly related to Java. Although, the way you code JavaScript resembles Java. There are also some familiar terms and keywords that are present in JavaScript and Java. Nevertheless, both are different from each other.

As a fun tidbit, JavaScript is derived and standardized with ECMAScript by Netscape. JavaScript has undergone multiple name changes before. Primarily, ECMAScript was not used because it sounded like a skin disease, according to ECMAScript’s developer, Brendan Eich.

Also, do not confuse JavaScript with JScript. JScript is Microsoft’s “version” of the ECMAScript. However, JavaScript and JScript are relatively the same. It was just used to prevent a trademark issue between Microsoft and Sun Microsystems, the company that developed Java.

Is It Difficult to Learn and Understand?

Not really. Nevertheless, the difficulty of learning and understanding JavaScript hugely depends on your goal and reasons. Why are you trying to learn JavaScript anyway?

If you are reading this book to learn how to create web forms and minor scripts, then you will not need to read everything. Alternatively, if you are trying to learn how to create dynamic pages, then you will need to understand everything in here, but you will not have a hard time processing the lessons included in this book.

However, if you are attempting to build web applications and add custom and advanced functionalities on your page, then this book will only serve as a precursor to the things you need to learn. Not to mention that, if you are not familiar with programming, you will need to require yourself to master this book.

Do I Need Programming Experience?

For those who have no idea with programming, this book will help you get your bearings. Instead of the usual dive to inserting JavaScript in HTML code, you will be first introduced to using a development console, which will be discussed later.

How Do Browsers Process JavaScript?

A few of you might not be familiar with the processes behind the scenes when a browser loads a page. If you are one of them, then give yourself some time to process this section.

Client and Server Concept

Simply put, when you access a webpage on the Internet, two entities play major roles in order to deliver you the content that you need. First is the client. Second is the server. Of course, the connection between the two is essential, but it will be discussed thoroughly here.

The client is your machine/computer/device that you use to access the web. Of course, you, as the user, and the browser is part of the “client”.

The server, on the other hand, is the computer that stores and provides clients the content that they need. The connection between the client and server is provided by an Internet connection, usually.

The location and the server itself changes depending on the content you demand. The server can be on the web, within your local area connection, and can even be your computer.

If you are just going to access a regular webpage, these things will happen:

1. Your browser will send a request to the server for the content

2. The server will process the request and find the content needed

3. The server will sent the content back to the client

4. The client will process the content and render it to your screen

Out of the four (broad) processes, this section will focus on the fourth one.

Setting Expectations and Prerequisites

Learning JavaScript requires basic knowledge of HTML and CSS. Knowledge in programming is not required since basic programming and programming JavaScript scripts will be included in this book. Aside from that, you must be at least familiar with how the web works.

Supplementary Education

Of course, this book is not the only helpful resource you can use to learn JavaScript. Multiple websites and organizations provide insightful and direct information regarding this subject.

One of the best resources is the Mozilla Development Network. Aside from learning the basics in there, there are references that can be useful to you once you are finished with this book. However, of course, most of the subjects there lean towards the development of JavaScript using Mozilla related applications such as Firefox and Thunderbird.

Recommendations after Reading This Book

If you wish to become a certified web guru, then learning JavaScript is only one of the first steps you need to take. After this, it is recommendable that you go ahead and learn about server-side scripting and database management on the web.

If you want to go further, you will need to learn other web scripts such as Ruby, Python, and Perl. On the other hand, learning about server stacks and networking would greatly help you a lot if you want to turn web development into a fruitful career.

The Goals of This Book

Once you finished reading this book, you will become familiar with basic usage of JavaScript. You will be able to create functions that will allow you to personalize, customize, and improve a website.

Also, you will have a better understanding of how the web works. You will now have fair ideas on how Internet applications and feature rich websites work — to the point that you can easily come up of basic frameworks on how you can imitate them.

Tools You Need

At the earlier parts of this book, all you need is a simple text-editing program like Notepad. If you are a diligent, patient, and hardworking person, it is advisable that you go through executing the coding samples in this book using a simple text editor.

In case you know that you are impatient and time matters too much for you, then it is suggested that you use a source code editor like Notepad++. Notepad++ is a free source code editing tool that you can download from the web.

The next thing that you will need is web browser and its development console. The most recommended browser you should use is Google Chrome. You will also use this mostly at the earlier parts of the book. Depending on your preferences, you might go through the lessons with using the browser alone.

In Google Chrome, you can access the development console by pressing the F12 key on your keyboard or you can press Ctrl + Shift + J. If you are using a Mac computer, you can access it by pressing Command + Option + J.

On the other hand, you can just access it through Chrome’s menu, click on More Tools, and then click on Console or JavaScript Console. If you cannot find those, you can just access the console through the Developer’s Tools by pressing Ctrl + Shift + I.

Other browsers that use Chromium, which Google Chrome uses, like Opera, also have this function. Mozilla Firefox also has a Developer’s Console.

What’s the Console for Anyway?

The console is a great tool that can allow you to test codes and familiarize yourself with JavaScript. Unlike with creating an HTML page from scratch, saving it on a file, and then testing it on the browser, you can just type the code on the console, press Enter, and it will be integrated or injected to the file immediately.

Some web developers call this method Live Scripting or interactive coding. Lately, it has become apparent that interactive coding is a faster and more efficient way of teaching programming to newbies.

Aside from avoiding the hassle of coding, saving, compiling, and testing, people can just type the line of code they want and it will processed right away. Also, most interactive console or programs provide additional feedback, which provides assistance to developers and learners.

What’s Next?

Well, open your Google Chrome’s console, and play with it. For starters, use it as a calculator. For example, type:

· 43 + 14

· 32 * 51

· 12 / 3

· 12419 – 4512

Of course, you do not need to use the numbers indicated exactly. Try to type any expression, formula, or equation that you can think of. Whenever you type an equation, press the Enter key. The console will provide you with a result. For example:

> 1 + 1

< 2

> _

Note: In the example codes for the developer’s console, the underscore is just there to represent the cursor in the console. Also, the greater than sign signifies user input while the less than sign signifies feedback from the console and/or output.

You might have typed the = sign or wonder why you do not need to add it on the equation. There is a reason for that. The equal (=) sign or symbol plays a different role in JavaScript or in almost every programming language.

Now that you get the hang of fiddling with the developer console, the lessons on how to program or create scripts in JavaScript will begin.

Note:

If ever you encounter an unfamiliar term that was mentioned in a section of this book, try to analyze its meaning through its context. Move forward; it will be surely discussed.