Adding Javascript to a page - 2 (External Javascript Files)

In the previous examples, the code was embedded in the html file. You can write javascript in a separate file (that ends in .js) and include it like so:
   <!DOCTYPE html>
   <html>

   <head>
   </head>

   <body>


    <script src="myscript.js"> </script> // external file
   </body>

   </html>
In this case, you are including code from the file myscript.js.
You don't need the <script> tag in the external file myscript.js. The content of myscript.js can be just javascript code like this: 
  // content of myscript.js

   document.write("hello");
   alert("world");
Notes

Adding Javascript to a page - 3

   <!DOCTYPE html>
   <html>

   <head>
   </head>

   <body>


     <script src="http://code.jquery.com/jquery-3.2.1.min.js"></script> 
     <script src="./js/myscript.js"> </script> 
     <script>
     alert('hello world');
     </script>
   </body>

   </html>
Here you see three different ways of including javascript

1. including an external javascript file from another server (jquery...)
2. including an external javascript file from the folder "js" in the current folder
3. embedded javascript within the HTML file
Notes

Statements in Javascript


        document.write('hello world');
        alert('yikes');

Write a statement, enter a semicolon, press Return to create a new blank line, type another statement, followed by a semicolon...etc
Notes

Comments

  var price = 10; // this is a single line of comment
  
  /*
   This is a multiline comment.
   Author: Jane Smith
   The code makes your website look great.
   You use this by ...
  */
Notes

Variables

You may already be familiar with the idea of variable from Math

Area of the square?



x, and y (which should be familiar to you from Mathematics) are essentially variables

A variable is a container (basket) with a name. In the follwing example, x is a variable 



  var x = 25;








You can reuse the variable over and over. You can manipulate it. You can read what is in it and write into it. (eg. store the score of a game).

When you want to store something in a variable, we use the "=" sign. We call this assigning a value to the variable

  x = 8.99;
This is different from testing whether two things are equal to each other 
//It's okay if you don't understand this. We'll go over this in the future

if(a == b) {... do something ... }  // correct, tests whether a and b are equal

if(a = b) {... do something ... }   // incorrect, assigns value of b to a
Notes

Creating/using a variable

Before you use a variable, first you need to create it by declaring it and naming it. Using the var keyword. It creates (declares) the variable. The second part of the statement names the variable, netPrice. 
  var netPrice;     //declare and name a variable "netPrice"



Once it is declared, you can use it and assign values: 
  netPrice = 100;   // assign 100

  netPrice = 20;    // overwrite variable netPrice with 20

  alert(netPrice);  // alert will print 20


Alternatively you can combine the two statements (one to define, and one to assign) into one shorter code 
  var netPrice2 = 100;
  
  netPrice2 = 99;  // overwrite variable netPrice2 with 99
  alert(netPrice2); // alert will print 99


Variables can store many things. For example, text (character strings). For this though, you need to include the string in single or double quotes. (Without quotes, we don't know if it is a variable name or a character we want to store). 
  var producetName  = "Leather Wallet"; // since it is in quotes, we know it is a character
                                        // and not two variable names

  var producetName  = Leather Wallet;
Now that we have the character string stored, we can use them as the value that is contained 

  alert(productName);
Notes

Working with Operators: Variables and Arithmetic Operations

You can use standard arithmetic operators (addition, subtraction, multiplication, and division) with variables. 
  
  var theSum = 4 + 3;


Here theSum will be assigned the value 7. Once you have declared it, you can reuse it like this. This will overewrite the original value stored (7) and assign the new value (11). 
  
  theSum = 11;


You can use the variable names in operations (as though it represents the thing it stores, numbers in this case). 

  var productCount = 2;
  var subtotal = 14.80;
  var shipping = 4.75;
  var total = subtotal + shipping;  // equivalent to: var total = 14.80 + 4.75

  subtotal = total * 0.15;
  var productPrice = subtotal / productCount;


There are convenient operators to increment (++) and decrement (--) the value of a variable. 

  productCount++;

  // equivalent to
  productCount = productCount + 1;

  productCount--;
  // equivalent to
  productCount = productCount - 1;
In the textbook, there are other shortend uses of operators 

  total += 5;  
  // equivalent to
  total = total + 5;

  total -= 2;
  // equivalent to
  total = total - 2;


Operators have precedence (* / + - ). So just like in regular math, if you want to explicitly state the precendent, use parenthesis 
  var a = 1;
  var b = 2;
  var c = 3;

  var average = a + b + c / 3;
  // this will result in a + b + (c/3)

  average = (a + b + c) / 3;
Notes

Using the + Operator with Strings

"+" is special in that they can operate on numbers but also on "strings" (strings of characters).

In most cases, you can't do arithmetic operation on strings but there is an exception with the "+" operator. It "concatenate" strings (put one string and another string together). 
var firstname = "Amanda";
var lastname = "Reed"
var fullname = firstname + lastname;

// alert(fullname) --> this will display the text AmandaReed


fullname = firstname + " " + lastname;

// alert(fullname) --> this will display Amanda Reed


What if strings and numbers are combined? Javascript will covert the numeric value to a string and concatenate the two. 

  var name = "Amanda";
  var number = 3203;
  alert(name + number);
  // this will display Amanda3203



Summary of operators in javascript:
operator what it does expression result
+ addition 5 + 1 6
+ concatenation "Reed" + "  " + "College" "Reed College"
- subtraction 4 - 2 2
* multiplication 2 * 3 6
/ division 6 / 3 2
% modulus (remainder of division) 10 / 3 1
Notes

One more thing

Here is a method you can use to get user input into a variable using the function prompt(). 
var answer = prompt("question");
So to see it in full...


  var name;
  var color;
  var age;

  name = prompt("What is your name?");
  alert(name + " it is nice to meet you");

  color = prompt("What is your favorite color " + name + "?");
  
  
  age = prompt("Can I ask you for your age?");

  if(Number(age) < 10){
  //if(+age < 10){
	 alert(age + " years old? That is young!");
  }

  if(Number(age) >= 10){
    alert(age + " years old? That is old!");
  }
Notes