Summary of Stage 5 Lessons

My Intro to Programming Nanodegree Welcome Web Site

Intro: Choose Your Next Steps

1. JavaScript

JavaScript is a programming language of the web. W3Schools Website

Why Study JavaScript?

JavaScript is one of the 3 languages all web developers must learn:

  1. HTML to define the content of web pages
  2. CSS to specify the layout of web pages
  3. JavaScript to program the behavior of web pages

JavaScript lets you turn static web pages into dynamic applications.

Adding JavaScript to a Page:

There are two ways:
1. Put the JavaScript directly into your html file. JavaScript can be placed in the and the sections of an HTML page.
Add the JavaScript inside of <script;> tags. This example shows how.
2. Put the JavaScript in a separate .js file. JavaScripts can also be placed in external files.External scripts are practical when the same code is used in many different web pages. And when you separate it from your HTML, your codes will be cleaner, more organized and easier to edit.JavaScript files have the file extension .js.To use an external script, put the name of the script file in the src (source) attribute of the <script;> tag. This example shows how.

2. Arrays

JS arrays are just lists of values, and the behave just like lists in Python. The first element is indexed to 0. The length of an array is the number of items in it.
Syntax: var myArray = [item_1, item_n]

3. JS Objects

There are no classes in JS. JS Objects behave a lot like Python dictionaries.

Objects can be initialized using the literal notation (initializer notation). An object initializer is a list of zero or more pairs of property names and associated values of an object, enclosed in curly braces ({}).An object initializer is an expression that describes the initialization of an Object. Objects consist of properties, which are used to describe an object. Values of object properties can either contain primitive data types or other objects.

The advantage of the literal notation is, that you are able to quickly create objects with properties inside the curly braces. You simply notate a list of key: value pairs delimited by comma. The following code creates an object with three properties and the keys are "name", "age" and "skills". The values of these keys are a string "James", a number 32 and the third property has an array as its value.
var skills = ["awesome", "programming", "teaching","JS"]
var bio = { "name" : "James", "age" : 32 "skills" : skills };

4. Accessing objects properties-Dot and Bracket Notation

Once you have created an object, you might want to read or change them. Object properties can be accessed by using the dot notation or the bracket notation.

Dot notation allows us to define an object, then define its properties outside the curly braces: Syntax: var myObj = {}; myObj.property = someValue;

With dot notation, there is no need to use var. We're adding properties to an object, not creating new variables.

There is another way to define the properties of an object:Bracket notation. Syntax: myObj["property"]=someValue

5.A Note about JSON

JavaScript Object Notation. JSON is a popular and simple format for storing and transferring nested or hierarchal data. It's so popular that most other programming languages have libraries capable of parsing and writing JSON (like Python's JSON library). Internet GET and POST requests frequently pass data in JSON format. JSON allows for objects (or data of other types) to be easily encapsulated within other objects.

6. Validating JSON

JSON uses a mix of nested curly braces, brackets and commas, so its easy to make errors, creating bugs. If you're writing JSON by hand, you should run your code through a JSON linter to find syntax errors.

Open up jsonlint.com which will tell us if the JSON code is in the right format. Go ahead and copy the object above, just between the curly braces.Paste it in, click validate, and the results say Valid JSON.

7.Object literal notation vs JSON

The object literal notation is not the same as the JavaScript Object Notation (JSON). Although they look similar, there are differences between them: Website Link

  • JSON permits only property definition using "property": value syntax. The property name must be double-quoted, and the definition cannot be a shorthand.
  • In JSON the values can only be strings, numbers, arrays, true, false, null, or another (JSON) object.
  • A function value can not be assigned to a value in JSON.
  • Objects like Date will be a string after JSON.parse().
  • JSON.parse() will reject computed property names and an error will be thrown.

8. The Power of APIs

API stands for Application Programming Interface. APIs enable our websites to communicate not just with browsers but with other computers as well. When interacting with browsers we use HTML but if we want to send or receive data from servers we use formats like XML or JSON, which are similar to HTML but designed to be read by computers instead.

An API expresses a software component in terms of its operations, inputs, outputs, and underlying types. A good API makes it easier to develop a program by providing all the building blocks. A programmer then puts the blocks together.In addition to accessing databases or computer hardware, an API can facilitate integration of new features into existing applications.APIs often come in the form of a library that includes specifications for routines, data structures, object classes, and variables. Website Link

For example, to build our Resume web page we can use Hostip to request IP coordinates first; then use Google Map API to draw a map to show where we worked and lived.

9. How to Make APIS work

Sometimes one website may not contain the information that user requests. Then this website can send HTTP request to a number other servers out there and fetch the information the user needs by getting response containing XML or JSON and then sending it back to the user.

First we have to import urllib and urllib2 libraries. Then we open a url connection to the server of our choice using the urllib2 function urlopen() and we give the address as a parameter (e.g. urllib2.urlopen("http://www.somewebsite.com")). Once connected to server of our choice we send request with the information we need. The third party server returns a XML or JSON document to our request. In order to use the information we have to parse this document and get the data we need.

Parsing XML

Python has a library called minidom. We can get it by saying from xml.dom import minidom. After we import the library we can parse the XML we already have by calling the function minidom.parseString("our XML file as parameter"). Once we parse the XML document then we can access different elements within. By using the minidom function getElementsByTagName("and we pass in the tag element we want to access")

Parsing JSON

JSON serves the same purpose as XML, which is that its a nice computer and human readable way to exchange data. JSON is actually valid JavaScript code.The content of a JSON document is very similar to a dictionary with key, value pairs inside. To parse a JSON we have to import json library. Then we run the function json.loads(name_of_our_json_document). When we run this, Python returns a dictionary.

10. XML

Extensible Markup Language (XML) is a markup language that defines a set of rules for encoding documents in a format which is both human-readable and machine-readable. Website Link

XML was invented in the late 90s to have a regular way of expressing data between computer systems.

HTML and XML

  • HTML can be expressed in XML
  • XML and HTML share a common lineage(SGML).
  • XML requires every tag must have a closing tag.
  • Parsing XML

11. Be a good citizen on the internet

  • Use a good user-agent:
  • By providing user-agent we identify ourselves on the web. In case we access somebody's servers consistently and making a lot of request, thus hurting their services, if there is a user agent they can get in touch with you to limit your requests instead of blocking you.

  • Rate-limit yourself:
  • When doing requests to other servers we might use some sort of a cycle, like while loop for example. If the rate of our requests is high and for prolonged periods of time we might overload the servers we request information from. To avoid this it's a good habit to include a time.sleep() function in our cycles.

12. Recursion and Parallel Computing

Recursive Definitions - the most fascinating and powerful idea in all of computing

A recursive definition has two parts:

  1. The base case. A starting point. The important thing about the base case is that it's not defined in terms of itself. It's the smallest input that we already know the answer to.
  2. The recursive case. It is defined in terms of itself. Actually, it's defined in terms of a smaller version of itself. We need to make progress to eventually get to the base case.

MapReduce

MapReduce is a programming model and an associated implementation for processing and generating large data sets with a parallel, distributed algorithm on a cluster. If you have a large file, processing it could take a long time. Instead, MapReduce is designed to process data in parallel. So, your file is broken into chunks, and then processed in parallel. Wikipedia Link

13. Further Exploration

I deceided to learn more on JavaScript. I took Udacity free class - JavaScript Basics Udacity Course Link. It's a great class and very helpful for completing Resume Project. It covers the browser JavaScript console, using append and prepend, basic math, variables, data types, replace, string manipulation, truthy and falsy, arrays, array manipulation, objects, object literal notation, dot and bracket notation, JSON, linting JSON, element properties, if statements, evaluators, for and while loops, for-in loops, functions, click metrics, return statements, and encapsulating functions. The course provides a lots information. Udacity coaches show me how to built a resume using JasaScript.

I had problems to append detail information to 4 sections on the resume. Then I went back and re-watched the vedio and figured that out. After that I have issues with google map. It didn't show up on my web page. I re-watched the video, but it didn't help. So I post my codes on the discussion room to get help. Finally it works. This is my resume web link.

I also went through the basic concepts of JavaScript on Mozilla Developer Network's website- JavaScript basics.

This webpage is just for a basic tutorial on JavaScript. Because I don't have any developer experience and no need to code in my daily work, I'd like to refresh these basic information and make it clearer in my mind. And if you want to explore more, there are a lot of JavaScript documentation and tutorials available on the website. You can get them here.

I also took JavaScript course from w3schools w3schools. This is a very nice JS tutorial. It covers most of common JavaScript concepts. And there are many examples and quiz tests. The examples and quiz tests are my favarite part, because they help me understand what I just learned. The examples make those lessons easier to learn. By clicking Try it Yourself button, you will see what those codes really mean, what the web page looks like.

RETURN TO TOP