JavaScript

INFO1-CE9755

Professor:	Sam Sultan [sam.sultan@nyu.edu]
Class website:	[workshop.sps.nyu.edu/~sultans/javascript] (or)	[samsultan.com/javascript]
Course Days:	Tuesdays - 3/5 - 5/7
Course Hours:	6:00pm - 9:00pm
Modality:	Online via Zoom

Announcement(s):

12/7/2023 - Final Project due on Sat 12/9 midnight. Final Exam on Thu 12/14 @ 6pm. Zoom link: https://nyu.zoom.us/j/91088555215

+syllabus
+course outline

+grades & evaluation
+student listing

+examples & demos
+final project

+student feedback
+student evaluation & comments

Session - 1 2 3 4 / 5 6 (CSSa CSSb) 7 8 9 10 Extra Topics (self-study): OO jQuery

HTML - CSS - JavaScript - DOM - JSON - AJAX - jQuery - JavaScript*Tester^©

Site Helpful?

COURSE DESCRIPTION:

JavaScript is a scripting language embedded in webpages to create dynamic, interactive content. In this hands-on course, learn the fundamentals of employing JavaScript for web applications. Use JavaScript to display clocks, slide shows, and dynamic image galleries. Learn how to create reusable components such as form validators. Work with and set cookies to create personalized pages. Understand the Document Object Model (DOM), and learn how to use it with JavaScript to create DHTML components such as hover menus, flyouts, and mouse-over effects. Complete the course by learning about asynchronous web services using AJAX and Fetch.

COURSE LEARNING GOALS:

1. Course Objectives:

The objective of this course is to teach you JavaScript as it relates to web page development. The course will discuss JavaScript core language, including JavaScript data types and variables, expressions and operators, functions, arrays and objects. We will also examine the Document Object Model and JavaScript event model, and will explain how you can use these to interact with HTML components to create dynamic web content. The course will also show you how to interact with HTML forms, and how to create, manipulate and save client-side cookies.

In addition the course will also examine Cascading Style Sheet and DHTML, and will teach you how to create dynamic HTML components by creating and manipulating HTML content through their DOM element objects. The course completes with some discussions on advanced topics such as jQuery, AJAX and OO. jQuery is a very popular javaScript library that makes coding and interacting with HTML elements much simpler. AJAX allows you to perform dynamic asynchronous communications with the server to obtain and present data more interactively. And OO which stands for object oriented teaches you techniques for writing object oriented JavaScript.

2. Student Learning Outcomes:

Understand the JavaScript as a core language used for the web
Obtain working knowledge of JavaScript various built-in objects, properties and methods
Become comfortable with using the DOM - Document Object Model
Be able to set up JavaScript events and event handling responses
Dynamically alter element content, format and characteristics using CSS - Cascading Style Sheets
Create and manipulate DHTML components such as hover menus and hide/show capabilities
Work with cookies and Web Storage mechanisms to create stateful web interaction
Obtain preliminary knowledge of web services using AJAX and Object Oriented JavaScript coding

BOOKS - (Required / Suggested)

Required Books -

Beginning JavaScript (5th Edition)
- Authors - Jeremy McPeak and Paul Wilton
- Publisher - Wrox Press

Suggested Books -

JavaScript - The Definitive Guide (6th Edition)
- Authors - David Flanagan
- Publisher - O'Reilly

GRADE ASSIGNMENT AND EVALUATION:

Your final grade will be based on the following:

Midterm Exam - 30%
Final Exam - 30%
Web Site Project - 25%
Attendance & Class Participation - 15%

Details of Assignment, Exam and Grade Evaluation.

Class Attendance and Participation: To receive full credit for the course, you must attend all classes since much of the learning occurs during class presentation and discussions. Please contact the instructor if you anticipate missing any part of the class. Grades will be based on:
- Involvement in class activities
- Participation which demonstrates integration of reading, class work, relevance and application.
- Willingness to learn by accepting feedback, trying new skills and approaches, etc.
- Quality/quantity of providing effective and balanced feedback.
- You must ask at least one question, or respond to professor or student inquiry at least once per session
Homework: Homeworks when assigned must be completed on time within 1 week after date assigned.
- Homework: Homework is always due one week from assignment date.
- Student should complete the assignment and bring their answers to class the following week.
- Instructor will ask students to present and discuss their homework solution(s) prior to start of lecture of the following week.
- Incompleted homeworks will severly impact your learning experience and overall grade.
- All code must be properly indented as shown in class. No exception.
- Do not use the Javascript*Tester to complete your homework. Use your own browser to test your code
[Homework Answers]
Final Project: There will be a class final project The project will be a culmination of topics, concepts and competencies learned in this class.
Requirements are under final project
Midterm Exam: There will be a midterm exam. The exam will be an open book, open notes style exam. The exam will test the student's acquisition of topics, concepts and competencies learned by midterm.
Final Exam: There will be a final exam. The exam will be an open book, open notes style exam. The exam will test the student's acquisition of topics, concepts and competencies learned in this class. The final exam will not be cumulative. It will only cover topics discussed since the midterm.

NE and P/F Grades
If you are not interested in receiving a grade, and you simply require an NE (non-evaluative) or P/F (pass/fail) grade, please fill out the appropriate form listed. Neither an NE nor a P/F grade will count toward an NYU certificate.

NYU SPS Grading Scale and Policies https://www.sps.nyu.edu/homepage/student-experience/policies-and-procedures.html>

Grades are FINAL
Please do not negotiate for a better grade. If you are expecting to receive a grade of an "A" at the end of the semester, then I expect you to attend all sessions (unless you previously notify me), to participate in every class, to turn in your homework on time, and to keep up with the class reading material. If you see yourself falling behind do not hesitate to ask for help. This will ensure that you stay current with the class, and will ensure that you get a good grade on your work.

Your Final Grades will be posted to NYU Albert:

Log into Albert using your net id, at: http://albert.nyu.edu/albert_index.html

COURSE OUTLINE:

DATE	SESSION	TOPIC[s] COVERED
[Session 1]	`1`	Introduction to JavaScript HTML and scripting languages Where to insert JavaScript in HTML The <script> tag JavaScript variables and data types Numeric and String operators Comparison and Logical operators JavaScript Arrays and Objects What is an array? Accessing array elements What is an object? Object properties and methods
	Reading:	Chapters 1, 2

[Session 2]	`2`	Basic JavaScript programming concepts The if statement The else condition The switch and case statements The for and for..in loops The while and do..while loops The break and continue statements The label identifier Defining functions Passing parameters and receiving data from functions Variable scope and the var statement
	Reading:	Chapter 3, 4

[Session 3]	`3`	The Browser Objects The Browser Object Hierarchy The Window object The History object The Location object The Navigator object The Screen object Opening up additional windows Accessing other frames JavaScript events and event handling Setting up timers
	Reading:	Chapters 8, 7 (timers only)

[Session 4/5]	`4/5`	The Document Object Model The Document object The Image object Creating an image rollover effect The Form object The elements Input object Common properties and methods The Select and option objects Interacting with HTML form elements Validating data entered in a form
	Reading:	Chapters 9 (first half), 11

[Session 6]	`6`	Midterm Exam Core DOM and DHTML Effects Cross browser challenges Core DOM in modern W3C compliant browsers The HTMLElement Object The element Style Object Accessing HTML elements Altering the content of HTML elements Altering the style of HTML elements Hiding and showing content Dynamically creating HTML elements & attributes Unobstrusive JavaScript
	Reading:	Chapter 9 (second half), 10

	`CSSa CSSb`	CSS - Cascading Style Sheets Structure of a CSS rule Inline, embedded and external CSS Creating style sheets Applying styles to your HTML CSS selectors Class and Id selectors Cascading and Inheritance rules CSS Properties and Values
	Reading:	Online @ www.w3schools.com/css

[Session 7]	`7`	JavaScript built-in objects The Math object The String object String manipulation The Array object Sorting arrays with additional helper functions The Date object Date manipulation Conversion between data types
	Reading:	Chapters 5, 6, 7

[Session 8]	`8`	What is a cookie? The structure of HTTP cookies Storing data in a cookie Transient vs. permanent cookies Retrieving data from cookies HTML5 Web Storage Working with sessionStorage and localStorage
	Reading:	Chapter 13

[Session 9]	`9`	Web Services - Full Stack Development Basic client/server web communication The HTTP request/response paradigm Asynchronous server communication Advantages of asynchronous processing Ajax - Asynchronous JavaScript and XML The XMLHttpRequest Object XML data streams JSON data streams Ajax examples The Fetch command Full Stack Web Services The role of a Web Server Example of Web Services in Perl,Python,PHP and Java
	Reading:	Chapter 12, 14

[Session 10]	`10`	Final Exam Final Project Class Presentations

[Extra]	`OO`	JavaScript Object Oriented Concepts. Objects vs. Classes. Defining Object Constructors. Defining Properties and Methods. Instantiating Objects. Class vs. Instance properties and methods. The "This" keyword. Defining Object prototype.
	Reading:	Chapter 9 (Javascript - The Definitive Guide)

[Extra]	`jQuery`	jQuery - JavaScript Library Downloading and using jQuery library Typical tasks you perform with jQuery Selecting elements from the DOM Changing element content Adding/Changing/Removing attributes Adding/Removing/Toggling CSS classes Adding/Changing CSS properties Adding/Replacing/Removing elements jQuery built-in animation effects Working with element Set Working with arrays and objects
	Reading:	Chapter 16, 17