Introduction to Computer Science - In JavaScript (ICS)

Standards

Standards-Information and Communications Technology Sector

Standards-Arts, Media, and Entertainment Sector

Power Standards

Grading Guide

Schoolwide Learner Outcomes


ICS - Web Pages

Unit 1 - Introduction

Activity001 - Getting to Know You Google Doc
Teacher Introduction Google Slides
Teacher Guidelines/Rules

Google Slides

Class Syllabus PDF Doc

Unit 2 - Class Setup

Visual Studio Code Download and Install
Visual Studio Code Extensions
  • Auto Rename Tag
  • Open in Browser
  • VS Code Icons
  • VS Code Pigments
  • HTML Tag Wrap
  • CSS Peek
  • Prettier
  • Indent Rainbow
  • Live Server
  • Path Intellisense
Imago Account

Signup

Complete 26 Leadership Videos

  • Freshmen 10 Videos
  • Sophomores 10 Videos
  • Juniors 5 Videos
MacBook Student Folder (Local)

File Structure

  • Activities
  • Audio
  • Demo
  • Images
  • PracticeAssignments
  • Q1
  • Q2
  • Q3
  • Q4
  • Video
FTP Accounts

Username and Password

FTP Software - Cyberduck

Download, Install, and Configure

  • Bookmark
  • Settings
MacBook Setup

Finder Preferences

  • View File Extensions
  • View Connected Servers
Codepen Account

Signup

Explore

Create

Google Chrome

Install Chrome Extensions

  • ColorPick Eydropper
  • GoFullPage
  • Screencastify
  • Web Developer Toolbar
Cyberduck FTP Folder (Remote)

File Structure

  • Activities
  • Audio
  • Demo
  • Images
  • PracticeAssignments
  • Q1
  • Q2
  • Q3
  • Q4
  • Video
Adobe Creative Cloud

Install and Review

Adobe Photoshop Install and Test
Organize Desktop Create Archive Folder
Server Permission Forms Distribute and Collect
Practice Portfolio (index.html) Local and Online Via FTP
Portfolio (indexprototype.html) - Part 1 HTML and CSS
Portfolio (indexprototype.html) - Part 2 Media Queries
Portfolio (indexprototype.html) - Part 3 Grid (Gride Areas)
Portfolio (indexprototype.html) - Part 4 Quote - Random of 5 (JavaScript)
Portfolio (indexprototype.html) - Part 5

Graphics

  • Image
  • Background Images
Portfolio (indexprototype.html) - Part 6 Introduction Paragraph

Unit 3 - Review

On Your Own 1 - HTML/CSS Responsive Web Page Design Part 1
On Your Own 2 - Media Queries Responsive Web Page Design Part 2
Color Theory  
Photoshop  

Unit 4 - Web Services

Domain Names  
DNS Servers  
Web Hosting

 

APIs  

Unit 5 - Intro JavaScript

Objects

Notes 1- Real Wold Objects

Notes 2 - Objects Quiz Prep

Google Form Quiz

 

A001JS

JavaScript - <script> tag and comments

Learning Objective:

The script tag allows you to code JavaScript

Comments allow you to document your code (make notes)

 

JavaScript - Variables

Learning Objective:

You can create variables in JavaScript using three keywords

var for global variables (avoid)

let for variables that might change

const for variables that will not change

Both var and let can be declare without values

The const keyword variables must be given a value when created

 

JavaScript - Variable Types

Learning Objective:

There are different types of variables in JavaScript including:

  • strings - a series of alpha/numeric characters such as "abcd", "John", and "49rs."
  • numbers - decimal and non-decimal numbers such as 1, 45, 3.14, and .001.
  • booleans - only two possible values, true or false.

There are other types, but for this course, we will focus on the above types.

A002JS

JavaScript - methods window.alert()

Window Object

Learning Objective:

The alert() method of the window object

Methods are actions associated with an object and are usually verbs

Example: alert(), close(), and prompt()

A003JS

JavaScript - methods window.document.write()

Document Object

Learning Objective:

The write() method

Methods are actions associated with an object and are usually verbs

Example:

write(), writeln(), querySelector(), querySelectorAll()

A004JS

JavaScript - properties window.innerWidth

Window Object

Learning Objective:

window.location

window.innerWidth

window.innerHeight

Properties are descriptors of an object

Some or view only and some are changeable

.location, innerWidth, innerHeight are properties of the window object

A005JS

JavaScript - properties window.document.URL

Document Object

Learning Objective:

Properties are descriptors of an object

Some or view only and some are changeable

window.document.URL

window.document.title

window.document.lastModified

A006JS

JavaScript - properties

Style Object

Learning Objective:

Properties are desriptors of an object

Some are view only and some are changeable

window.document.body.backgroundColor

window.document.body.color

Objects have properties that can be changed. You can change style property values to change the presenation of your webpage.

A007JS

JavaScript - events

Learning Objective:

Events are interactions with objects on the webpage. For example, you can click, double-click, and mouseover objects like buttons.

<button onclick="window.alert('hello world!')> Press Me </button>

Examples:

onclick, ondblclick, onmouseover, onmouseout, onload, onfocus, onunload, etc.

* Use of inline events is no longer recommended *

A008JS

JavaScript - events and functions

Learning Objective:

Events are interactions with objects

Functions are organized untis (chunks) of code that can be called when needed

Functions can be called by events

Example:

Event

<button onclick='sayHello()'> Press Me </button>

Function

function sayHello()
{
window.alert('Hello!');
}

A009JS

JavaScript - events, functions, arguments, and parameters

Learning Objective:

Arguments are values sent to functions

Parameters are values received by functions

Example:

Argument -

<button onclick="greetUser('Hello humans!)"> Press Me </button>

Parameter -

function greeUser(g)
{
window.alert(g);
}

In the example above, the button sends the argument "Hello humans!" and the function receives the parameter g. The parameter g is set to "Hello humans!" and the alert displays the parameter.

 

A010JS

JavaScript - functions, multiple parameters, and external js file

Learning Objective:

Multiple Parameters

Functions can be called with multiple arguments and parameters.

Example:

<button onclick="greetUser('Hi!', 'Hello!', 'Howdy!')"> Press Me </button>

function greetUser(m1, m2, m3)
{
window.alert(m1);
window.alert(m2);
window.alert(m3);
}

 

Unit 6 - Layouts - Grid

   
   
   
   

Unit 7 - Layouts - Flexbox

   
   
   
   

Unit 8 - CSS3

 

The Development of CSS Features

CSS3 added many new features. When features are introduced, they may require special browser prefixes to make them work. Here are some prefix examples for various browsers:

  • Firefox: -moz-
  • Internet Explorer: -ms-
  • iOS: -webkit-
  • Opera: -o-
  • Safari: -webkit-

Learn about CSS prefixes and use them if appropriate. With time, you will no longer need to use prefixes as CSS features are widely adopted.

CSS Prefixes Article

Tools:

ShouldIPrefix

A029G6

Border-radius - Rounded Corners

Objective:

Create a web page using Border-Radius

Explore: Border-Radius

Guide:
.header
{
border-radius: 35px;
}

Video - Border Radius

Resources:

Demo File

Border-Radius Generator

A029G7

Box-shadow - Shadows on your Elements

Objective:

Create a web page using Box-Shadow

Explore: Box-Shadow

Guide:
.carimages
{
box-shadow: x-offset y-offset blur spread color;
}

.carimages
{
box-shadow: inset x-offset y-offset blur spread color;
}

Demo File

Video - Box-Shadow

A029G8

Transform - Rotate, Scale, Skew, Translate

Objective:

Create a web page using transformations such as rotate, scale, translate, and skew

There are several transformations to explore including:

rotate(7deg)
rotate(-45deg)
rotate(720deg)

scale(2)
scaleX(2)
scaleY(3)
scale(2,3)

skew(20deg)
skewX(20deg)
skewY(10deg)
skew(20deg, 10deg)

translate(50px)
translateX(50px)
translateY(120px)
translate(50px, 120px)

#logo
{
background-color:lightblue;
transform:scale(2,2);
}

Info on transformations

Transform

Demo File

Video - Transform

A029J3A2

 

Transitions

Objective:

Create a web page using transitions on hover pseudo elements

You can animate changes in CSS property values using transitions as follows:

#red
{
transform:rotate(20deg);
background-image:url(Images/pooh.png);
background-repeat:no-repeat;
height:200px;
width:145px;
transition: all 2s;
}

#red:hover
{
transform:rotate(7deg);
}

** To earn credit, your transition properties must be different than the examples provided. Make your assignment different (unique). **

Example

Read More

Demo File

Video - Transitions

Transition-Timing-Function

Unit 9 - Typography

   
   
   
   

Unit 10 - Animations

   
   
   
   

Unit 11 - Positioning

   
   
   
   

Unit 12 - CodeHS - JavaScript

   
   
   
   

Unit 13 - Career

   
   
   
   

Unit 14 - Projects