1. Summer 2015: BIT116: Scripting
Instructor: Craig Duckett Room: CC1-231
Introduce yourself to the folks around you 

2. Summer Quarter 2015 BIT116: Scripting Lecture 01
Instructor: Craig Duckett
Tuesday, July 7th, 2015
Course Introduction and Orientation

3. About Today’s Lecture
Today’s lecture will be one of the longest lectures (approximately 100 minutes) and this can’t be helped as we have a lot to cover in order to get the Scripting class kicked off and onto a good start. I will try to speed it up to give you more time to work on your first ICE, but no promises.
In the first half of the quarter, classes will be divided into two 45-minute lectures and two 45-minute in-class exercise sessions. In the second half, lectures will run approximately 80 minutes, and the remaining class time will be dedicated to working on ICEs or upcoming assignments.
Today we’re going to be covering a lot of introductory material, and I apologize in advance!
Course Orientation and Rules
The BIT116 Website and How It Works
Assignments, ICEs, Exams, and Grading
StudentTracker
A Brief History of the Internet and World Wide Web
What JavaScript Is and Is Not, and What It is Used For
Introduction to HTML
ICE 01

4. Official BIT116 Web Site:
faculty.cascadia.edu/cduckett/bit116
Class Times:
Tuesdays and Thursdays 11:30am-2:30pm (CC1-231)
Typically first half or so is lecture, second half or so is in-class exercises
Assignments/Grades:
StudentTracker
Instructor
Instructor Office & Office Hours:
CC1-203 (in small alcove just to right of elevator)
Mondays & Wednesdays 10:25am-11:25am
Or by Appointment

5. BIT116 Syllabus: Course Syllabus Grading BIT116: 1000 Points Total
ICEs: 12 x 20 points = 240 points (ICEs 2-7, 9-14) ICEs: 01 x 10 points = 10 points (Last ICE 15 worth only 10 points)
3 Assignments: 3 x 150 points = 450 points
Mid-Term & Finals Exams: 2 x 150 points = 300 points
Happy Note: There will also be up to 100 points of Extra Credit available at end of quarter
Course Syllabus

6. Weekly Schedule Format
First Week
Focus primarily on HTML, then CSS
Weeks 2 through 8
JavaScript, jQuery, Event Handling, Objects, Functions, Debugging, Loops, Document Object Model (DOM), Windows Objects, Arrays, Tables & Forms, Animation

7. Recommended Software/Hardware
Text Editors PC
Notepad (comes with Windows)
Komodo Edit (Recommended) 
Notepad++
UltraEdit
TextPad
Mac
TextEdit (comes with OS X)
Coda
BBEdit and TextWrangler
Adobe Dreamweaver
Adobe Creative Cloud for Students
CAUTIONARY NOTE: Do NOT use a word processor like Microsoft Word or Apple Pages

8. 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
How many have had any HTML/CSS experience (or taken BIT112?)

9. But Why JavaScript? Relatively fast to learn; lightweight code
Simple, useful ways to apply in everyday web pages: form validation, menus, numerical conversions
More complicated 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)
Learn enough of JavaScript basics to start working with jQuery (or another of the JavaScript Libraries like MooTools, Prototype, Dojo, or YUI)
*Asynchronous JavaScript and XML

10. Objective: To Learn Basics of JavaScript
You'll learn by doing
Read the assigned book
Do and COMPLETE 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 4-6 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!
THE BEST WAY TO LEARN JAVASCRIPT IS TO ACTUALLY WORK WITH IT! Unlike some other classes you can’t learn simply by osmosis. You need to work the code!

11. 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
It shouldn't be difficult to find stuff (I've laid everything out in a clear and intuitive manner
If you can't find something, me

12. 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
Syllabus

13. Book Info Required Book
JavaScript: A Beginner’s Guide (4th Ed, 2013) by John Pollock
16 Chapters, 528 pages ISBN:
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.

14. Class Meeting Times Class starts promptly at 11:30am
Earlier classes may 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)
There will be approximately 80 minutes of lecture, a 10 minute break, followed by in- class exercise (ICE) time.
If you finish all your ICEs before the time is up, you are free to go for the day.
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 successfully complete the 3 Assignments.
If you need help, ask! Better sooner than later!

15. 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 30% of your overall grade

16. 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 please 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 yours) 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.

17. Three (3) Main Assignments
There will be three(3) main Assignments spread out throughout the quarter. Together these will make up 45% of your grade. BE AWARE: The assignment schedule starts slow and then speeds up! Zoom! Zoom!
Assignment 1 (Individual) JavaScript, including if/else and switch statements. If you are comfortable with these you might start working on this sooner
DUE LECTURE 7 Tuesday, July 8 – REVISION LECTURE 10 Thursday, August 6
Assignment 2 (Individual)
DUE LECTURE 11 Tuesday, August 11 – REVISION LECTURE 13 Tuesday, August 18
Assignment 3 (Individual or with a Partner)
DUE LECTURE 14 Thursday, August 20 – REVISION LECTURE 16 Thursday, August 27
Extra Credit (Individual)
DUE LECTURE 16 Thursday, August 27 (NO REVISION)

18. StudentTracker StudentTracker Walk-Through
The StudentTracker "button" can be found at the top of the home page of the BIT116 web page
The are also links to Instructors there that explain how to use it
I'm also going to do a "walk through" of how to use it now 

19. Exams
You can assume that the Mid-Term and Final exams (and any "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++
Happy Note: If you want, you can use one large index card with notes during the exams

20. 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.
This is MOST IMPORTANT when it comes to one of the four major Assignments (which are each uploaded into the StydentTracker database). If I don't "see" an Assignment from you in StudentTracker, then I will assume you did NOT turn it in. If this is not the case, then you will have to "prove" to me that you did the Assignment by getting a copy of it to me (whether through , on a USB drive, download link, etc).

21. Make Up Policy
If you notify the Instructor at least one week prior to an exam (Mid-Term or Final), it may be possible to take the exam at a different time than the scheduled date.
No make-ups will be given for exams, assignments, or other graded events, that were missed without prior notification to the Instructor.
If you are going to miss a Lecture (and the warm-up Quiz and ICE) because of illness or family emergency, etc, then me letting me know, and I may come up with some kind of arrangement for your to make up the missing 20 points. If I don't receive an explanatory from your prior to the missed Lecture, no make-up points will be made available. Once again, if you have a disagreement about your grades/points in StudentTracker (for example, I marked you absent and you were actually in class, perhaps you came in late) then bring this to my attention and I will adjust the points accordingly (with 'proof').

22. A Note About Emailing Me
Feel free to me with any questions you may have.
If it is a "code" question than make sure to attach the file(s) to the so I can have a look at the problem. If you have multiple files, then ZIP them first and attach the ZIP file.
I check my account regularly and will more than likely answer the same day it was sent (usually within a couple of hours), the exception being if you me after 11:00pm at night (in which case I'll reply the first thing in the morning).
I have a proprietary gmail account that I use only to return the StudentTracker assignments. Do not reply to this gmail account if you have a question or want a question answered, as I rarely check-in to this account to read (perhaps only once every ten days or so). As I said, I only use this account for pushing back Assignments through StudentTracker, so if you reply to this account your message will be setting there waiting to be read for a long, long time.

23. Any Questions ?

24. Okay! Here We Go!

25. What JavaScript Is and Is Not

26. What JavaScript Is
JavaScript is a popular general-purpose scripting language used to put energy and pizzazz into otherwise static web pages by allowing a page to interact with users and respond to events that occur on the page.
JavaScript allows for dynamic interaction between the web page and the end-user.
It would be a hard task to find a commercial web page, or almost any web page, that does not contain some JavaScript code.

27. What JavaScript Is
JavaScript, originally called Mocha and then LiveScript, was developed by Brendan Eich at Netscape in 1995 and was shipped with Netscape Navigator 2.0 beta releases.
JavaScript is a scripting language that gives life, hence LiveScript, to otherwise static HTML pages.
It runs on most platforms and is hardware independent.

28. What JavaScript Is
JavaScript is a client-side language designed to work in the browser on your computer, not the server.
It is built directly into the browser (although not restricted to browsers), Mozilla Firefox, Google Chrome, and Microsoft Internet Explorer being the most common browsers.
In syntax, JavaScript is similar to C, Perl, and Java; for example, if statements and while and for loops are almost identical.
Like Perl, it is an interpreted language, not a compiled language.

29. What JavaScript Is
Because JavaScript is associated with a browser, it is tightly integrated with HTML (and CSS).
Whereas HTML is handled in the browser by its own networking library and graphics renderer, JavaScript programs are executed by a JavaScript interpreter built into the browser.

30. What JavaScript Is
When the browser requests such a page, the server sends the full content of the document, including HTML and JavaScript statements, over the network to the client.
When the page loads, HTML content is read and rendered line by line until a JavaScript opening tag is read, at which time the JavaScript interpreter takes over through the user’s browser.
When the closing JavaScript tag is reached, the HTML processing continues.

31. What JavaScript Is
JavaScript handled by a browser is called client-side JavaScript.
Although JavaScript is used mainly as a client-side scripting language, it can also be used in contexts other than a Web browser.
Netscape created server-side JavaScript to be programmed as a CGI language, such as Python or Perl, but this class will address JavaScript as it is most commonly used—running on the client side, your browser.

32. What JavaScript Is
So, for the most part, JavaScript is event driven.
In other words, some event between the user and the web page triggers something to happen which propels some action.
Clicking on a link or button, hovering over an image, entering text in a textbox, scrolling down the page, etc, are all examples of events. What happens following these types of events is purely up to the imagination and intention of the developer: a message might pop up, a window might move, labels might appear or disappear, colors might change, tables might condense or expand, columns might sort, animations might move, etc.

33. What JavaScript Is Not
“Java is to JavaScript what Ham is to Hamster…”

34. What JavaScript Is Not JavaScript is not Java!
A newsgroup wit once quipped that “Java is to JavaScript what ham is to hamster.”
Well, that quote might be a little extreme, but suggests that these are two very different languages.
Java was developed at Sun Microsystems. JavaScript was developed at Netscape.
Java applications can be independent of a Web page, whereas JavaScript programs are embedded in a Web page and must be run in a browser.

35. What JavaScript Is Not
Java is a strongly typed language with strict guidelines, whereas JavaScript is loosely typed and flexible.
Java data types must be declared. JavaScript types such as variables, parameters, and function return types do not necessarily have to be declared.
Java programs are compiled. JavaScript programs are interpreted by a JavaScript engine that lives in the browser.
JavaScript is not HTML, but JavaScript code can be embedded in an HTML document and is contained within HTML tags.

36. What JavaScript Is Not
JavaScript has its own syntax rules and expects statements to be written in a certain way.
JavaScript doesn’t understand HTML, but it can contain HTML content within its statements.
All of this will become clear as we proceed. Promise.

37. What JavaScript Is Not
JavaScript is not used to read or write the files on client machines with the exception of writing to cookies.
It does not let you write to or store files on the server.
It does not open or close windows already opened by other applications and it cannot read from an opened Web page that came from another server.

38. What JavaScript Is Not
JavaScript is object based but not strictly object oriented because it does not support the traditional mechanism for inheritance and classes found in object- oriented programming languages, such as Java and C++.
The terms private, protected, and public do not apply to JavaScript methods as with Java and C++.
JavaScript is not the only language that can be embedded in an application. VBScript, for example, developed by Microsoft, is similar to JavaScript, but is embedded in Microsoft’s Internet Explorer.

39. What JavaScript Is Used For

40. What JavaScript Is Used For
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.

41. What JavaScript Is Used For
JavaScript can test to see if the user has plugins and send the user to another site to get the plug-ins if needed.
JavaScript has string functions and supports regular expressions to check for valid addresses, Social Security numbers, credit card data, and the like.
JavaScript serves as a programming language. Its core language describes such basic constructs as variables and data types, control loops, if/else statements, switch statements, functions, and objects.

42. What JavaScript Is Used For
JavaScript is used for arithmetic calculations, manipulates the date and time, and works with arrays, strings, and objects.
JavaScript handles user-initiated events, sets timers, and changes content and style on the fly.
JavaScript also reads and writes cookie values, and dynamically creates HTML based on the cookie value.
JavaScript can also handle animation and successfully used for producing web- based applications and games.

43. What JavaScript Is Like

44. What JavaScript Is Like
Brandon Eich, the inventor of JavaScript at Netscape, envisioned the language to be a web-based language that behaved like Visual Basic in that it could be successfully used by non-programmer types through the use of copy-paste and the tweaking of code (similar to Visual Basic’s dragging-and-dropping and tweaking of code).
The entire JavaScript infrastructure is already built and recognized by a set of rules interpreted by the browsers, so the developer isn’t required—or expected to!—write out whole programs or lines of code from scratch, but only how to copy-and-paste and then tweak the underlying code to work with a particular web page or application.

45. What JavaScript Is Like
Prior to programs like Visual Studio (with Visual Basic, C#, etc) all programs had to be hand-coded. If you want to run your program inside a Window’s application, you had to code the window. If you wanted the app window to have a menu bar, you had to code the menu bar. If you wanted the app to have a button, you had to code the button. This entailed a whole lot of code. But with the advent of visual programs, you could simple set a window or form that was all ready coded for you in the back end, and then simply drag-and-drop window elements onto it, like menu bars and buttons and text boxes and labels, etc.
Example

46. What JavaScript Is Like
So Brandon Eich envisioned JavaScript to be similar to this with all the functionality already precoded for the developer on the backend. But, instead of dragging-and-dropping to a window or a form and then tweaking the code, because web development in text based he saw how developer’s might accomplish the same thing by coping-and-pasting and then tweaking the code.
That’s the “miracle” of scripting with JavaScript!
You don’t have to know how to program lines and lines of code. You just have to know what a pre-developed snippet of code does, and then know how to tweak it to perform some action unique to your own web page or application.

47. Visual Basic Example

48. Visual Basic Example

49. Visual Basic Example

50. What JavaScript Is Like
Unlike Java, with JavaScript, there’s no natural place to start building the code like we did down in the main method in Java (and this really confuses and disturbs more “procedural” programmer types). The web page itself can be viewed as a type of main.
Whatever you want to happen on the page with JavaScript, you either embed the code directly in the page to perform some action, or in a separate file that can be called up using a function when some action is performed (like clicking a link or button, dragging the cursor over an image, loading a page, etc).
The key word here is that we are “scripting” which has a different nuance than “coding.”

51. JavaScript Example

52. JavaScript Example
This is straight HTML without any JavaScript. This will create the input box and button on the web page, but there isn’t any functionality. It might look nice, but it doesn’t do anything.

53. JavaScript Example
Adding JavaScript (a function and a click event) allows the input box and button to be fully functional. This works by referencing HTML elements by their given ID and by attributing an event like a “click” that calls a function.

54. JavaScript Example

56. JavaScript in Action: A Brief Example

57. JavaScript in Action: No Script

58. JavaScript in Action: With JavaScript

59. A Look Back: Internet, WWW, & HTML

60. Intro to Internet, WWW, and HTML
A Short Free-Form Lecture
History of Web (PowerPoint)
Look at plain digital text file
The "interpretation" of Markup Language

61. Web Lexicon
The world wide web (www, or web) consists of millions of sites, each of which has a unique web address called a uniform resource locator, or URL (for example,
Each site consists of many pages with related content
Each page on a website can be viewed in a browser (such as Firefox, Chrome, Internet Explorer, Safari, or Opera) on a computer or on a mobile device such as a tablet or a smart phone.
Web users navigate from one page to another via web links, also called hyperlinks

62. HTML DEMONSTRATION: Text File  HTML file View in Notepad  Browser
Intro to tags
Russian Nesting Dolls
Concept applies to Tags and Directories!

63. <html> <head> <title></title> </head>
<body>
</body> </html>
These are the minimum tags needed to implement a web page. These make up the web pages structural framework and at this point no content will appear on the page in the browser.

64. <html> <head>
<title>Tag Example – No Content</title>
</head>
<body>
</body> </html>
Adding a “title” will show up in the browser’s title bar and/or tab, but there is still no content displayed in the body.

65. <html> <head>
<title>Tag Example – Untagged Content</title>
</head>
<body>
Here is some "untagged" text appearing in the body.
</body> </html>
Adding some text to the “body” will show up in the browser, but because it is untagged it will be displayed as default plain text.

66. <html> <head>
<title>Tag Example – Tagged Content</title>
</head>
<body>
<!-- This is an example of a comment. -->
<h1>Here is some tagged text</h1>
<h2>Here is some tagged text</h2>
<h3>Here is some tagged text</h3>
<p>Here is some tagged text</p>
</body> </html>
Adding tags to the “content” will alter the size and functionality of the text in the browser.

67. <html> <head>
<title>Rex Winkus's Portfolio</title>
</head>
<body>
<h1>Rex Winkus's Portfolio</h1>
<h2>Rex Winkus's Portfolio</h2>
<h3>Rex Winkus's Portfolio</h3>
</body>
</html>
HEAD
BODY

68. <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)
Tags can also have attributes and values which can change a tag’s properties. In earlier versions of HTML these were done in the HTML itself. Although still supported, in newer versions of HTML, including HTML5, attributes are defined using CSS.

69. Tag Examples: Headings
<h1> text </h1> <! -- largest of the six -->
<h2> text </h2>
<h3> text </h3>
<h4> text </h4>
<h5> text </h5>
<h6> text </h6> <!-- smallest of the six -->

70. <p> Paragraph <p> defines a paragraph
Multiple <p>'s do not create blank lines
Use <br> for a line break
Fully-specified text uses <p> and </p>

71. Align Attribute <body> <p>Here is some text </p>
<p align="center"> Centered text </p>
<p align="right"> Right-justified text </p>
</body>
Although this is still supported, the ALIGN attribute and it's values are "old school" and a carry-over from the HTML 4 days. Today web developers do all their aligning, font sizing, etc, with CSS.

72. Ordered (Numbered) Lists
<ol>
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
<li>Item four</li>
<li>Item five</li>
</ol>

73. Unordered (Bulleted) Lists
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
<li>Item four</li>
<li>Item five</li>
</ul>

74. <a href> Anchors (HyperLinks)
Link to an absolute URL
<a href="
Link to a relative URL in a web directory
<a href="references.html">References</A>
a stands for “anchor” and href stands for “hypertext reference”

75. Absolute & Relative Links
To learn more about absolute and relative links, you are encouraged to use the informational PowerPoint slides and video available on the main page of the BIT116 web site:

76. Lecture 01 - ICE 01

77. How ICEs Work
Invoke the BIT116 web site at
Select Lectures from the navigational menu bar
Select the current Lecture number from the accordion bar (e.g., Lecture 1). NOTE: I will try to 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.
The PowerPoint slides used for the current Lecture are available
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)
Any Example Files will be posted that you can use to see how things might be done
A link to the current In-Class Exercises is posted (highlighted with a green arrow)
Any ICE files that will be used in working through the current ICE will be posted
Open the link to the In-Class Exercises and follow the instructions
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.
When you complete all the ICEs you are free to leave (some students finish sooner than others).

78. DEMONSTRATION: ICE 01 Walk-Through

79. Lecture 1
Please begin working on the LECTURE 1 In-Class Exercises. We will walk-through this first ICE 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.
Once you have completed your ICEs, you are free to go for the day.
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 outstanding ICEs outside of class.