Minor Web Technologies / JavaScript Introduction

Coordinated by: Michel Buffa (Université Côte d'Azur, CNRS, i3S)
 

FORMAT

Online courses and live tutorial sessions

LOCATION

Online

Prerequisites

HTML basics
M1 Computer Science students will have custom projects

Capacity

Up to 60 students

About this minor

Video

 
Summary

LEARNING OUTCOMES

You will learn:
  • How to add JavaScript (JS) code in your Web site/Web app, how to debug it
  • How to make interactive Web sites through the DOM API
  • How to change the CSS styles of HTML5 elements from JavaScript
  • How to deal with HTML5 forms
  • How to make basic graphics and animations using the HTML5 canvas
  • How to use the basic concepts of ES2021, the last iteration of the language: arrays, functions, loops, basic objects


FREE W3C CERTIFICATION
(value 200 euros/dollars)
if you succeed !

This course introduces JavaScript and state-of-the-art Web programming techniques (JEE, HTML5, CSS) used to add interactive features to Web sites, including dynamically updated content, controlled multimedia, and much more. HTML and CSS basics, as well as best Javascript programming practices are introduced by means of many interactive examples, some of which are demonstrated in live coding videos. At the end of the course, students will be able to read the source code of any JavaScript example found on the Web, learn from it, tweak it, and even start contributing to open-source JavaScript projects.

About this course
This computer science course is an initiation to JavaScript programming and has been designed to help Web developers have an understanding of the basic concepts of the language. 

JavaScript lets you add interactive features to your Web sites, including dynamically updated content, controlled multimedia, animated images, and much more.

The main objective of this course is to master JavaScript best practices by means of many interactive examples, some of which are demonstrated in live coding videos.

We’ll use JavaScript within the Web browser. Why JavaScript is worth your time:

  • HTML5, CSS and JavaScript are the “classic three” for developers and designers;
  • It allows you to add interactivity to your Web sites;
  • You can use JavaScript and HTML5 APIs to create custom graphics and animation, and to master multimedia using audio and video players, music and sound effects;
  • It is powerful, easy to learn, and quick to write;
  • It has great tools (editors, runtimes, lint tools, browsers, and third party libraries) as well as great online support through plenty of active open source communities.

At the end of the course, we expect that you will be able to read the source code of any JavaScript example found on the Web, learn from it, tweak it, and even – why not? – start contributing to open-source JavaScript projects. This introductory course will make you think like a JavaScript developer.

Syllabus
Module 1: Introduction to JavaScript
  • JavaScript, HTML and CSS
  • JavaScript overview
  • Your first HTML/CSS/JS page
  • Variables, values, functions, operators, and expressions
  • Simple JavaScript examples to play with

Module 2: Adding interactivity to HTML

  • Conditional statements, loops and logical operators
  • Functions and callbacks
  • Handling events
  • The DOM API
  • Let's write a small game

Module 3: Playing with HTML5

  • APIs Arrays and iterators
  • HTML5 multimedia and JavaScript API
  • Displaying a map with the Geolocation API
  • Playing sound samples and music

Module 4: Structuring data

  • Objects, properties and methods
  • Creating multiple objects
  • Organizing the code in separate files
  • Improving the game with ES6 classes

Module 5: Working with forms

  • Built-in JavaScript objects
  • HTML5 tables, forms and input fields
  • The JSON notation
  • Let's create a small application
Lecturer
  • Michel Buffa (Computer Science Department, Université Côte d'Azur, CNRS, i3S)
Evaluation
  • Quizzes (40 % of the final grade) :
    • Embedded quizzes at the end of each online module - Date: free, but before the end of the course.
    • Final exam also as an online quiz - Date: free, but before the end of the course.
  • Two assignments to send (interactive program written in HTML/CSS/JS)
    • One first assignment in the middle of the course schedule - Submission deadline: 15/11/2024
    • One second assignment at the end of the course - Submission deadline: 15/12/2024
    • Each assignment represents 30% of the final grade
Master Informatique Students: Due to a stronger Computer Science background, students from this master will use the same online lectures to learn JavaScript but instead of two assignments they will develop a more complex project (an online action video game). Submission deadline: 15/11/2024 (work in progress) and 15/12/2024 (final) 

SCHEDULE FALL 2024

Mind the evaluation modalities and deadlines in the "Evaluation" tab above.

Links and details about the online sessions, registration to access the online course content, etc. will be sent by email to all students after they have registered.

Date Time slot Room
10/10/2024 18h00-19h00 Online Zoom session
17/10/2024 18h00-19h00 Online Zoom session
24/10/2024 18h00-19h00 Online Zoom session
7/11/2024 18h00-19h00 Online Zoom session
14/11/2024 18h00-19h00 Online Zoom session
21/11/2024 18h00-19h00 Online Zoom session
28/11/2024 18h00-19h00 Online Zoom session
5/12/2024 18h00-19h00 Online Zoom session
​