JavaScript Fundamentals of Computing

JavaScript assignment basis

Part 1:

First, go here:

 

https://docs.google.com/presentation/d/1pJR7Or_SV8HQTLQgOMdy6wKbY7ovM6a6AQ8aoq-tkIU/edit?usp=sharing

Then, you’ll come back here and continue with the lesson.

Part 2:

Note: If you have any questions about w

or

king in the browser console, please let me know right away.

1. Variables

We use things like variables all of the time, something that represents a value.
For example, you may tell a friend, “I have x number of people coming to my birthday party”, and x may be many or may be none.

In fact, variables are nice because you do not need to know how many it is, and so X can be 10 (X=10), and X can be more than 10 (X > 10), or X could be within a range (X > 10 && X < 20). It's nicer to know how many X you have so you can buy enough party hats, but, we do what we can.    Here is an example where we set a variable X to a value. We print it out and then do a little math with it. Document.write is the command that prints out a variable in JavaScript as literal text to the browser screen or console log (if you're using the console method).            var x = 10;          document.write (x);          document.write (x*2);   

2. Strings

 
Sometimes we want to create “strings” of information and attach them together to print to the screen. This happens often in programming. For example, you may now know what the value of X is, and you can plug this into the sentence “I have ” + X + ” people coming to my party”. See how there are plus (+) signs in that sentence? Instead of literally writing out “X”, you are writing out the value that X represents, using the + to glue the string together (this is called concatenation).
 
An example of concatenation:
     var thisText = “Hello”;
     var thisNumber = 100;
     var moreText = “people”;   
     document.write (thisText + ” to the ” + thisNumber + ” ” + moreText + ” I know in this world.”);
 

3. More Variables

A variable, declared in JavaScript with the “var” keyword, can be a number, a string of text, a date, or other types of information. For our purposes, right now, we will use two data types for our variables: a string and a number. We’re going to use the alert method to express the variable to the user.
 
Can you make this script work in the JavaScript console in Firefox’s scratchpad or console?
 
var myName = “Paul”;
alert(myName);
 
From: 

http://www.w3schools.com/js/js_variables.asp

Note: variables in JavaScript (and really any language) have scope, which essentially means, where do they exist in the script. For example if you write a function (which is a snippet of code that you can use again and again) and declare a variable in it, it will not exist or have the same value outside of the function. This will mean more as we work on more complicated programs, but it is something to keep in the back your head.

4. Arrays:

There comes a time when our variables grow up. Suddenly, var X has a family. The X family has multiple values assigned to it. X[0] = “first value”, X[1] = “second value” and so on. These are arrays and are very useful when storing and working with information.
 
Try this in the console:
 
var mycars = new Array();
mycars[0] = “Ford”;
mycars[1] = “Jeep”;
mycars[2] = “Hyundai”;
alert (mycars[1]);

Which one wrote out? What if you change the [1] to a different number?
 
You can write out any one of the values in my cars by indicating the variable name and then the index of the value in the variable. Arrays always start with index value zero. 

 Note, this array can be written in a different ways, for example, this does the same:

var mycars = [“Ford”, “Jeep”, “Hyundai”];
alert (mycars[1]);

Interested in more? See 

https://www.w3schools.com/js/js_arrays.asp

 

5: String concatenation

Try out this script:

var firstname = “Paul”;
var lastname = “Acquaro”;
var numslices = “2”;

alert (“Did you know that ” + firstname + ” ” + lastname + ” ate ” + numslices + ” slices of pizza?”);

What do you think is happening here? It’s concatenation, we are adding together literal pieces of information (like “did you know that”) with variables like firstname. The glue is the plus ( + ) sign. Here it is again with the literal strings highlighted yellow and the variables highlighted green: 

alert (“Did you know that ” + firstname + ” ” + lastname + ” ate ” + numslices + ” slices of pizza?”);

You can do this with arrays as well …

var mycars = [“Ford”, “Jeep”, “Hyundai”];
alert (“I once owned a ” + mycars[1] + ” and sold it for a ” + mycars[2]);

You can do a lot more with and to strings variables … you can get information about the strings, like how long they are, or you can get parts of the string. The “String” is not just a a bunch of text, but also an object in javascript, which means you can manipulate it. We’ll dip into this next week.

1: Arrays

We’ve already have discussed arrays during Lesson 2, but let’s review a bit as they are an important tool in programming and are a good introduction to the concept of objects.

An array is a convenient way to store multiple values under one variable, it makes it easier to programmatically use.

Here is a example array, in it we create an array called progLang and then add items to it:

    

var progLang = new Array();

    

progLang[0] = “JavaScript”;  

//note, you always start an array at index 0.

    

progLang[1] = “PHP”;

    

progLang[2] = “Objective C”;

 

If we want to see and use any of the values, we can call them out by their index …

alert(progLang[2]);

or 

console.log(progLang[2]);

Some other methods to declare an array are:

var progLang = new Array(“JavaScript”,”PHP”,”Objective C”);

or

var progLang = [“JavaScript”,”PHP”,”Objective C”];

We can use different properties and methods with an array (because it’s an object … which we will discuss in a later class). For example, we can easily get the number of items in an array or sort the items in the array. To do so we use the dot notation (array.property).

Property

Here is an example of the property length, which tells you how many values are associated with the array. This can be useful when you are programming. See it in action by trying this in the console:

var progLang = [“JavaScript”,”PHP”,”Objective C”];

console.log(progLang.length);    

//note, if you are using the Firefox scratchpad, make sure you have the console log open as well.

Method

Here is an example of a method, pretty much all things in Javascript have methods that allow you to access and use their data.

Here is the sort() method in action – it’s subtle, but look carefully at how the output changes between the alert boxes.

 

     var progLang = new Array();
     progLang[0] = “JavaScript”;  //note, you always start an array at index 0.
     progLang[1] = “PHP”;
     progLang[2] = “Objective C”;

    //alert out the array as is:
    alert (“Pre-sorted:\n” + progLang);
    //sort it using the sort method
    progLang.sort();

   //alert out the sorted array
   alert (“Sorted:\n” + progLang);

Here is one that you may find useful as well … toString(), which turns an array into a regular strong. 

    var progLang = new Array();
    progLang[0] = “JavaScript”;  //note, you always start an array at index 0.
    progLang[1] = “PHP”;
    progLang[2] = “Objective C”;

    var StringVersion = progLang.toString();

    alert(StringVersion);

 

There are many more methods for you to check out as well, be sure to read this page: 

https://www.w3schools.com/js/js_array_methods.asp

, and some of the other ones that get into the specific methods.
 

2: ‘Multi-dimensional’ Arrays

Arrays are pretty versatile tools, and in fact, you can store multiple values within a single array item. By which I mean, you can store a single value with multiple values and sub values! 

Javascript doesn’t actually call this a multi-dimensional array, rather a jagged array, but that’s a detail for another day. 

Check out this multi-dimensional array for the programming language example. Note that I am adding a hardness level to the language as my multi-dimensional value.

 var progLang= [

     [‘JavaScript’, ‘Easy!’],

     [‘PHP’, ‘Medium’],

     [‘Objective C’, ‘Hard’]

    ];

    alert (progLang[0][1]);

What happens when you try it in the console? What value do you get? Why do you think it showed “Easy” and not the word Javascript?

Read this article for more about the Multi-dimensional array: 

JavaScript Multidimensional Array

 

3: Loops

For the following example, I am still using the array of programming languages.

Let’s say that even though we know we have the array of values, we want to look through them one by one and not have to type out each one individually…

Enter the loop.

The loop is a way to repeat code depending on a condition. The condition in the above problem is that we want to print out all of the items in an array, one by one. For this, we use a loop.

There are a couple of different loop types we can use, but for our purposes, we’ll start with the for loop. Let’s check out the for loop and then apply it to the problem above.

for loop

The for loop is set up like this

for (initial value; condition ; increment) {   output/code   

}

Here is a look that prints out the numbers 1 to 10:

for (i=1;i<=10;i++){

 alert(i);

}

This loop simple is taking the variable i, which is initiated with the value 1, and while the i is less than 10, it will write out the value. i is incremented by one each time.

Now, back to the programming language problem.  To iterate through our array, we’ll use a little bit of everything from above.

//set up our initial array:

var progLang = new Array();
progLang[0] = “JavaScript”;  
progLang[1] = “PHP”;
progLang[2] = “Objective C”;

//set the initial value to see the for loop.

var index=0;

//go through the loop, printing to the console the value of the array each time.

for (index; index < progLang.length; ++index) {

alert(“Language ” + [index] + ” = ” + progLang[index]);

}
 

So, now, instead of typing

alert(progLang[0]);

alert(progLang[1]);

etc…  we are looping through as many programming languages that we have in the array.

Try adding another language to your array and see how the loop works.

forEach

Here is another method for getting each element of the array, it’s called the .forEach and it uses a pre-defined function called “entry” to grab the value from the array.

Again using the progLang array:

var progLang = [“JavaScript”,”PHP”,”Objective C”];

progLang.forEach(function(entry) {

   alert(entry);

});

This example uses some built in functionality to JavaScript.

The first thing we are doing is taking the array (progLang) and applying the “forEach” function to it.

“(function(entry))” is something called a callback. Let’s just, for now, say that each item in the array is an “entry” (something we just named, you could use a different name if you wanted)

There are several types of loops, each with a slightly different function. For/In, Do/While, make sure you read up on these here:

https://www.w3schools.com/js/js_loop_for.asp

http://www.w3schools.com/js/js_loop_while.asp

Essay:

http://xroads.virginia.edu/~hyper/WALDEN/Essays/civil.html

Instruction:

Read “Civil Disobedience” by Henry David Thoreau. Summarize the essay. This summary should be at least a paragraph (250 words). Then write a response. Consider:

Is it ever justifiable to break the law in order to make a statement?

What are some laws you would break in order to create lasting, moral change in our society?

How might you engage with social issues without breaking the law?

If Thoreau is right, and voting is only a distant form of action, what are some more direct forms of action?

Are there any social justice organizations that you would be willing to get involved with?

These are only possible questions (which I will, of course, be asking when we discuss the reading) but they may help you with your response. Your response should be at least two paragraph long (550 words, but go over if you like) and should do more than simply agree with Thoreau in a vague manner. Go deeper: think about your own life, the causes you care about, the issues that concern you, the community in which you live, anything along those lines. What is important to you? What would you be willing to break the law for? What is a worthy cause?

Any reflection that answers questions along these lines will be considered a success. Be specific and really think about what matters to you and what you would be willing to do about it. Maybe you are against Thoreau and don’t think civil disobedience or protesting will make a difference. Maybe, but you can assume Thoreau would reply: not doing anything will definitely not make a difference either.