JavaScript Basics

• JavaScript is a widely used, high-level programming language that is available on many platforms
• it was originally created in 1995 as a way to add interactivity (through programming) to web pages in Netscape Navigator!
• JavaScript and Java are two entirely different programming languages

• we’ll be using our web browser to run JavaScript programs!
• specifically, we’ll be using Chrome and Chrome’s JavaScript Console

• because we’re targeting Chrome and Chrome’s JavaScript Console to run our programs, we’ll be writing our JavaScript in web pages
• that means editing plain text files
• specifically,files that that end in .html (web pages)
  • it’s actually not good practice to have JavaScript code interspersed with your html, but for our purposes of getting started it’s ok

We’ll have to create a bare bones web page:

<!DOCTYPE html>
<html>
<body>
<script>
// your JavaScript goes here!
</script>
</body>
</html>

Your code goes within the script tags!

• we use a text editor called SublimeText
• if we save the file as some_file_name.html (note the .html extension) before writing…
• we can use TAB to automplete:
  • start typing html… and hit TAB
  • you’ll still need to fill in the script tags
• (again, your code goes between the script tags)

• In Chrome… go to File → Open File … → browse to the html file you created in SublimeText
• you’ll see output and errors pop up in Chrome’s JavaScript Console
• (you can get to this by going to View → Developer → JavaScript Console)
• if you make changes to your original file, just refresh the page (Command + r)

• once again, we can use Chrome’s JavaScript console; it lets you try out lines of JavaScript one line at a time interactively
• you can use this to experiment with code
• it has access to everything else in the page (we’ll see this later)
• it will give you instant feedback with each line you type

• shows the output of your program
• displays errors from your program
• allows you to interactively execute single lines of code on the page that you’re on
• …and later, we’ll see that we can use it to debug our programs

• program - a sequence of statements that specify to a computer actions to perform
• statement - corresponds to a sentence… it’s a full instruction for the computer… all statements end in a semicolon in JavaScript (;)
• expression - a fragment of code that produces a value; it’s not a statement by itself

• values are just data
• some examples of values are numbers, like 3.14 and -273 and strings, like “hello” and “hi”
• there are also special values like:
  • Infinity (and negative Infinity!)
  • NaN - not-a-number
  • null/undefined - absence of a value

• to create values, just write them!
• for example: 7 … or “hello there”
• values that are written plainly like this are called literals

• operators allow us to combine and transform values
• operators have operands,
  • operands are the values that supply to operators
  • binary operators have two operands
  • unary operators have one operand
• operators give back values…
  • using operators with values yields other values!

• + - addition
• - - subtraction
• * - multiplication
• / - division
• % - modulo (remainder operator)

• order of operations: parentheses, exponents, multiplication, division, addition, subtraction (PEMDAS)
• modulo is the same precedence as multiplication and division
• answer is 10

A string is an ordered sequence of characters. You can tell that a value is a string if it is surrounded by single or double quotes:

"I am a string"
"I'm a string"

• a string can be composed of any characters: numbers, letters, punctuation, spaces, etc. … and it can even be empty
• string with nothing in it is an empty string:

""

• use the escape character, backslash (\)
• if there is a backslash in a string (\), it means:
  • the next character has a special meaning
  • the initial backslash will not be printed out
• for example, backslash, quote, tab and newline:

"\\"
"\""
"\t"
"\n"

string concatenation, or +, is an operator that takes two strings and joins them:

"hello " + "there"

• we know three types: strings, numbers, and booleans)
• string, number and string

• a function is a named sequence of statements that perform some useful action
• it can optionally take inputs and return values
• to call a function is just to run or execute it
• the values passed to a function are called arguments

• to call a function, use its name followed by parentheses… with an optional list of comma separated arguments between the parentheses
• an example of a function call is:

prompt("hello") is a function call

• prompt(“some message”) - asks the user for input and returns that value to your program! … takes a single argument, the message to display to a user (this usually requires the use of variables)
• console.log(“some message”) - prints the argument that you pass to it… out to Chrome’s JavaScript console

• variables are names bound to values:
• you can use a variable’s name wherever you want to use that value.
• to create a variable, use the special word, var, followed by =, then the value, and finally a semicolon

var x = 23;

// using that variable
console.log(x + 7);