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
Rationale for Using JavaScript
Why are we learning JavaScript? →
s
<div class="incremental" markdown="block">
* we need something to put into version control
* some understanding of basic JavaScript will be helpful in other classes, specifically with classes geared towards web development
* JavaScript is a widely used, high-level programming language that is available on nearly every platform
* some people (me) think it’s fun
</div>
Running JavaScript Programs
What application / tool do we use to run our programs? →
we’ll be using our web browser to run JavaScript programs!
specifically, we’ll be using Chrome and Chrome’s JavaScript Console
JavaScript Programs - File Format
What kind of file will we save our programs in (as in, what extension should we use, what’s the file type)? →
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
A Template for Our Programs
What do we have to put in our .html file before we can write our JavaScript →
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!
Creating JavaScript Programs
What tool do we use to write our JavaScript programs? →
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)
Running a Program in Chrome
How do we actually run our JavaScript programs in Chrome? Where does the output (and errors) from your program show up? →
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)
Trying One Line at a Time
How do we try out single lines of JavaScript without writing an entire html file? →
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
The JavaScript Console
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 on the page that you’re on
…and later, we’ll see that we can use it to debug our programs
JavaScript Basics…
Values, Types and Operators
The most basic elements of a JavaScript program are:
values
types
operators
What Exactly is a Program?
What’s a program? What’s a statement? What’s an expression? →
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
Expressions and Statements Continued
// Statement
1 + 5;
// Even these are statements:
1;
"hi";
All statements end in a semicolon (;) in JavaScript
Values
What’s a value, and what are some examples of values in JavaScript? →
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
Creating Values
How do we create a value in our program? →
to create values, just write them!
for example: 7 … or “hello there”
values that are written plainly like this are called literals
Data Types
A type is just a kind or category of value. Here are three data types in JavaScript:
numbers - numeric data (clearly!)
strings - an ordered sequence of characters (alphanumeric, punctuation, spaces, etc.)
boolean values - true / false
A values types sometimes determines what we can and can’t do with that value!
Operators
What’s an operator? →
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!
Numbers
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
JavaScript uses a fixed number of bits to store numbers: 64 bits
Numeric Operators
Name 5 binary arithmetic operators (they take two operands, one on either side) →
+ - addition
- - subtraction
* - multiplication
/ - division
% - modulo (remainder operator)
Numeric Operators and Precedence
What is the resulting value of this expression? →
6 + 20 % 8
order of operations: parentheses, exponents, multiplication, division, addition, subtraction (PEMDAS)
modulo is the same precedence as multiplication and division
answer is 10
Some Special Numbers…
Infinity, -Infintity - positive and negative infinities (don’t use these, they’re not that useful, and not mathematically solid!)
NaN (not-a-number) - this results from any numeric operation that doesn’t give back a meaniingful result… such as 0/0
Strings
What’s a string, and give an example of a string literal →
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!
Empty Strings
What’s an empty 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:
""
Escape Characters
How do we write a backslash, quote, tab or a new line in a 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 Operators
We learned about one operator that works on strings. What was it? →
string concatenation, or +, is an operator that takes two strings and joins them:
"hello " + "there"
Unary Operators
Unary Operators only have a single operand to the right:
+ - convert to positive number
- - convert to negative number
typeof - gives the type of a value (Number, String, etc.)
Let’s try some of these. →
+10
typeof "hi there"
typeof
Again, typeof is:
an operator that takes one operand
gives back the type of value the operand
What are the types that we know? What would we get with this code: →
typeof "five"
typeof 5
typeof "5"
we know three types: strings, numbers, and booleans)
string, number and string
Functions
What’s a function? What’s a function call? What are arguments? →
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
Calling Functions
How do you call or execute a function? →
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
Built-in Functions
JavaScript comes with several built in functions. We learned two of them. What are they and what do they do? →
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
What are variables and how do you use them in JavaScript? →
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);
Using Prompt With Variables
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!?");
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
*/
A Sample Program
What do you think this program does? →
<!DOCTYPE html><html><body><script>varanswer=prompt("Give me something to say twice:");console.log(answer+" "+answer);</script></body></html>