Temporary Log In:

Username: 231classPassword: Spr@2015Domain: studenthttp://faculty.cascadia.edu/mpanitz/bit116

Introduce yourself to the people around you

BIT116: Scripting

BIT116: ScriptingLecture 01

Instructor: Mike Panitz

MPanitz@cascadia.edu

Course Introduction and Orientation

3

Official BIT116 Web Site: http://faculty.cascadia.edu/MPanitz/BIT116

Class Times: Tuesdays & Thursdays, 1:15pm – 3:20pm

Assignments/Grades: StudentTracker

Instructor Email: mpanitz@cascadia.edu

Instructor Office & Office Hours: CC1-319

Mondays/Wednesdays: 1:05pm – 1:35pm, and Tuesdays/Thursdays: 12:15noon – 1:15pm, or by appointment 

4

BIT116 Syllabus:

Grading BIT116:

700 points Total Homework / Assignments (2) @ 100 pts each Exams (2) @ 150 pts each Class Activities @ 200 pts.

Syllabus, listed on the ‘Home’ page for the course

5

Course Topics

First Week or soFocus primarily on HTML, CSS, and finally some JavaScript

Rest Of The Course:JavaScript, jQuery, Event Handling, Objects, Functions, Debugging, Loops, Document Object Model (DOM), Windows Objects, Arrays, Tables & Forms, Animation

6

Recommended SoftwareKomodo Edit http://www.activestate.com/komodo-edit/downloads (Recommended)

This works on Windows, Mac, and Linux

If you used DreamWeaver in a prior class (such as BIT 112/ BIT 113), feel free to continue using that.

Adobe Dreamweaver http://www.adobe.com/downloads.html Adobe Creative Cloud for Students http://success.adobe-education.com/en/na/students.html

Note: The instructor is not familiar with either Dreamweaver, nor Creative Cloud, so if you use this you’re on your own

CAUTIONARY NOTE: Do NOT use a word processor like Microsoft Word or Apple Pages

7

BIT116: Why Take This Course ? For people who:

Are looking to add ‘web programming’ to a web certificate/degree People looking to go into programming more directly & who are looking to gain

an extra term of practice in computer programming

Pre-Requisites BIT 115 or equivalent (i.e., introductory programming)

Comfortable using Computers

Comfortable writing small programs

Enjoy figuring out how things work

8

Objective: To Learn Basics of JavaScript You'll learn by doing

Read the assigned book Do the ICEs Google it Practice! Practice! Practice! Make sure that whatever we cover in class, you can do from memory by the next

class Approximately 10 to 12 hours of work done outside of class, per week on average

(includes reading, googling it, practice, Assignments, etc.)

Work up to solving medium-sized problems

Understanding is the key! It won't help you to jump to the next level if you don't understand the current level, because you will get lost!

9

BIT116 Web Site Everything will go through BIT116 web site (just like my BIT115 classes)

Schedule Lectures ICES Assignments Submissions (via StudentTracker) Grades and Grade Tracking (via StudentTracker)

Familiarize yourself how the web site is set up You are responsible for knowing how to find and use what you need

If you can't find something, email me Mpanitz@Cascadia.edu BEFORE it becomes an issue, not after.

10

BIT116 Syllabus If something is unclear or the info isn't there, ask before it is an issue

Your are responsible for know the syllabus

Details will be malleable The Schedule may change depending on the ebb and flow of the class. If the class is moving slower or faster, we'll adjust the schedule

accordingly as we go

11

Book Info Required Book JavaScript: A Beginner's Guide, Fourth Edition

by John Pollock© 2013ISBN: 978-00718093754

Be Forewarned: We will be using the entire book! This does not mean you will have to read every page, but we will be using information/material from every chapter.

12

Class Meeting Times Class starts promptly

Class will kick-off with a short 5-minute "warm-up" quiz that will address a topic or feature covered in the previous class (these are similar to the warm-up quizzes handed out in my BIT115 Java classes)

The rest of the class alternates between short lectures & in-class exercises (ICE). If you don't finish your ICEs by the end of class, you will still get full credit for it, but it

is highly recommended that you finish these ICEs on your own, because they have been constructed to help your learn what you need to learn to do the major Assignments.

If you need help, ask! Better sooner than later!

13

Classroom Behavior Rules Quiet please while I'm lecturing

Whisper, if you talk at all If you have trouble hearing me, sit towards the front of the room Raise your hand and wait to be called on if you have a question or something to say

Work during ICE time Feel free to talk quietly amongst yourselves during ICE time, since a lot of learning this stuff

comes through sharing or putting your heads together. If your talk gets too boisterous, I will ask you to turn down the volume.

No Cheating! This means copying someone else's work and passing it off as your own If you cheat on Assignments and you're not caught, you'll do badly on the exams

(the Mid-Term and Final) and these are worth ~40% of your overall grade

14

What to Bring to Class You can lug the book to class if you'd like, but it isn't required.

You should still read it, however!

You should bring a USB thumb drive or external portable hard drive to class to store and transport your files between school and home

If you have your own laptop or notebook and are comfortable bringing it to class, then feel free to do so (there's wireless/Ethernet in this room)

If you have a laptop or notebook and run into problems installing the software, then bring it into class and we can look at it together (or you can visit me during office hours) and we can look at it together (regardless of whether you bring it in regularly)

The software we'll be using for this class (Komodo Edit or Notepad++) is not as "involved" as with the BIT115 class (JDK, jGrasp, becker.jar), so I don't foresee any real issues getting everything to work and play nice.

15

Exams You can assume that the Mid-Term and Final exams (like the "warm-up" quizzes) will be

100% paper-and-pencil.

You can make use of Auto-Complete to help you learn this stuff, but DON'T RELY on Auto-Complete.

You need to understand this material in order to use it well.

Start practicing now – try writing code from memory and/or in Komodo Edit or Notepad++

16

Save a Copy of All Your Work! This includes Quizzes, ICEs, Exams, Assignments, etc.

If you work with a partner, make sure each of you get a copy of the work For ICEs you don't have to turn it in (even if you don't finish it) as I'll be

checking your progress as I walk around and watch you work)

I may inadvertently record the wrong grade in StudentTracker, so if you see a discrepancy between the grade posted in StudentTracker and what you believe should be posted, then please don't hesitate to let me know. If you've saved copies of all your work, you can 'prove' yourself and I will change your grade accordingly.

17

Any Questions ?

18

Why JavaScript? Relatively fast to learn; lightweight code

Simple, useful ways to apply in everyday web pages: form validation, menus, numerical conversions

More complicated web-page applications: everything from graphing to webmail to animations to online games

Even more complex client/server apps (AJAX*, which we won't cover in this class)

JavaScript is even making inroads into the server-side (Node.js, which we won’t cover in this class)

*Asynchronous JavaScript and XML

19

What JavaScript Is Used ForJavaScript allows you to create interactive web pages. (That react to the user’s behavior)

JavaScript programs are used to detect and react to user-initiated events, such as a mouse going over a link or graphic.

They can improve a Web site with navigational aids, scrolling messages and rollovers, dialog boxes, dynamic images, and so forth.

JavaScript lets you control the appearance of the page as the document is being parsed.

Without any network transmission, it lets you validate what the user has entered into a form before submitting the form to the server.

20

Document Structure

Document Appearance

Interactivity

21

HTML: Expectations

You will NOT be good at HTML after only this course It’s ok if your pages don’t look good (this is expected / normal) You DO need to be able to write the HTML that we cover in this course

from memory We will cover the HTML that you need for JavaScript, before we use it

What if you already took BIT 112 / BIT 113 (the “HTML courses”)? Same expectations as everyone else, grades-wise BUT you should use the homework projects (etc.) as opportunities to

develop good-looking pages for your design portfolio

22

JavaScript and HTML Client-side JavaScript is embedded in HTML

HTML is the markup language that tells your web browser how a page should be structured “This is the most important heading:” “A bullet-point list starts here” “Here is a hyperlink to another document” Etc

You can’t learn JavaScript without knowing some HTML

So we’re going to start by learning a little HTML

23

Let’s learn HTML

24

Game Plan Install Komodo Edit

NOT Komodo IDE – similar to edit, but requires $$$ http://komodoide.com/download/#edit While Komodo Edit downloads & installs….

PowerPoint tour of some HTML Sit back & enjoy the show!

Guided walkthrough ‘View Source’ on existing web pages Direct instructions on what to do, step by step

Semi-independent exercises First review the above on your own Then some simple ‘exploration’ exercises on your own

25

How the Web Works

‘Device’ asks for a web page from the server

Server does <whatever>, and produces an HTML page HTML page may have links to style

sheets (CSS), JavaScript (JS), images, video, etc, etc.

Note: The browser can also load files from your local computer’s hard drive We’ll use this way to test stuff

26

<html><head><title>Rex Winkus's Portfolio</title></head><body><h1>Rex Winkus's Portfolio</h1><!-- Rest of page goes here. This is a comment. --></body></html>

27

<html> <head> <title>Rex Winkus's Portfolio</title> </head>

<body> <h1>Rex Winkus's Portfolio</h1> <!-- rest of page goes here. --> </body>

</html>

HEAD

BODY

28

<tag attribute="value">Hello</tag>

element <BODY attribute="value">

Deprecated attributes (but still used)

◦ BACKGROUND=“Sunset.jpg” (can be tiled)

◦ BGCOLOR=color◦ TEXT=color◦ LINK=color (unvisited links)◦ VLINK=color (visited links)◦ ALINK=color (when selected)

29

Tags Description Example

<h1></h1><h2></h2><h3></h3><h4></h4><h5></h5><h6></h6>

heading tags Creates bold content of varying sizes, with the <h1> being the largest, and <h6> being the smallest, followed by a line of white space

<body><h1>This is the first heading line.</h1><h2>This is the second heading line.</h2><h3>This is the third heading line.</h3><h4>This is the fourth heading line.</h4><h5>This is the fifth heading line.</h5><h6>This is the sixth heading line.</h6></body>

This is the first heading line.

This is the second heading line.

This is the third heading line.

This is the fourth heading line.

This is the fifth heading line.

This is the sixth heading line.

W3Schools: <h1> to <h6> tags

30

Common Tags

Tags Description Example

<p></p> paragraph Creates a paragraph between the opening/closing tags followed by a line of white space

<body><p>This is the first paragraph line.</p><p>This is the second paragraph line.</p><p>This is the third paragraph line.</p><p>This is the fourth paragraph line.</p></body>

This is the first paragraph line.

This is the second paragraph line.

This is the third paragraph line.

This is the fourth paragraph line.

W3Schools: <p> tag

31

Do ICE #0, #1 Here

32

Tags Description Example

<ol></ol><li></li>

ordered listlist item

Creates a numbered list, followed by a line of white space. You can also declare its start, order, and the type of list using 1 (default), A, a, I (upper case Roman numeral), I (lower case roman numeral)

<body><ol> <li>Apple</li> <li>Banana</li> <li>Cantaloupe</li></ol></body>

1. Apple2. Banana3. Cantaloupe

W3Schools: <ol> tag

33

Tags Description Example

<ul></ul><li></li>

unordered listlist item

Creates a bulleted list, followed by a line of white space. You can also declare its type using CSS and the list-style-type property

<body><ul> <li>Apple</li> <li>Banana</li> <li>Cantaloupe</li></ul>

<ul> <li>Apple</li> <ul> <li> Red Delicious</li> <li> Granny Smith</li> </ul> <li>Banana</li> <li>Cantaloupe</li></ul></body>

• Apple• Banana• Cantaloupe

• Appleo Red Deliciouso Granny Smith

• Banana• Cantaloupe

W3Schools: <ul> tag

34

Do ICE #2 Here

35

Block vs. Inline Elements The previous elements (h1, h2, etc, p, ol, ul) are all “block” elements

Each one starts on a new line, and whatever follows is on the next line

Let’s look at some “inline” elements They’ll structure something inside a block, without causing new lines.

Src: http://www.w3schools.com/htmL/html_blocks.asp

36

Tags Description Example

<strong></strong>

<b></b>

Strong says that this is particularly important

B means “bold”

In practice both tend to produce boldface

<body><p>Lasers can be very dangerous!<strong>Do not look directly at the laser’s beam emitter!</strong> If you do look directly at the beam, then in the future please do not look at the laser with your <b>remaining</b> eye.</p></body>

Lasers can be very dangerous! Do not look directly at the laser beam emitter! If you do look directly at the beam, then in the future please do not look at the laser with your remaining eye.

Note that the strong & b elements are inline – they change how the text looks without forcing a new line.

W3Schools: <ul> tag

37

Tags Description Example

<a></a>

“anchor” – this is a hyperlink to another document Could also be a link to another place in the same document

<body><p>You can search the web with <a href="http://www.google.com">Google</a> or <a href="http://www.bing.com">Bing</a>.You can also go to <a href="anotherFile.html">another file in this same directory</a></p></body>

You can search the web with Google or Bing. You can also go to another file in this same directory

Links that start with “http://” are ‘absolute’ – they specify a single location on the webAnything else is a ‘relative’ link. In the above example, when you click on that last link the web browser will ask the server for the file “anotherFile.html” in the same folder (directory) as the above file.

If the above file is at http://www.example.com/some/folder/aboveFile.html, then that third link would go to http://www.example.com/some/folder/anotherFile.html.

If the above file is at http://myserver.com/aboveFile.html, then that third link would go to http://myserver.com/anotherFile.html.

W3Schools: <ul> tag

38

I have not yet talked about color, tables, forms (including checkboxes, radio buttons, or select elements), or linking files in and out of sub-folders.

I will be bringing these up—as well as a few other HTML features—as the quarter progresses.

Note:

39

Do ICE #3 Here

40

--This is where Lecture 01 ended -- The quiz for next class will cover up to this slide AND exercises 0, 1, 2 and 3.

Please make sure that you’re comfortable with the <br> tag (covered in exercise #3)

41

Do ICE #4, 5, etc Here

42

Lecture 01 - ICEs

43

How ICEs Work

1. Invoke the BIT116 web site at http://faculty.cascadia.edu/mpanitz/bit 116/ 2. Select Lectures from the navigational menu bar3. Select the current Lecture number from the accordion bar (e.g., Lecture 1).

NOTE: I may have the current Lecture pre-selected for you on the web page, but if I don't then just select the current lecture from the sliding bars. You can also navigate forward and backwards between Lectures using these sliding bars.

4. The PowerPoint slides used for the current Lecture are available5. Any Instructor Notes used for the current Lecture are available (these are there solely for

my benefit and you don't have to use them or even look at them if you don't want to)6. Any Example Files will be posted that you can use to see how things might be done7. A link to the current In-Class Exercises is posted (highlighted with a green arrow)8. Any ICE files that will be used in working through the current ICE will be posted9. Open the link to the In-Class Exercises and follow the instructions10. As you work down through the exercises your Instructor will be roaming around the room

to answer any questions and to check off your completed work. 11. When you complete all the ICEs you are free to leave (some students finish sooner than

others).

44

Please begin working on the LECTURE 1 In-Class Exercises. We will walk-through the first couple of ICE’s together today so you can see how they work.

When you have completed your ICE, call the Instructor over to verify your work. If you have questions about your work, please call over the Instructor to clarify.

If you don't finish your ICEs by the end of class, you will still get full credit for actively doing the work, but it is greatly recommended you finish any unfinished ICEs outside of class.

Lecture 1