IN THIS LESSON WE WILL REVIEW THE STRUCTURE OF THE INTERNET AND HOW BROWSERS

ASSEMBLE WEBSITES BASED ON INSTRUCTIONS THEY RECEIVE FROM SERVERS.

WE WILL ALSO LEARN ABOUT OBJECT ORIENTED PROGRAMMING, A CONCEPT THAT ORGANIZES

DATA INTO “OBJECTS.” METHODS AND FUNCTIONS MAY CHANGE THE DATA IN OBJECTS. OBJECTS CONTAIN DATA IN THE FORM OF PROPERTIES ,

VALUES AND METHODS.

Internet structure and Object Oriented Programming

Lesson 1

In this lesson we will review the structure of the Internet and how browsers assemble Websites based on instructions they receive from servers.

We will also learn about Object Oriented Programming, a concept that organizes data into “objects.” Methods and functions may change the data in objects. Objects contain data in the form of properties, values and methods.

What is the Internet?

A global communication network that allows computers worldwide to connect and exchange information. There are three main types of computers on the Internet:

Client: Your computer.Server: A computer that holds information and

shares it with visitors (“clients”). Thousands of servers may be in large buildings, storing billions of photos, videos, pages of text and programs.

Router: A computer that connects clients with servers.

Simple diagram

How a Website comes to you

People use browsers to go places on the Internet. A browser is a special program, like Firefox or Chrome or Explorer, that shows Websites.

A domain name, like www.newamericanscode.com, is kind of like a street address and it tells your browser exactly where to go.

Your browser makes an http request to the server and asks to see the Website at the address you want.

What does the server give you?

The server sends your browser instructions for how to put the website together and gives your browser copies of photos, music and videos.

Have you ever followed a cooking recipe? Is the recipe really the food? No, the recipe is just instructions on how to make the food. It’s up to you to put everything together.

The server gives your browser the “recipe” and your browser has to do all the “cooking.”

Browser languages

The instructions are files that have names like index.html, styles.css, and script.js.

HTML defines the basic words on the page. CSS is used for styling, coloring, creating

boxes and placing elements on a page. JavaScript is used to animate the pages –

make things move, get bigger or smaller, etc.

JavaScript also accepts information from forms you fill out.

The very first Website - HTML only

Static pages

The first Websites, and many simple Websites today, are static. The information doesn’t change, unless someone goes in and changes the file and publishes it again. These pages pretty much use HTML, CSS, and maybe JavaScript to animate the page.

More sophisticated Websites are dynamic – part of the information in them changes, sometimes every second.

Server side vs. client side

HTML, CSS and JavaScript are client side languages. They run in your browser, reducing demands on the server.

PHP is a server side language. It accepts information from your browser and sends it to the server, like when you register for a new account, or post a Facebook update.

PHP also sends new information from the server to your browser.

More server languages

ASP and JSP are also server-side languages to create dynamic Web pages.

Many dynamic pages use server-side code to access database information. The information in the database - friends’ updates, your past purchases, the address in Google maps – creates what is on the page.

Sites that generate Web pages from database information are often called database-driven websites.

Creating web pages

The instructions for computers are written in a computer language or code.

In this class, we’re going to learn how to write the software instructions for a browser to put a website together – develop a website.

We will create websites first in your computer. Later, you will learn to publish the website to the Internet, where it will sit on a server and anyone with a browser can see it.

See some code

Open a browser and go to newamericanscode.com. Right-click and go to “View Page Source.” Do you see all the code? These are the instructions the browser uses to put the website together.

Press F12. These are the developer tools. Click on sources. You can see all the different files your browser uses to assembles the website.

Let’s spend some time changing things in the site.

Are you really changing the site? What are you really changing?

Object-Oriented programming

To talk to a computer, you have to think like a computer. Many people are afraid of this and believe it is mysterious, but it is not as hard as you think.

Computers are creations of the human mind, so a computer thinks like we do in some ways. We make computers to help us handle information, like how we make cars to move us around, or houses to live in, or farms to grow food. Computers are one kind of technology, because they extend human ability.

Objects in Websites

In Websites, typical objects are pictures, boxes, forms, videos and links.

The ability to give a computer instructions is powerful and fun for many people, but it takes a lot of study and effort to do it well. If you can do it well, you will be able to help people and they will pay you for your skill.

Objects

In the human world, we think of objects. Objects could be people places, cars, buildings, food, animals, clothing - basically, anything that exists is an object. Let's say "dog" is an object.

When you say, "There’s a dog," a computer thinks "OBJECT: dog."

Properties

People give objects properties. Properties (sometimes called "attributes") are things like height, weight, speed, color, type, emotions, location, name, date.

When you say, “There’s a dog with color,” a computer thinks "OBJECT: dog. PROPERTY: color."

Values

Properties have values. Values give meaning to properties; a property without a value isn't of much use. Values are things people can see, feel, use or respond to. Values are things like 5 kilograms, 35 miles per hour, blue, good, bad, beautiful, happy, sad, December 17, John.

When you say, "There’s a brown dog," a computer thinks, "OBJECT: dog. PROPERTY: color. VALUE: brown." 

Functions and methods

Objects can have actions– things that objects do, or have done to them.

When the object carries its action with it, it is called a method.

When the action is outside the object, it is called a function.

Functions and methods for dogs might be bark, eat, run, sleep, petting, feeding, training, transporting.

Change things with functions

When you say, "The brown dog barks," a computer thinks, "OBJECT: dog. PROPERTY: color. VALUE: brown. METHOD: bark." 

Functions and methods can also change properties and values. You can create or delete properties, or change their values. With functions and methods, you can change anything about the dog – give it wings, change its color, make it happy or sad.

Classes

We can put objects in classes. For example, all dogs have some things in common. So you can put all dogs in the class called “dog” and they all have the same properties: All dogs bark, run, have four legs, have weight, have height and have a tail. Every dog is an instance of the dog class.

If you want to make a new dog, you don’t have to write a bunch of properties and values. Just create a new instance of the dog class.

Question: If all dogs have the same properties, will they also have the same values?

Confusion

BUT: Sometimes, properties will seem like objects, methods will seem like objects, objects will seem like values. This can be veryconfusing, even for people who are good at coding. Do not worry so muchabout understanding this right now.

You’ve been doing this

You have been dealing with objects, properties, values and functions for a long time. 

Have you ever gone to a website and filled out a form? You’re creating the "You" object with properties like “firstName,” “lastName,” "address" and "birthday" and values like "1234 Main St" and "May 12, 1980."

When you "submit" the form, the "submit" JavaScript function and PHP hand the form to a database on a server.

Create some objects

You can give an object any properties you want and sometimes, properties can have many values. Like this:

OBJECT: soupPROPERTIES: taste, nutrition, ingredients, countryPossible TASTE VALUES: good, bad, salty, sweetPossible INGREDIENTS VALUES: water, meat, spices,

vegetablesPossible GEOGRAPHIC VALUES: Asian, African, South

American, European, Chinese, Mexican, American, German, Ethiopian

Possible NUTRITION VALUES: protein, vitamins, fiber

Exercises

Create a soup object with four properties and at least two values for each property. You can use commas between words, like the example.

THINK: Can a soup object have any methods – can the soup do anything? Not all objects have to have methods. Are there any functions that can do things to the soup?

Imagine a machine that sells soup. What functions might it have in its software?

Another exercise

Think of an object. It can be anything you want. Give it two properties and give each property a value. Give the property a method.

Do this again.