Introduction to Computer Science - In JavaScript (ICS)

Google Slides

• Auto Rename Tag
• Open in Browser
• VS Code Icons
• VS Code Pigments
• HTML Tag Wrap
• CSS Peek
• Prettier
• Indent Rainbow
• Live Server
• Path Intellisense

Signup

Complete 26 Leadership Videos

• Freshmen 10 Videos
• Sophomores 10 Videos
• Juniors 5 Videos

File Structure

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

Username and Password

Download, Install, and Configure

• Bookmark
• Settings

Finder Preferences

• View File Extensions
• View Connected Servers

Signup

Explore

Create

Install Chrome Extensions

• ColorPick Eydropper
• GoFullPage
• Screencastify
• Web Developer Toolbar

File Structure

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

Install and Review

Graphics

• Image
• Background Images

Notes 1- Real Wold Objects

Notes 2 - Objects Quiz Prep

Google Form Quiz

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.

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()

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()

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

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

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.

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 *

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!');
}

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.

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);
}

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

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

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

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