Lesson 1 Recap

In lesson 1 we learned several important things about coding, and the types of things that can be done with code. Below is a list of important concepts and information that you should try to remember, along with some things that we learned in HTML and JavaScript.

What is Coding?

Code is used to mean several different things. However, most people consider code to mean source code. Source code is the specific strict dialect of English that we use to tell the computer what to do. It is important that this be strict because computers are not smart, and cannot interpret what we "really mean". It's also important for a person to be able to read the code and know what the computer is going to do exactly.

Sometimes code can mean machine code or binary code. This typically is stored in the direct language the computer knows how to use, and generally we use a compiler to create this from source code. In this class, we will be using a code interpreter, which does not compile the source, but instead uses a program to read the source code and do what the compiled code might do.

HTML

HTML stands for HyperText Markup Language. This language instructs your web browser how to display the text it is reading. This document that you are reading is actually written in HTML!

HTML uses tags to denote elements. Generally, an element consists of a tag surrounded by angle brackets (like <tag>), followed by the internal parts of the element, and then a closing tag, which is similar to the opening tag but has a slash in it (e.g. </tag>). For example, a paragraph is denoted using the <p> tag as follows:

<p>
    This is some text that is contained within the paragraph
</p>

Internally, this is stored by the computer as a "p" object, with the text stored inside that object. It's good to have an idea of how this is stored, but it's not critical to fully understand it right now.

We can assign a unique id to an element by using an attribute. Attributes are inside the opening tag, and there can be as many attributes as you need.

JavaScript

JavaScript is the language which all browsers use to make web pages change. Almost everything that moves or changes on a web page uses JavaScript to make it happen.

JavaScript is either stored in a separate file, or in a <script> element in your HTML page. In the case of online editors, they usually give you a space to put your JavaScript

JavaScript works by manipulating the "tree" of HTML elements on the page.

Coding Definitions

These definitions are used in coding no matter what the language

A variable is a location inside the computer that can store a piece of information. In JavaScript, we use variables to store all sorts of things, such as numbers, text, or objects. In Javascript, we declare a variable using the term "var".
A string is the coding name for text. Any text is generally considered a string, kind of short for a "string of characters". In Javascript, typically strings are denoted using single quotes around the string data. E.g. 'hello'
An object is a thing inside the computer that represents something. Objects can be little things or big things, and can contain other objects, strings, or numbers.
A property of an object is a variable in an object with a specific name. We use properties to describe an object. For example, we might say the property eyeColor on a person object could be defined as "blue".

Functions

A function is a list of commands or code that performs a certain task given a set of parameters. We use functions to help us avoid writing the same code over and over again, and also to give easy-to-remember names to certain pieces of functionality. In the real-world example I showed, I asked Sam to do 2 jumping jacks (which he did!). In that example, Sam was my object, the function "jumpingJacks" was the name of the function, and the parameter "2" was what I asked him to do.

If you were to write this in JavaScript it might have looked like this:

Sam.jumpingJacks(2)

In Javascript, to access a specific function on an object (also known as a method), you use a period between the name of the object and the method name to call that function.

Miscelaneous other stuff

Some more things that are useful:

We assign values to variables using a single equal sign. e.g.:

var x = "hello"

The function getElementById is used to find elements by their unique id.

The browser represents the entire document in Javascript using the object named document.

Comments can be put into the code. Comments are ignored by the computer, but are useful to help explain what the code is doing to the person who reads it. Comments can also be used to temporarily remove parts of the code.

Comments are designated in Javascript by typing two slashes together. All text after those slashes for the rest of the line are ignored:

var x = 5 // everything before these slashes is code, everything after is just for a person to read

The attribute onClick is used to call a function when a button is clicked.

The Complete example

Below is a complete example that you can copy and paste into a file, and then run on your browser, which shows what we accomplished in the class

<!DOCTYPE html>
<html>

<head>
    <title>Lesson 1 for coding!</title>
    <script>
        function showString() {
            var str = document.getElementById("thestring").value
            document.getElementById("code").innerHTML = str
        }
    </script>
</head>

<body>
    <div id="code"></div>
    <p>
        <input id="thestring">
        <button type="button" onclick="showString()">Click Me</button>
    </p>
</body>

</html>

Playgrounds

Here are several playgrounds that you can use to try out HTML and JavaScript

You can also open a local file (if you have a normal computer), name it anything with a .html extension, and then open it in your browser and it will work!