HTML – content | CSS – styling | JavaScript – behavior
Think like a developer
JAVASCRIPT – JavaScript can be connected to the objects to provide programmatic control over them. JavaScript is one of the most commonly used programming languages, it is built into every web browser
Babysitter Instructions –
When the parents leave, they expect one of three reactions;
If
- Sulk
- Temper tantrum
- She will be fine
Then
- Ignore her & she will get over it
- Play music to calm her down
- Play a game or do another activity
What is a script?
A series of instructions that a computer can follow to achieve a goal. Computers are a lot more predictable than people. Computers approach tasks in a different way than humans, so your instructions must let the computer solve the task programmatically. In general, computers complete tasks in a linear fashion. Always be thinking big picture. The best solutions are the simplest & most modular ones. The computer only knows what you tell it
A script might have many parts to it, but each time it runs it might only use a subset of all of the instructions. To approach writing a script, break down your goal into a series of tasks and then work out each step needed to complete the task. This is referred to as psuedo code.
Pseudo code – a technique that lets you write your program in simple, step by step instructions using plain English rather than programming language.
Example:
A user visits a website
They are asked which background pattern they would like; dotted, lined or blank
The user selects a box based on their preference
The background changes to the user’s selection
Journal exercise – Find something that inspires you that you can build with code. If your final project doesn’t stir your soul, it won’t be something you can maintain. Find portfolio sites that excite you? What about computer programming interests you? How is it different from other mediums?
Data types across languages –
- Numeric – Handles numbers, example 200.54, 893 – used for tasks that involve calculation or counting
- String – consists of letters & other characters ex “playerOne”, “How are you” – used when working with text, can use single or double quotes
- Boolean – handles true or false values, ex yes/no – used when there are two options for a value true/false, on/off. Think of a light switch
Collection Types
- Array – a single variable that can hold multiple values ex let fruits = [“apple”, “banana”, “orange”, “mango”
- Object – often modeled after real world objects, holds value pairs ex – hotel room, which various pieces of data including price, future books, archive of bookings
Additional vocabulary words –
Index – a number that tells us the position in an array. Like many languages, JavaScript is zero-based, meaning that the first item in an array is 0
Function – a block of reusable code that takes an input (x) and spits out a single output f(x). A function can be called anywhere on your website, typically by the click of a button. We can call them again and again, saving large quantities of time
What can JavaScript do?
JavaScript can change HTML content
JavaScript can change HTML attributes
JavaScript can change CSS style
JavaScript can hide HTML elements
JavaScript can show hidden HTML elements