Introduction to JavaScript

We're using the JavaScript programming language to learn the basics of computer programming. This is a great language with which to learn. All you need to use it is a modern Internet browser, like Safari, Chrome, or Edge. You can use simple and free programs called "text editors" to write the JavaScript source code._

What is JavaScript?

• JavaScript is an interpreted programming language.
• There is a full computer program inside your browser that reads your JavaScript code and runs your code.
• This program is called an "interpreter" and is embedded in browsers. You can't really tell that it is separate from the browser itself.
• You tell the interpreter what to do with a list of instructions.
• For JavaScript to work correctly it has to be referenced in HTML files correctly. We are going to start by placing our JavaScript code in something called a JavaScript function:

function demoWritingJavaScript() {
    // YOUR CODE STARTS AFTER THIS LINE:


    // END OF YOUR CODE
}

• Line 1: This line declares a function. The last character on this line will always be a left curly brace ({). We have written all these parts for the first few learning units.
• Line 2 through 5: This is where you will write your code.
• Line 6: Functions always end with a right curly brace (}).

Demo

Demo

1. Demo: A Peek at JavaScript Coding
   • unit01/demos/demo-javaScript-code.html

---

JavaScript Syntax Rules

In computer programming, there are different levels of rules. Here are the three we are concerned with in this course.

1. Syntax
   • If a computer programming language enforces a rule then we call that rule "syntax". This is the strongest level of rule. You can't break these rules or your program just won't run.
2. Convention
   • If virtually all the users of a programming language all over the world do something the exact same way then that way is called a "convention". The JavaScript language itself doesn't care about these rules. However, if everybody is using the same convention there is good reason for it. If you want to join the ranks of professionals using JavaScript then you need to follow these conventions.
   • In this course, JavaScript won't enforce these rules but your instructor will. Part of the points for projects are on conformance to the course coding standards. Go here to see those: JavaScript Coding Standards for 152-119
3. Style
   • There are some ways of structuring our code where there isn't any agreement as to the best way to do it. A large group of programmers will do it one way and another large group will do it another way. When a rule is in this category we call it a "style". Styles are not enforced by JavaScript or the instructor. What is required is that you pick a style for your code and then be consistent. Make sure that you use that style in all your code. We will go over some common styles in class.

Remember those rules about computers? They can't think and they can't figure out what you mean. You have to be very clear and you have to use their language, not yours. Programming languages are very simplistic compared to human languages, but they are very strict. You have to follow the rules of the language that are called its syntax. Here are some of the basic syntax rules of JavaScript.

---

JavaScript is Case Sensitive

In JavaScript, the word "IF" is not the same as "if". Everything has to be the correct case. This is a challenge for lots of beginning programmers. We have to start "seeing" the case of text as part of the meaning. Almost everything you learn in programming is case sensitive.

---

White Space

White space in JavaScript are characters you can type on the keyboard but you don't normally see on the screen or on paper when you print. Here are the white space characters:

• Space
• Tab
• Return

In JavaScript, white space usually doesn't matter. Unfortunately, there's that word "usually" in that rule. There are some situations where it matters a lot. Therefore we're are going to have a course standard for using white space. Refer to the course JavaScript Coding Standards for 152-119 for more details.

---

Comments

Comments in our code are lines of text that are ignored by JavaScript. We use these to write notes to ourselves and other programmers who see our code. This is called Documentation.

There are two kinds of comments in JavaScript, single-line and multiline.

• A single-line comment starts with two forward slashes: //

function demoComments() {
    // Here is a single-line comment.
    // JavaScript will ignore text that starts with
    // the double slashes until the end of the current line.
}

• A multi-line comment starts with /* and ends with */. These can be over many lines.

function demoMultilineComment() {
/*
    This is a multiline comment.
    It has several lines.
    JavaScript will ignore all these lines.
*/
}

---

Semicolons

Semicolons are used in JavaScript to end a statement. Most of the time they are not strictly required by JavaScript. However, they are required in a few places so as a course standard (and also as a convention in the industry), the use of semicolons at the end of statements is required.

function demoSemicolons() {
    // Semicolons
    let firstName;
    let runningTotal = 10;

    firstName = "Fred";
    runningTotal = runningTotal + 100;

    document.write(firstName);
    document.write(runningTotal);

    // Note that the "=" operator is an assignment operator
}

---

Statements

JavaScript statements are lines of text that contain tokens, operators, and identifiers that are understandable to the JavaScript interpreter. They are like the sentences of a programming language. When someone writes prose they write sentences that are organized into paragraphs. When we write JavaScript we write statements that are organized into blocks and functions.

• Statements usually end with a semicolon ";"
• Simple statements are one line that just does one thing:

function demoSimpleStatements() {
    // Simple JavaScript Statements
    let errorCount;
    errorCount = 4;
    document.write("the count is: " + errorCount);
}

---

Reserved Words

There are a bunch of words that have special meaning to JavaScript. They are called Reserved Words. Because of this we can't use those words in our code as variable names. One good way to avoid reserved words when creating variable names is to always use at least two words (in camel case format) for variable names.

Reserved Words
break	delete	function	return	typeof
case	do	if	switch	let
catch	else	in	this	void
continue	finally	instanceof	throw	while
default	for	new	try	with

Read more

Related Reading

Pages 5 - 14 — Chaper 1

Hands on work

Labs

1. Lab02: Typing some JavaScript
   • unit01/labs/lab-02-javascriptIntro.html
2. Lab03: A Nice Little Application
   • unit01/labs/lab-03-introApplication.html

Exercises

1. Exercise03: Exercise for Lab 03
   • unit01/exercises/exercises/exercises-3.html