Skip to Navigation | Skip to Content

MAT 175 - Web Design - JavaScript + jQuery

Menu

Class Syllabus

 

Dear Students

JavaScript is the most popular programming language in the world. It powers incredible applications and experiences across the web and beyond. I am honored that you’ve chosen to learn it with me. I want you to be as inspired as I am by the creative possibilities of code and the power of computational thinking. 

This class can be hard. You may get frustrated at times. But, that’s true of most things worth doing. Stick with it. Embrace the chaos that comes with learning something new. Understand that, just like learning a foreign language, you won’t be able to ‘speak’ the JavaScript language right away. It takes practice. The learning will come and your effort will be worth it. Trust me. The class is manageable. You can do it. Just take it one week at a time and try not to get behind. Reserve time for the class each week and try not to skip the tutorials provided. They will help you. 

Know that I am here to support you, especially when you get frustrated by ‘bugs’ in your code, have questions about things you don’t understand, or your life’s circumstances are making things difficult. If these things happen, let’s talk. I’m here for you. 

The information that follows provides the academic and technical details about the class. Read it over so you know what to expect. But also know that what I am most concerned with is your own learning. I don’t want to limit your creativity and I want you to be able to pursue your own passions. So, if you find something in the class you’d like to do differently or if you have any questions or problems, reach out to me. I’m reasonable. 

Cheers, Karl

Course Description

This course introduces web design students to JavaScript and jQuery for interactive web development, including how JavaScript can be used in conjunction with HTML and CSS to add interactivity, animation, visual effects, and advanced functionality to web pages. Students explore interface design and core programming concepts in JavaScript and jQuery to create rich user experiences, manage dynamic content, create animation, and make web pages more interactive and intuitive. Students learn to design and script user interface elements common on websites, such as content sliders, interactive galleries, and more. Students also learn to use the HTML5 canvas element with JavaScript to draw, animate, and create interactive graphics for HTML5 games or web applications. Topics also include integrating and customizing jQuery plugins, working with AJAX, and using API interfaces to web services, such as maps and social media.

Student Learning Outcomes + Core Competencies

Institutional Core Competencies are broad general education outcomes that demonstrate real-world skills that students should gain while progressing toward the completion of a degree, certificate, or educational goal. The core competencies emphasized in this course include Intellectual and Practical Skills including inquiry, analysis and independent thinking,  critical thinking, creative thinking, quantitative literacy, problem solving, information literacy, and integration of knowledge. 

Student Learning Outcomes (SLOs) describe what students should be able to do upon successful completion of this course and apply directly to the high-level skills you are expected to possess in the workforce. You are expected to achieve competency in the following course-level Student Learning Outcomes, each of which help you achieve one or more of the above core competencies:

  1. Plan, design, and produce user interfaces, websites, and/or web applications that utilize JavaScript and jQuery programming techniques to enable advanced functionality, interactivity, animation, and/or special effects.
  2. Demonstrate understanding of JavaScript and JQuery scripting fundamentals.
  3. Analyze and evaluate website applications for design, efficiency, and usability.

Course Objectives

Students will learn to:

  1. Identify the capabilities of JavaScript and jQuery and their role in web design and the document object model.
  2. Define and apply appropriate project programming techniques using JavaScript and jQuery in conjunction with HTML and CSS.
  3. Write and troubleshoot JavaScript statements, commands, variables, operators, conditionals, loops, arrays, and functions.
  4. Respond to user events using JavaScript and jQuery, creating interactivity.
  5. Select and modify page elements and create special visual effects and animation using events and jQuery functions.
  6. Utilize AJAX for dynamic content loading.
  7. Utilize the HTML5 canvas element to draw, animate, and add interactivity to elements.
  8. Utilize JavaScript libraries, toolkits, plugins, and APIs to add specialized functionality to web pages.
  9. Develop and apply appropriate website or web application information architectures.
  10. Design effective user interfaces.
  11. Utilize software tools and development frameworks for efficient workflow.
  12. Evaluate website applications for design, efficiency, and usability.

Design skills, design and development processes, personal expression, content development, project management, and trends in visual communication as they relate to programming and interactive media will be emphasized along with the learning of programming concepts and techniques.

Class Websites, Tutorials, and Reading

Class Websites

Required Online Video Tutorials

  • Instructor created instructional videos (on the class website)

Required Online Interactive Tutorials

Optional Supplemental Video Tutorials

  • Lynda.com instructional videos

Required Reading

  • JavaScript & jQuery: Interactive Front-End Web Development by Jon Duckett (Wiley) available for free through O'Reilly Books Online.
  • Assigned web pages or web resources

Optional Reading

  • Form + Code in Design, Art, and Architecture: A Guide to Computational Aesthetics by Casey Reas and Chandler McWilliams
  • Game Design with HTML5 & JavaScript by Rex van der Spuy
  • Head First JavaScript Programming: A Brain-Friendly Guide by Eric Freeman and Elisabeth Rosen
  • HTML5 Animation with JavaScript by Billy Lamberta and Keith Peters
  • Dom Scripting: Web Design with JavaScript and the Document Object Model by Jeremy Keith
  • JavaScript: The Definitive Guide by David Flanagan
  • HTML5 Canvas for Games and Entertainment by Rob Hawkes
  • JavaScript and jQuery: Training and Reference by Zak Ruvalcaba and Mike Murach
  • jQuery Cookbook by jQuery Community Experts
  • jQuery - Pocket Reference by David Flanagan

Many of these and other books and videos about JavaScript and jQuery are avaialble for free through O'Reilly Books Online. See my MAT 175 JavaScript + jQuery Playlist for recommendations and links.

Grading and Evaluation

Total Possible Points = 100

  • Exercises: 55 points (55%)
  • Final Game or App Project: 12 points (12%)
  • Code Library: 5 points (5%)
  • Quizzes: 10 points (10%)
  • Codecademy Participation: 8 points (8%)
  • Class/Online Participation: 10 points (10%)

Exercises/Applications (55 points)

Web application exercises will be assigned to provide hands-on experience with key concepts from course lectures and demonstrations. Exercises will often include both design (artistic) and technical (coding) elements and typically take 1-2 weeks of programming and production time.

Final Game or App Project (12 points)

Students will conceive, design, produce, and program (using JavaScript/jQuery) one robust game or interactive web application project that will require substantive programming and production time. For the final project, you may choose to create a new application, or extend upon and refine an application that you started in one of the class exercises.

Code Library (5 points)

As the class progresses, students are expected to generate multiple sample scripts and/or code snippets that demonstrate code fundamentals or programmatic techniques. These will be largely technical explorations based on assigned tutorials or reading. Students will upload/store these scripts and sample files in their own codeLibrary folder on the class server.

Within your Lastname_Firstname folder on the MAT server, create a new folder called "codeLibrary" and use this folder as a repository for code samples that you create in the class. Build your code library by following along with the video tutorials, interactive tutorials, and/or reading and creating your own code samples/examples. Your codeLibrary folder should contain .js and/or .html files that demonstrate code examples and/or sample syntax. This is where you'll put sample code that you've created that is not related to a specific exercise or project. For example, if watching and working alongside the videos (and/or doing the readings) on variables, you might have have some sample script with notes and/or example syntax that you saved as "variables.js" or "variables.html". Periodically upload such files into your codeLibrary on the MAT server. There are not specific requirements or due dates for exactly which files belong in the codeLibrary. It is your own personal library and you decide what to include. But, in general, your library should reflect that you are participating in the class and following along with the readings and/or tutorials. Build the library as a useful reference resource for yourself. Be sure to give descriptive, semantic file names to the code in the library (e.g. "example1.js" is not descriptive, but "ifElseConditionals.js" is descriptive).

Quizzes (10 points)

Quizzes will be given as we progress through the semester to assess your comprehension of the material provided in course lectures, videos, the textbook, and/or other materials. Quizzes will test knowledge of JavaScript and/or jQuery programming concepts. Advanced notice and instructions regarding quizzes will be given at least one week prior to quiz completion deadlines.

Code Academy Participation (8 points)

Participation is required in the codecademy.com Learn JavaScript interactive tutorials. Provide evidence of completion of these tutorials by submitting your Codecademy username to the instructor by email.

Class/Online Participation (10 points)

The instructor will assess your overall level of engagement and participation in online discussion forums, class assignments, online critiques, and/or other online activities as assigned.

Administrative

Grading Guidelines
A (90 - 100%) – Outstanding achievement; only for the highest accomplishment.
B (80 - 89%) – Praiseworthy performance; definitely above average.
C (70 - 79%) – Average; awarded for satisfactory performance.
D (60 - 69%) – Minimally passing; less than average achievement.
F (0 - 59%) – Failing.

Class Participation
Participation in class will be considered as part of your course grade. Students are expected to frequently check the class website for new lecture material, meet project and exercise deadlines and join class conversations (discussions and other online activities) on the Canvas site.The instructor has the right to drop students from the class who fail to participate before census or in excess of two weeks. However, if you intend to drop the course, you must officially withdraw through SURF or the Admissions & Records office or risk receiving an “F” in the class.

Due Dates + Late Work
All work is expected to be submitted by the end of the day on the day that it is due. Late work is accepted but may be lowered by one letter grade for each week that it is late. However, I offer one ‘freebie’ and will not penalize students for missing a deadline provided it does not become habitual. The final project, however, will not be accepted late.

Prerequisites/Advisories
MAT 125 is prerequisite. MAT 165 is advised.

Class Conduct + Culture
In this class, it is expected that we treat each other with professionalism and respect, are mindful and kind in our interactions, keep our community open and constructive, and foster a culture of support and guidance. 

All students are expected to follow the administrative rules and standards of conduct detailed in the college catalog. Students are expected to produce original work and not use pre-packaged templates or copy web designs or code that is not their own. Plagiarism may result in a failing grade and other consequences. A student may not use or copy by any means another's work (or portions of it) and represent it as his/her own. Quotations, photographs, or other artwork used by a student should be given appropriate credit or reference.

Instructor Contact
Regular effective contact and interaction with the instructor will be maintained through weekly instructor-prepared electronic lectures and updates to the class website, weekly email announcements, active online discussion and question and answer forums, weekly office hours, web conferencing or screen-sharing sessions, instructor feedback on student work, and through responding to student emails, phone calls, and/or other questions or postings in a timely manner. Students can reasonably expect to hear back from the instructor within 48 hours (excluding weekends and holidays) for most inquiries. If the instructor expects to be absent and unable to post materials and/or respond to email or discussion forums in excess of three or four days, he will notify the class and make other accommodations. If you have concerns about instructor contact or any other regard, please refer to the section on Students Rights in the MiraCosta College catalog.

College Support Services
The college offers a wide variety of support services of which I encourage you to take advantage. These include health services and personal counseling, academic and career counseling, EOPS, veterans’ services, and much more. See miracosta.edu/student-services/ for links and phone numbers.

Academic Accommodations
If you have a disability or medical condition impacting learning and have not yet been authorized to receive academic accommodations, you’re encouraged to contact the Student Accessibility Services (SAS) office (formerly known as Disabled Students Programs and Services or DSPS). The SAS office can be reached at (760) 795-6658, or sas@miracosta.edu. The SAS office will help you determine what accommodations are available for you. If you’re requesting my assistance utilizing any authorized accommodations, please contact me as soon as possible.

Accessibilty Statement
If you encounter any accessibility-related difficulties with required or optional course materials, please contact me as soon as possible so that we can investigate the matter further and provide effective alternatives, if needed.

MiraCosta College - Diversity, Equity, & Inclusion Statement
MiraCosta College is committed to providing a strong, supportive, and authentic environment where difference is valued, respected, encouraged, and honored; where all faculty, staff, and students experience a sense of belonging and the freedom to express themselves; and where their experiences are recognized and valued. For more  information visit: miracosta.edu/dei/

LGBTQIA+ Resources
MiraCosta College has an expressed commitment to equity and inclusion for students, faculty, and staff who are lesbian, gay, bisexual, transgender, queer, questioning, intersex, and asexual. For information about LGBTQIA+ campus resources and services, visit: miracosta.edu/lgbt.

Administrative Dates
2/3 is the “Add” and “Drop” deadline (without a “W” recorded). 4/27 is the “Withdraw” deadline (with a “W”). 5/26 is the “Pass/No Pass” option deadline. 3/20 - 3/24 is Spring Break.

Important Links + College Support Services