our primary mode of writing JavaScript for this lab will be in a text editor
the JavaScript that we create will run in a web page, so they’ll have to live in an html file
within the script tags of that file, you can write your JavaScript
here’s a sample file again… (note that all of the tags are boilerplate for now)
<!DOCTYPE html><html><body><script>// your JavaScript goes here!</script></body></html>
Running Your Programs
We’ll run our programs in our web browser!
because we’re running JavaScript within a web page, we’ll need a browser to run our programs
we’re using Chrome… so just go to File → Open File … → browse to the html file you create
you’ll see output and errors pop up in the JavaScript console
(you can get to this by going to View → Developer → JavaScript Console)
if you make changes to your original file, save it and refresh the page (Command + r)
Let’s see how that works. →
Trying One Line at a Time
The JavaScript console also 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
Let’s check out the interactive part of the JavaScript console. →
The JavaScript Console
As you can see, Chrome’s JavaScript console is multi-purpose. What are the ways that we can use it? →
shows the output of your program
displays errors from your program
allows you to interactively execute single lines of code
…and later, we’ll see how we can use it to debug our programs
Ok. On to JavaScript…
values
types
operations
variables
calling functions
input/output
*comments
Values, Types and Operators
The most basic elements of a JavaScript program are:
values
types
operators
Values
Values are just data. Some examples of data we’ll see in JavaScript are:
numbers - numeric data (surprise!)
strings - an ordered sequence of characters (alphanumeric, punctuation, spaces, etc.)
boolean values - true / false
special values:
Infinity (and -Infinity!) ...(but don’t use these, they’re not that useful or mathematically solid!)
NaN - not-a-number - results from a numeric operation that doesn’t give back a meaningful result… such as 0/0
null/undefined - absence of a value
Values in Programs
Some examples of values in programs include...
42
“hello there”
to create values, just write them!
Numbers
unsurprisingly, numbers are just numbers
you can represent
positive and negative whole numbers: 23, 42, -10
decimals (with a period): 2.3, 4.2
no need for commas (e.g. 10000)
Operators
Using operators with values yield values!
We’re familiar with some numeric operators… what are they? →
Numeric Operators
Some binary arithmetic operators (they take two operands, one on either side)
+ - addition
- - subtraction
* - multiplication
/ - division
% - modulo (remainder operator)
(e.g. 10 % 3 = 1)
Let’s try some of these out. →
Numeric Operators, Precedence
What order would I evaluate this in? What is the resulting value? →
4 + 1 * 5
remember PEMDAS? (modulo is the same precedence as multiplication)
multiplication first
then addition
result is 9
parentheses can add clarity (they always take precedence!). if you're unsure just use parentheses: 4 + (1 * 5)
Strings
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"
Quoted text is a string!
Strings Continued
A string can be composed of any characters: numbers, letters, punctuation, spaces, etc.
The following is a string with nothing in it… or an empty string:
""
Escape Characters
If there is a backslash in a string (\), that means:
the next character has a special meaning
the initial backslash will not be printed out
For example, \n is a newline
"\n"
For example, \t is a tab
"\t"
I Heard You Like Backslashes
How would we put a double quote in a double quoted string? →
"\""
And what about an actual backslash? →
"\\"
String Operators
string concatenation, or +, is an operator that takes two strings and joins them:
"hello " + "there"
Expressions and Statements
A program is a sequence of statements that specify to a computer actions to perform.
A statement corresponds to a sentence… it’s a full instruction for the computer.
All statements end in a semicolon in JavaScript.
An expression is just a fragment of code that produces a value; it’s not a statement by itself.
Expressions and Statements Continued
// Expression (no semicolon)
1 + 5
// Statement
1 + 5;
// Even these are statements:
1;
"hi";
All statements end in a semicolon in JavaScript
Functions
What’s a function? →
a function is a named sequence of statements that perform some useful action.
it can take inputs, and it can return values, but it doesn’t have to do either
to call (or execute) a function, just call it by name, with parentheses after (with an optional list of commas separated inputs within the parentheses)
the values passed to a function are called arguments
for example: prompt(“What is your name?”) is a function call
To call a function, use its name followed by parentheses.
Some Built-in Functions
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
Let’s try these out. →
Variables
Variables are names that represent particular 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);
What will the above output? →
Variables Cont.
Variables can be assigned to different kinds of values! For example:
Strings (such as “ice cream”)
And remember, strings will always be in quotes!
Numbers (var paycheck = 1000000;) - don’t use quotes for numbers so JavaScript knows it’s a number not a string (and can thus be used for computation). paycheck + 1
Rules for Naming Variables
variable names can’t begin with numbers
they're case sensitive - MyName and myname are two different variables.
can’t contain spaces (e.g. my name - must be myName or myname, etc)
can only contain letters, numbers, and two non-alphanumeric characters: $ and _
can't BEGIN with a number (e.g. 1stCatOfMine is not allowed, my1stCat is)
There’s a list of words you can’t use (find it in Eloquent Javascript or Google it). Some examples include: function, var, boolean ...
Prompt Revisited
Remember that the function prompt gives back a value. To retain that value, you have to hold it in a variable:
var answer = prompt("Yes or no!?");
You Can Put All of These Together!
Let’s write a small program that echoes back whatever is written in a prompt. →
var answer = prompt("Say something!");
console.log(answer);
Of course, you have to embed that in script tags in HTML for it to run (or just use the interactive console). →
Comments
Comments allow the programmer to write notes that the JavaScript interpreter will skip over / ignore
these are meant for humans to read, not the computer.
you can comment by starting a line with //
or by stopping and starting a series of lines with /* */
// a comment
/*
a long
comment
*/
Some things to remember!
JavaScript is case sensitive: myVar !== myvar
Statements always end in a semicolon! ;
To call a function, use its name followed by parentheses: prompt("some message")
Function that prints to Chrome's Console: console.log("some message")
Strings must be in quotes: "I'm a string!"
to create a variable use: var, followed by =, then the value, end with a semicolon e.g. var x = 2;