1. http://faculty.cascadia.edu/mpanitz/bit116 Introduce yourself to the people around you BIT116: Scripting

2. Instructor: Mike Panitz MPanitz@cascadia.edu Course Introduction and Orientation

3. 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. 4 BIT116 Syllabus: Grading BIT116: 700 points Total  Homework / Assignments (2)@ 100 pts each  Exams (2) @ 150 pts each  Class Activities @ 200 pts. SyllabusSyllabus, listed on the ‘Home’ page for the course

5. 5 First Week or so Focus 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. 6 Komodo Edit http://www.activestate.com/komodo-edit/downloads (Recommended) http://www.activestate.com/komodo-edit/downloads 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.htmlhttp://www.adobe.com/downloads.html  Adobe Creative Cloud for Students http://success.adobe-education.com/en/na/students.htmlhttp://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. 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. 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. 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.Mpanitz@Cascadia.edu

10. 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. 11 Book Info  Required Book  JavaScript: A Beginner's Guide, Fourth Edition by John Pollock © 2013 ISBN: 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. 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. 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. 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. 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. 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. 17 Any Questions ?

18. 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. 19 JavaScript 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. 20 Document Structure Document Appearance Interactivity

21. 21  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.  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 22

23. 23 Let’s learn HTML

24.  Install Komodo Edit  NOT Komodo IDE – similar to edit, but requires $$$  http://komodoide.com/download/#edit 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 24

25. 25  ‘Device’ asks for a web page from the server  Server does, 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. 26 Rex Winkus's Portfolio Rex Winkus's Portfolio

27. 27 Rex Winkus's Portfolio Rex Winkus's Portfolio HEAD BODY

28. 28 Hello element 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. TagsDescriptionExample heading tagsCreates bold content of varying sizes, with the being the largest, and being the smallest, followed by a line of white space 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. 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: to tags 29

30. Common Tags TagsDescriptionExample paragraphCreates a paragraph between the opening/closing tags followed by a line of white space This is the first paragraph line. This is the second paragraph line. This is the third paragraph line. This is the fourth paragraph line. 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: tag 30

31. 31

32. TagsDescriptionExample ordered list list 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) Apple Banana Cantaloupe 1.Apple 2.Banana 3.Cantaloupe W3Schools: tag 32

33. TagsDescriptionExample unordered list list 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 propertylist-style-type Apple Banana Cantaloupe Apple Red Delicious Granny Smith Banana Cantaloupe Apple Banana Cantaloupe Apple o Red Delicious o Granny Smith Banana Cantaloupe W3Schools: tag 33

34. 34

35.  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.asphttp://www.w3schools.com/htmL/html_blocks.asp 35

36. TagsDescriptionExample Strong says that this is particularly important B means “bold” In practice both tend to produce boldface Lasers can be very dangerous! Do not look directly at the laser’s 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. 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: tag 36

37. TagsDescriptionExample “anchor” – this is a hyperlink to another documentCould also be a link to another place in the same document You can search the web with Google or Bing. You can also go to another file in this same directory You can search the web with Google or Bing. You can also go to another file in this same directoryGoogleBinganother file in this same directory Links that start with “http://” are ‘absolute’ – they specify a single location on the web Anything 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.http://www.example.com/some/folder/aboveFile.htmlhttp://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.http://myserver.com/aboveFile.htmlhttp://myserver.com/anotherFile.html W3Schools: tag 37

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: 38

39. 39

40. 40  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 tag (covered in exercise #3)

41. 41

42. 42 Lecture 01 - ICEs

43. 43 How ICEs Work 1.Invoke the BIT116 web site at http://faculty.cascadia.edu/mpanitz/bit 116/http://faculty.cascadia.edu/mpanitz/bit 116/ 2.Select Lectures from the navigational menu bar 3.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 available 5.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 done 7.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 posted 9.Open the link to the In-Class Exercises and follow the instructions 10.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. 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.