CPNT 262 Day 1 - Introduction to Javascript and primitive types
Housekeeping
- Introductions: Isha and Bruk
- Assignment Schedule
- Course Overview: Days 1 - 11
- One-on-ones: DM Tony to set a time if you haven't had one yet
- Tooltime: Install Node
Trophy of the day
- Treasure Hunt: Javascript Literals
- Submit your list of literals as a daily in Brightspace
1. Javascript: The big picture
- A quick history
- The Browser Triad
- HTML (content): the markup language that we use to structure and give meaning to our web content, for example defining paragraphs, headings, and data tables, or embedding images and videos in the page.
- CSS (presentation): a language of style rules that we use to apply styling to our HTML content, for example setting background colors and fonts, and laying out our content in multiple columns.
- Javascript (behaviour): a scripting language that enables you to create dynamically updating content, control multimedia, animate images, and pretty much everything else. (Okay, not everything, but it is amazing what you can achieve with a few lines of JavaScript code.)
Demo: Browser web console
2. Javascript Basics
Materials
Key Takeaways
- JavaScript is case-sensitive and uses the Unicode character set.
- When the browser encounters a block of JavaScript, it generally runs it in order, from top to bottom. There are exceptions with invoked functions.
- Hyphens are not allowed in JavaScript names because they can be mistaken as subtraction attempts.
- By convention, we:
- use camelCase for identifier names (variables and functions);
- always put spaces around operators ( = + - * / ), and after commas;
- end a simple statement with a semicolon (there is some debate around this).
- avoid lines longer than 80 characters (for readability).
3. Javascript data types
There are 9 data types in Javascript (depending on how you define them) but, for the most part, we only care about 7 of them:
- Primitive types:
- Strings - used to represent textual data.
- Numbers - a double-precision 64-bit binary value (numbers between -(2^53 − 1) and 2^53 − 1).
- Booleans - represents a logical entity and can have two values: true and false.
- Null - has exactly one value: null.
- Undefined - a variable that has not been assigned a value has the value undefined. Although you can, never manually assign a variable as undefined.
- Complex types
- Arrays - a list of values, including other arrays.
- Objects - a collection of name/value pairs (properties).
- Functions - a block of reusable code that accepts arguments (input data) and may or may not return a value.
Materials
- Gist: Common data types
Activity
- Treasure Hunt: Javascript Literals
- Open Lab
- Free Code Camp exercises
- SVG Assignment
- Treasure Hunt
- Watch: JavaScript Tutorial for Beginners by Mosh Hamedani
- This is an excellent overview of the starter JS concepts you'll need for the rest of this course.
- There is a handy Table of Contents in the video description.
Prep
MDN Readings
Free Code Camp Exercises
- Javascript basics: Exercises 1-8
- Start: Comment Your JavaScript Code
- Complete and Stop (or not): Understanding Case Sensitivity in Variables