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, Intro To HTML

3. 3 Official BIT116 Web Site: http://faculty.cascadia.edu/MPanitz/BIT116 Class Times: Mondays & Wednesdays, 1:15pm – 3:20pm Assignments/Grades: StudentTracker We'll talk about this more on the due date of the first assignment Instructor Email: mpanitz@cascadia.edu Instructor Office & Office Hours: CC1-319 Mondays/Wednesdays: 11:00am – 12:30pm, or by appointment

4. Komodo Edit http://www.activestate.com/komodo-edit/downloads This works on Windows, Mac, and Linux START DOWNLOADING THIS NOW!!!http://www.activestate.com/komodo-edit/downloads  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 or 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 4

5. 5 Objective: To Learn Basics of JavaScript  You'll learn by doing  Read the supplementary materials  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!

6. 6 BIT116 Web Site  Everything will go through BIT116 web site  Schedule, Lectures, ICEs, Assignments,  Submissions, 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  The topic schedule may change  EXECPT for the exams – the midterm & final WILL occur on the dates currently listed

7. 7 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, under the 'Course Info' section You are responsible for knowing the syllabus

8. 8 Book Info  No Required Book  I'll try to provide supplementary, online resources where appropriate

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

10. 10 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.  Feel free to bring your own laptop to class (there's wireless/Ethernet in this room)  If you run into problems installing the software on your own laptop then bring it into class (or visit me during office hours) and we can look at it together (regardless of whether you bring it in regularly)

11. 11 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 plain-ol' Notepad, and then copy it into Komodo Edit to check for errors

12. 12 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 let me know ASAP. If you've saved copies of all your work, you can 'prove' yourself and I will change your grade accordingly.

13. 13 Any Questions ?

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

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

16. 16 Document Structure Document Appearance Interactivity

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

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

19. 19 Let’s learn HTML

20. 20  ‘Device’ asks for a web page from the server  Device=computer, tablet, phone, etc.  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

21. HTML2 This is Heading 1 This is Heading 2 21 HEAD BODY 1. Please open "html2.html" located under "Example Files" 2. Right-click on the page, and select "View Page Source" or "View Source"  View Source is a great way to figure out for yourself how HTML works!

22.  Let's go to the course home page, then find the link for 'ICE #1', and then work on that  Note: you may need to 'fold out' the Lecture #1 material in order to see it  Do these exercises:  # 0 (Install Komodo Edit)  # 1 (You follow along as the instructor walks you through using Komodo Edit to create a simple HTML page, using the H1 and P elements)  # 2 (A 'fill in what's missing' exercise to help you review the material from the prior part)  # 3 (A 'fill in everything' exercise) 22

23.  We're going to skim through the next several slides  They're nice reference material, but you should be able to figure out them out on your own, after what we've covered so far.  Memorize how to do everything in ICE #1, so that you can do it on your own, from memory, by the start of the next class.  The quiz at the start of the next class will be something similar to: "Sit down at your computer and log in (or turn your personal laptop on). First close down all your programs so that the instructor knows that you're starting from scratch. Next, download a file from the Lesson 02 part of the course home page to your computer. Open the file in Komodo Edit and add a heading 1 that reads "Quiz 02", and a paragraph that has your name in it. Display the file in BOTH the Chrome browser AND the Komodo Edit tab."  You will also be required to bring your completed 'weekly schedule' to class. Bring this in electronic form & I'll walk you through handing it in. 23

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

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

26. 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: 26

27.  importance of managing your time  2-3 hours per credit x 5 credits = 10-15 hours per week, every week  You need to find this time now, so that you know that you've got it  You also ought to find an additional 5-10 hours per week in case you need extra time (a larger project is due, the midterm or final exam happens, or you just get stuck on the normal material)  Link to 142 schedule exercise  Emphasize that the self-reflection is the most important part  This is due at the start of the next lecture (in order to give you time to go home & consult with your calendar, SO, etc) 27

28.  The plan for the quarter is to cover 'core' material for several lectures, then periodically dive into tangents.  Tangent = JavaScript themed, but a 'fun', self-contained lecture  Example: looking at CSS & Bootstrap in lecture #4  I'd love to hear what y'all might like to cover as a fun side- tangents.  Email me ideas: Mpanitz@Cascadia.edu  I'll come with ideas if y'all don't 28