JavaScript Getting Started

Owned by Ewa Kantorska (Unlicensed)
Last updated: Oct 21, 2021
16 min read

PluralSight course: https://app.pluralsight.com/course-player?clipId=397ae8c3-1047-467a-b1c9-9253ab65f9c7

Instructor: Mark Zamoyta

Software Developer and Educator

@markzamoyta

 

Module 1 - Course overview

·       JavaScript programming

·       Those who are new to JavaScript

·       JavaScript features

·       Simple project: build the card game Blackjack

·       By the end of this course you should be able to build a simple program.

 

Module 2 - Introduction to JavaScript

JavaScript (JS) is the language of the Web. It is used on waste majority of websites and is supported by every major browser. The language has evolved to support the creation of Business Applications on the Web. JavaScript is multiplatform language and it will run in any modern browser. It can be used to create native applications: smartphones and tablets. JS can be used to create server side code. With JS you can create Web servers, Web APIs. It can be used to create desktop software for MAC and Windows computers. Also Utility applications, Security, Data connectivity, etc. can be created using JavaScript. Games can be created with JavaScript as well. Can be used in another services using technology called Node JS. It can be run in any backend servers as well.

 

  1. Installing development server. Open Command Prompt - go to Start/right click/Run/type CMD/

It will open C:\Windows\system32\cmd.exe

·       Checking if Git is installed, type in CMD:

C:\Users\username\git --version

(installed) git ver. 2.32.0.windows.2

If is not installed, you can download from website: http://git-scm.com/downloads

·       Check if JS is installed, specifically we need to know “npm package manager” which is bundle with it, type in CMD :

C:\Users\username\npm --version

(installed) 6.14.14     

If is not installed you can download from website: http://nodejs.org/en/ (download for Windows)

·       Last thing we need “code editor” like e.i. Visual Studio Code.

If you don’t have it, you can download from: code.visualstudio.com (download for Windows). It’s free.

To see if VS Code is installed:

C:\Users\username\code

This command will open VS Code editor.

 

2. Create “Hello Project” from GitHub:

Create this project with help of GitHub page where you can copy or clone the code. This is part of PluralSight

This is a great starting point for JavaScript web application development. You see the project here: web-dev-starter

All commands from beginning:

It puts it in the directory:wev-dev-starter

  • To see it type: C:\Users\username>cd web-dev-starter

>cd web-dev-starter

Enter

  • C:\Users\username>web-dev-starter

To see all files type: dir (Enter)

You can see the files from the project.

3. Open Visual Studio Code (VS Code) to see the project. Type in CMD as follow:

  • C:\Users\username>web-dev-starter>code .

(after code type dot for the current directory), hit Enter

It will open VSCode Welcome page where you can see in Explorer panel (on the left) your project and all files:

4. Click the close button to close Welcome page then you can see VSCode commands:

5. Look into Explorer panel. You can see main file: index.html. Click on that. It opens html file. You can see down “Hello World” in the <body> part.

 Before we run this project, we need to return to Command Prompt and something important here.

6. We need to return the project folder to install npm packages that belong to this project

C:\Users\kantore>web-dev-starter>npm install

And in few seconds everything be should be installed.

7. Go back to your project in VSCode and click on package.json

If you look at “devDependencies” item, it shows that we need to install “lite-server”, ver.2.5.4 .

8. To see if this server was already installed, open in Explorer panel item” node-modules”. As soon as you see the node-modules list is populated, it means install should be ok. However, if you want to verify that just scroll down the node-modules list to check the lite-server is listed, if yes that mean it has been installed. All the other packages here are dependencies.

 We need to run this html file in the browser, we need to run the lite-server that we saw.

9. To open Terminal in VSCode : CRTL+` (key where is ` and ~). That will open Windows PowerShell (Terminal)

For safety reason try to run command prompt command outside of VSCode – to avoid the mal function. It better to run it in Command Prompt window or in PowerShell Window.

10. Type in Terminal: >npm run start

In Terminal will run it code like this:

When done, it will open the browser (JS Starter) with our project:

As you can see the lite-server is running at localhost: port 3000.

11. Make browser smaller to open it next to the editor:

 To open and close Explorer panel: CTRL+Shift+E

12. Because the server is running you can also close the Terminal leaving only code and browser open:

13. Now when server is open, you can play with the code. Remove word “World” and save the file. It will reflect the change on the browser because the server is running. All the benefits of lite-server, you can remove the code, save and it will run with change applied right the way.

 14. As soon as you save this file, the browser will automatically refresh and will get only “Hello” in the browser. This a great way to develop, when start your session and you just kick off your server and from now on and out you can just save your file to see your updates in your browser. This simple website is part of downloadable files of this course.

15. Download from the PluralSight -JavaScript Getting Started course exercises files. Next extract them to your local folder.

16. Once done, in Command Prompt navigate to your directory where reside extracted files and run “dir” to see what is in the folder:

c:\Users\username\05\demos\after>cd js-demo

c:\Users\username\05\demos\after\js-demo\dir

We need that package called json file:

17. Now we need to execute “npm install”

Once this was successful

18. Run again “dir” to see if node-modules have been installed:

Yes, node_modules folder is there:

So command “npm” installed package json and downloaded node_modeles for us. Now go to VSCode and pickup this project from there. Just type in CMD: code . (code space dot) for the current folder and the project will open in VSCode;

19. Click on “index.html” file, there is match more to it. The title of the file is “Carved Rock Fitness”, it is sport goodies store. Click on CSS folder, it contains file #main.css with all styles for the site.

20. Now hit CTRL+` to pull up Terminal:

21. Now let start to run a project:

Execute the command: \js-demo\npm run start

And the lite-server starts up and you can see website here:

22. You can open wide, it is fully responsive. You can see full page. Now, we would like to see the code responsible for it. So keep it small, put the windows browser small next to VSCode window. You can see to the site and see all the part are line up properly.

We will be working with the string “GET A GRIP”:

We will be modifying the webpage but to start with we will be using the string. We will use the string: “Get a Grip” to get an output. But this also another way to do it.

23. Select the string: “Get a Grip”, do right click and go to “Inspect”, then click on Console link:

24. In the some cases we will be showing the output here, in the Console. You can move the Console to the right the side, to the bottom or to the left. Just click on 3 dots (top right corner) and when opens small window, you will see the options: Dock site

And when the Console is showing, we will still have a full access to the website.

We are now set up with the project but we didn’t start to work with JavaScript. It will come in next module.

 

Module 3 – JavaScript Beginnings

Understanding the basic rules of JavaScript:

  • Adding JavaScript to Html page (where to add the code on the html page and its syntax)

  • Multiple JS files in the single Html document (it is very common to have multiple JS files in the one html document)

  • Formatting Code (how JS works with "white" space). White space refers to spaces and tabs and new line characters used to make our code look good and easy to read.

  • Detecting and Fixing Errors in our source code. To spot them quickly and fix the right the way

  • Case sensitivity in JS. It’s important because in JS lower case letter are different from upper case letter.

  • Commenting Code. Sometimes the code is complex, so we can leave explanation or comment written in plain native language for the developers who will work with that code in the future.

  • Adding JavaScript Code to a Web Page. By adding JS code to html page is to change a markup or change the document that’s been showing in the browser. The usually starting page is page called “index.html”

 

How to link JS code to html page?

 

 Beginning tag <script> and ending tag </script> and between these we can put any type JS code that we like. This code will execute directly in the web page.

Scroll down to the bottom and put your code directly before closing the body tag: </body>

Type your first line of code as follow:

Save the file and before you execute it, make sure the lite-server is running. So, go in VSCode do CRTL+` to bring back Command Prompt and enter the command: npm start

As soon as you save the changes in html file (index.html), the message is comming immediately “Hello world” in our local host server 3000:

 

 We wrote out first line of JS code and it is working fine. Hit “OK” button to close it.

<script>

    alert('Hello World');

</script>

So “alert” is a function and will more about it later on the course. ‘Hello world’ in single quotes is called a string. Now we know that by executing this commend, we will getting a pup up with the message in it. And by saving this again, it will show one more time pup up with message saying “Hello world”.

Let’s add another function “alert”

alert('Carved Rock Fitness');

Save it. And will get first message “Hello World”, close it (Click “OK”) and will get second message “Carved Rock Fitness”. Close it.

Adding Java Script code to a Web page

  • You can put the JS code between “script” tags in the html file. But this is not a best practice.

  • It’s better to put JS code in its own file. That we will have a nice separation. Our Markup HTML 5 code will be in html file and our JS code will be in .js file. It is a best practice to separate them.

 

  • Working with JavaScript files.

How to: include JS code within html files (it’s not very common), how to use the script and script tag, how to put a code between these tags. Most common is to use script tag with the source attribute the attribute in JavaSript file name: <script src=”./filename.js”></script>. That way we can reuse that file in multiple webpages.

<script> </script> - can be place in html file

or better

created as separate .js file and called as reference in html file

script tag with source attribute: <script src=”./filename.js”></script>

 

  • Formating Code.

Freely use whitespace. The best practice is to line up things at the left site margin.

 

  • Detecting Errors

Use the browser Console -press F12 to pull the Developer Tools. Or, do right click on the page in shown in the browser, scroll down to Inspect. Then you can click on Console link. That where will show up any error message from the browser, to see if code is free of errors, it helps to debug any code.

  • Case Sensitivity

JavaScript is case sensitive. Be careful when you are using lower case or upper case properly, it could be a source of a lot of bugs It refer is case of names is important or not.

 Just changing “s” to upper case in “ShowMessage”, save it and it will give an error:

 “ShowMessage” with capital “S” is not defined. Change to “s”, resume it and show the Consol. Save the file and run again. Everything is now fine. In JS is common if you are using the symbol for multiple words, usually first one is written with smaller case and the second one with capital letter: showMessage

Undo command: CRTL+Z

You can’t mix up lower case with upper case at all. Everything should be precise.

 

  • Commenting Code

Anything that could be tricky, complex or requires explanation should commented out by single line of comment:

// single line comment

Or

/* multiple line comment

….

…..

*/

Recap of Module 3:

 

Module 4 - Variables and Constants

 

  • What is variable?

Single piece of information holds in JS is stored in variables and in constants. Any application that we write is based on data. Data is stored in computer memory (typically it is long complicated number like e.g.: a956ffOb) which a reference of some value that we stored. It will be complicated if you used this value. So instead of use this variable name, we called the something else in plain English. We are using English words to represent this number in the computer. It’s up to us to come up with variable names (declaring variables).

 If we give a good name to memory location than we know well what a true means.

 

  •  Declaring variables

When we declare the variables, we use a special keyword “let”.

It is a type of symbol that JS knows about it and performs some type of action.

let – is a variable

total – is a variable name

= equal sign takes the value “149.99” and assigns it to “total”

So, the variable “total” has a value of 149.99

We always end the line of code by semicolon ;

We declare a new variable:

New variable name is “product” and we assigned to the value equal ‘Hiking Boots’ in single quotation marks. This is called a string. The computer or devices don’t know what that means and we leave this text simple as a text. We can put any type of text between quotes. Computers understand numbers, so we don’t use ‘ ‘ when we work with number.

Words like: true or false are Boolean values. They are used so often that JS knows about them, so we are not using the quotes when we assign them.

Third declared variable is called “discounted” and the value assigned to them is “true”

So we declared three variables:

Variable names?

We need to let JS know what variables we will are going to be working with. The terminology use for that is: Declaring variables. It is certain rules to create variable names.

  • Using “Let” to declare variables

Change the message if you like to see discount.

There is a short hand when you declaring multiple variables:

 Discounted is set to False.

You can erase let and replace semi-colon ; by coma , but we leave ; at the end of last variable.

 Changing showMessage to variable “name” and you are going to see “Hiking Boots:

Remember: you can freely use the space between the symbols and before and after variable names.

 

  • Common errors using variables

Declaring variables is easy but usually the common errors happen when you are picking the names of variables. Be careful. You can use pretty any name as long as not a keyword like a “let”

Example: naming variable only “a” is a bad example, computer will be confused. It’s better to name it “account” – much better or account_99 it would much better understood by device. Or “accountNumber” – it’s called “camel notation” or “camel case”

Generally $ applied in variables name is used for automatically generated code.

You can have variable name like: _123 – it is very undescriptive – not recommended

You can have variable name also like this: _proto_  These ones are usually reserved for nonstandard features. All these variables names are valid but the best are those ones that really describe data: account, accontNumber, etc. If there is a problem with variable name, JS usually will let you know.

 

  • Common errors naming variables

Remember, the variables shouldn’t start with numbers! In this case the variable is starting with the number “99times”. Pull out the console and it giving the error message. By “token” means a symbol. So, variable names can’t begin with number.

You fix this by renaming them. So change variable name “99times” to “times”, change in the showMessgae as well: save it and run it again.

 Number 99 will show in the browser and the error will go away.

-We can’t have space in variable name or showMessage. We will get a syntax error.

-Variables can’t use keywords for name like: let – error message will say: “Let is disallowed as a lexically bound name”. In other words, “Let” is used by JS as keyword.

  • Variable is undefined:

In case above declared variable “price” is set to nothing. We have set variable to something:

Let price = 99.99;

Let leave the Console open, it is a best practice.

  

  • Changing variables values

The value of the variables can change. The variables changing all over the time, for the speed of the car or score of the game. How we can accomplish this in JavaScript?

So even we have first price set to = 99.99

As soon we add into new one price = 49.99, we save the file and the browser will show new price.

You can change the code and add some comment, save it and it will show like this:

  • Constants (const)

We use it when we like to set the variable only once because is not changing. It means that something it is not supposed to change.

We have declare constant variable first, then we uncommented “price” and we will get an error:

 

Error message is saying: Uncaught Type Error: Assignment to constant variable at file home.js, line 6

When we declare the constant, we need to set to a value, if not we will get an error “Uncaught SyntaxError: Missing initializer in const declaration”

The “let” and “const” are relatively new words to JS. Previously was used keyword “var”

 

  • The Var Keyword

It is not best practice anymore to use in JavaScript since there better keywords to declare the variables and constants. But… if you still run it to legacy code or in stack overflow, so it’s important to know how the keyword Var works. The code is executes from the top to the bottom.

If we put showMessage before var price, we will not getting the price but also the Console it’s not showing the error:

 Even when we add code console.log, only we can get “undefined error:

So, don’t use any “var” keyword anymore and if you can replace it “let” and put in correct order.

Now the code is correct and it’s not showing the errors.

Recap:

Module 5 - Types and operators

Every variable or constant has type associate with it. It can be a number, a string, a Boolean value (true or false). All different JS types.

Operators are symbols that add functionality. All type of arithmetic’s: -, =, `, etc. Null and undefined.

 Operators and Numbers

Operators Precedence

Number Precision

Negative Numbers

String

Manipulative Strings

Converting Strings and Numbers

Boolean Variables

null and undefined

Objects and Symbols

 

Recap:

 

 

Module 6 - Program flow

 

Conditionals using If()

Truthy or Falsy

If… else

Comparing === and ==

The Ternary Operator

Block Scope Using let

Looping with for()

Looping with while()

Looping with do… while()

Recap:

 

Module 7 - Functions

 

Function Basics

Function Expressions

Passing Information to functions

Function Return Value

Function Scope

Using Function to Modify Web pages

Recap:

 

Module 8 - Objects and DOM

Object properties

Object Methods

Passing Objects to Functions

Standard Built-in Objects

The Document Object Model (…

Styling DOM Elements

Detecting Button Clicks

Showing and Hiding DOM Elements

Recap:

 

Module 9 - Arrays

Creating and Initializing Arrays

Accessing Array Items

Manipulating Arrays

slice() and splice()

Array searching and Looping

Arrays in the DOM

Recap:

 

Module 10 - Scope and Hoisting

Global Scope

Function Scope

var and Hoisting

Undeclared Variables and Strings

Recap:

Summary: