Temporary Log In: Username: 231class Password: Win@2014 Domain: student

1. BIT116: Scripting Temporary Log In:Username: 231classPassword: Win@2014Domain: student http://faculty.cascadia.edu/cduckett/bit116 Introduce yourself to the people around you

2. BIT116: ScriptingLecture 01 Instructor: Craig Duckett cduckett@cascadia.edu Monday, January 6th, 2014 Course Introduction and Orientation

3. Official BIT116 Web Site: faculty.cascadia.edu/cduckett/bit116 Class Times: Mondays & Wednesdays 3:30-5:35pm Typically first hour is lecture, second hour is in-class exercises Assignments/Grades: StudentTracker Instructor Email: cduckett@cascadia.edu Instructor Office & Office Hours: CC1-042 (in alcove near the main entrance) Mondays & Wednesdays 12 Noon-1:00pm Tuesdays 11:00am-12 Noon (Occasionally) By Appointment

4. BIT116 Syllabus: Grading BIT116: 1000 points Total • ICEs/Quizzes: 20 points x 15 = 300 points • 4 Assignments: 100 points x 4 = 400 points • Mid-Term & Finals Exams: 150 x 2 = 300 points • There will also be up to 100 points of Extra Credit available at end of quarter Syllabus

5. Weekly Schedule Format First Two Weeks Focus primarily on HTML, CSS, and finally some JavaScript Weeks 3 through 11 JavaScript, jQuery, Event Handling, Objects, Functions, Debugging, Loops, Document Object Model (DOM), Windows Objects, Arrays, Tables & Forms, Animation

6. Recommended Software/Hardware Text Editors PC Notepad (comes with Windows) Komodo Edit http://www.activestate.com/komodo-edit/downloads(Recommended)  Notepad++ http://notepad-plus-plus.org/ UltraEdithttp://www.ultraedit.com/products/ultraedit.html TextPadhttp://www.textpad.com Mac TextEdit(comes with OS X) Codahttp://www.panic.com/coda/ BBEdit andTextWranglerhttp://www.barebones.com/ Adobe Dreamweaver http://www.adobe.com/downloads.html Adobe Creative Cloud for Students http://success.adobe-education.com/en/na/students.html 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. 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

9. 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!

10. 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, email me cduckett@cascadia.edu

11. 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

12. Book Info • Required Book Murach’sJavaScript and DOM Scripting (2009) by Ray Harris 20 Chapters, 764 pages, 337 illustrationsISBN: 978-1-890774-55-4 • Download Files and Applications from the Book • Go to http://www.murach.com and go to the page for Murach's JavaScript and DOM Scripting • Click the link for "FREE download of the book applications" 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.

13. Class Meeting Times • Class starts promptly at 3:30pm • Most classes 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) • There will be approximately one-hour of lecture, 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 do the major Assignments. • If you need help, ask! Better sooner than later!

14. 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

15. 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 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.

16. Four (4) Main Assignments • There will be four (4) main Assignments spread out throughout the quarter. Together these will make up 40% of your grade. BE AWARE: The schedule starts slow and then speeds up! Zoom! Zoom! • Assignment 1 (Individual) • DUE Monday, February 3 • REVISION: Wednesday, February 19 • Assignment 2 (Individual) • DUE Wednesday, February 12 • REVISION: Wednesday, February 26 • Assignment 3 (Individual or with a Partner) • DUE Monday, March 3 • REVISION: Monday, March 10 • Assignment 4 (Individual or with a Partner) • DUE: Wednesday, March 12 (NO REVISION!)

17. 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 

18. 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++

19. Save a Copy of All Your Work! • This includes Quizzez, 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 email, on a USB drive, download link, etc).

20. 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 email 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 email 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').

21. A Note About Emailing Me • Feel free to email me with any questions you may have. • If it is a "code" question than make sure to attach the file(s) to the email 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 cduckett@cascadia.edu email 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 email me after 10: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 email (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.

22. Any Questions ?

23. Okay! Here We Go!

24. What JavaScript Is and Is Not

25. What JavaScript Is JavaScript is a popular general-purpose scripting language used to put energy and pizzaz 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.

26. What JavaScript Is JavaScript, originally called 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.

27. What JavaScript Is JavaScriptis 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 whileand forloops are almost identical. Like Perl, it is an interpreted language, not a compiled language.

28. What JavaScript Is Because JavaScript is associated with a browser, it is tightly integrated with HTML. 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.

29. 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. When the closing JavaScript tag is reached, the HTML processing continues.

30. 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.

31. What JavaScript Is Not JavaScript is not Java! A newsgroup wit once quipped that “Java is to JavaScript what Car is to Carpet.” 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.

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

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

34. 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.

35. 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.

36. What JavaScript Is Used For

37. 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.

38. 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. JavaScripthas string functions and supports regular expressions to check for valid e-mail addresses, Social Security numbers, credit card data, and the like. JavaScriptserves 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.

39. What JavaScript Is Used For JavaScript is used for arithmetic calculations, manipulates the date and time, and works with arrays, strings, and objects. JavaScripthandles user-initiated events, sets timers, and changes content and styleon the fly. JavaScriptalso 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.

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

42. Intro to Internet, WWW, and HTML • A Short Free-Form Lecture • History of Web (PowerPoint) • Look at plain digital text file • Look at a Word .docx file  .zip file • The "interpretation" of Markup Language

43. 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, http://www.google.com) • 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

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

45. <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>

46. <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

47. <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)

48. 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 -->

49. <P> Paragraph • <P> defines a paragraph • Multiple <P>'s do not create blank lines • Use <BR> for blank line • Fully-specified text uses <P> and </P>

50. <BODY> <P>Here is some text </P> <PALIGN="center"> Centered text </P> <PALIGN="right"> Right-justified text </P> </BODY> 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.