We may earn an affiliate commission when you visit our partners.

Interactivity with JavaScript

Colleen van Lent, Ph.D. and Charles Russell Severance

If you want to take your website to the next level, the ability to incorporate interactivity is a must. But adding some of these types of capabilities requires a stronger programming language than HTML5 or CSS3, and JavaScript can provide just what you need. With just a basic understanding of the language, you can create a page that will react to common events such as page loads, mouse clicks & movements, and even keyboard input.

This course will introduce you to the basics of the JavaScript language. We will cover concepts such as variables, looping, functions, and even a little bit about debugging tools. You will understand how the Document Object Model (DOM) is used by JavaScript to identify and modify specific parts of your page. After the course, learners will be able to react to DOM Events and dynamically alter the contents and style of their page. The class will culminate in a final project - the creation of an interactive HTML5 form that accepts and verifies input.

This can be completed as the third or fourth course in the Web Design For Everybody specialization.

Enroll now

Or subscribe to Coursera Plus

And get unlimited access to Coursera

What's inside

Syllabus

Week One: Data Types

If you haven't use a traditional programming language before, this first week is key. Before we begin with the how, we will talk about the why, mainly why we want to use JavaScript. The main reason is that it is very easy for JavaScript to work with the DOM. And easy is always a great way to start. Speaking of starting out, it is also always more fun when our code actually does something we can see, so we will jump quickly into different ways we can generate output. It won't be flashy yet, but it will be a great way to get your feet wet with traditional programming. After that we go back to the basics of how a computer uses data. We begin with variables, expressions, and operators.

Week Two: Reacting to Your Audience

If you have written HTML code in the past, hopefully you have fallen into the great habit of validating your code -- making sure that you close all of your open tags. There are other rules that you may or may not have been following as well, for instance the importance of using each id attribute only once per page. This is called writing "clean" code. The reasoning and importance of following these rules becomes clear as we begin to manipulate the different components of your webpage based on the the actions of the person interacting with your page. In particular you will learn about the JavaScript Mouse Events and Touch Events. This week's materials will end with a photo gallery example that you can create along with me.

Week Three: Arrays and Looping

This week we will delve into more complex programming concepts: arrays and looping. Arrays allow you to represent groups of related information. Looping provides efficiency and flexibility to your programs. Using both we will expand upon the photo gallery example.

Week Four: Using JS for Interactive Images

This week is all about putting concepts together to do "cool" things. And we even stop for a second to talk about the the trade-off between cool things and accessibility. The final project this week will be a new version of your coding project in Week 2. You will make an interactive photo gallery from your own images and will add the functionality of keyboard accessibility to it.

Good to know

Know what's good

, what to watch for

, and possible dealbreakers

Introduces JavaScript, which is very useful to work with the DOM

Teaches how JavaScript can react to mouse clicks, movements, and keyboard input

Provides a foundation in programming by covering variables, expressions, and operators

Develops core programming skills through hands-on practice

Designed for learners with a basic understanding of HTML5 and CSS3

Save this course

Save Interactivity with JavaScript to your list so you can find it easily later:

Save

Reviews summary

Interactive javascript

Learners say this course is primarily for beginners and those new to JavaScript. It's a good starting point for those looking to develop skills in web development. The course is well organized with clear explanations and examples. Students will learn the basics of JavaScript syntax and how to write code for interactivity in web pages. Instructor Colleen Van Lent is highly praised for her engaging assignments and engaging teaching style.

Students will learn the basic syntax of JavaScript, including variables, data types, operators, and control flow.

"I was not a "noob" in programming, but I always felt that I skipped Javascript quickly, so the concepts were not clear enough."

"This course is for those who have zero idea about programming languages and want to learn basics of JavaScript."

"I have never seen such a good professor, I already took one java script course before this but did not understood anything but Prof. Collen was really good at conveying lectures and it helped me learn a lot."

The course is designed for beginners and provides a good introduction to JavaScript for those with little to no programming experience.

"This course is for those who have zero idea about programming languages and want to learn basics of JavaScript."

"It's an awesome course to understand the basic fundamentals of web development."

"As a total beginner I found this course the right level to be able to learn and to know what to search to be able to use JavaScript in the future."

The engaging assignments help reinforce the concepts learned in the lectures and provide opportunities for hands-on practice.

"I really enjoyed the course, it helped me a lot to build my basics of javascript syntax and how to use functions, array and looping."

"I had a great time with this course. Thanks again to Colleen and University of Michigan for offering a great experience :)."

The course provides a solid foundation in JavaScript concepts and fundamentals.

"It was a real pleasure learning and practicing with Colleen."

"I really like the structure of the course."

The instructor, Colleen Van Lent, is highly praised for her teaching skills, clarity, and ability to make the material accessible.

"Colleen is such a charming and knowledgable instructor."

"Colleen is one of the best Lectures, who make understanding things easier and always go straight to the point."

"She continued teaching even when she was injured."

Some learners have noted that the course content is outdated and does not cover the latest JavaScript features and syntax.

"This course is really good, it covers the basics of JavaScript, it's syntax and all. So as a beginner it's a great place to start using Javascript in your webpages, and continuing exploring about this topic further on."

"The course content is not good enough to learn more about javascript."

The course has been criticized for its limited coverage of JavaScript and lack of in-depth explanations.

"This course is not as comprehensive. The assignments were a lot easier and took very little time."

"This course explains the basics of JavaScript in using it in collaboration with HTML and CSS for helping in designing web pages."

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Interactivity with JavaScript with these activities:

Review JavaScript Basics

Show steps

To help make the course material easier to understand it will be helpful to refresh yourself on the basics of JavaScript.

Browse courses on JavaScript

Show steps

Go over the basics of JavaScript syntax
Review the different data types in JavaScript
Practice writing simple JavaScript functions

Review DOM Manipulation

Show steps

Reviewing DOM manipulation techniques will help you better understand how JavaScript interacts with the page.

Browse courses on JavaScript

Show steps

Go over the basics of the DOM
Practice selecting and modifying elements in the DOM
Review event handling in JavaScript

Attend JavaScript Meetups

Show steps

Attending meetups will allow you to connect with other JavaScript developers, learn about new technologies, and share your knowledge.

Browse courses on JavaScript

Show steps

Find local JavaScript meetups
Attend meetups regularly
Network with other developers

Five other activities

Expand to see all activities and additional details

Show all eight activities

Interactive Coding Tutorials

Show steps

Following along with some of these guided tutorials will help you practice concepts introduced in the course while creating a working interactive webpage.

Browse courses on JavaScript

Show steps

Choose a beginner friendly Javascript video tutorial
Follow the tutorial and make sure to practice the examples
Complete the tutorial and present your work to the group

JavaScript Resource Compilation

Show steps

By creating a compilation of online resources you will be able to quickly reference the best tutorials, articles, and documentation when needed.

Browse courses on JavaScript

Show steps

Find and collect useful JavaScript resources
Organize the resources into different categories
Share the compilation with others

JavaScript Coding Practice

Show steps

Solving JavaScript coding problems regularly will increase your problem solving skills and help you become more efficient at coding.

Browse courses on JavaScript

Show steps

Select a JavaScript practice website or textbook
Work on solving different types of Javascript problems
Review solutions and understand the different ways to approach a problem

Interactive JavaScript Project

Show steps

Building an interactive project will give you hands-on experience with the concepts taught in the course and will push you to apply your knowledge in a practical setting.

Browse courses on JavaScript

Show steps

Brainstorm an interactive webpage idea
Design and plan the layout of the page
Write the JavaScript code to make it interactive
Test and debug the code
Deploy the webpage and share it with others

Mentor Junior Developers

Show steps

Mentoring others will help solidify your knowledge, develop soft skills, and contribute to the community.

Browse courses on JavaScript

Show steps

Volunteer as a mentor on a coding platform
Answer questions in forums and discussion boards
Lead study groups and workshops

Career center

Learners who complete Interactivity with JavaScript will develop knowledge and skills that may be useful to these careers:

Web Developer

Web Developers have the technical ability to design and build websites, and they are in high demand. With JavaScript being the programming language of the web, this course will help you build a foundation JavaScript. You will learn the basics of the language, such as data types, variables, and loops, as well as how to use the Document Object Model (DOM) to identify and modify specific parts of your page. This course also includes a final project where you will create an interactive HTML5 form that accepts and verifies input.

See salaries and explore the career path for Web Developer

Front-End Developer

Front-End Developers are responsible for the design and implementation of the user interface of a website. This course will help you build a foundation in JavaScript, which is the programming language of the web. You will learn the basics of the language, such as data types, variables, and loops, as well as how to use the Document Object Model (DOM) to identify and modify specific parts of your page. This course also includes a final project where you will create an interactive HTML5 form that accepts and verifies input.

See salaries and explore the career path for Front-End Developer

Full-Stack Developer

Full-Stack Developers are responsible for both the front-end and back-end development of a website. This course will help you build a foundation in JavaScript, which is the programming language of the web. You will learn the basics of the language, such as data types, variables, and loops, as well as how to use the Document Object Model (DOM) to identify and modify specific parts of your page. This course also includes a final project where you will create an interactive HTML5 form that accepts and verifies input.

See salaries and explore the career path for Full-Stack Developer

Software Engineer

Software Engineers design, develop, and maintain software applications. This course will help you build a foundation in JavaScript, which is one of the most popular programming languages in the world. You will learn the basics of the language, such as data types, variables, and loops, as well as how to use the Document Object Model (DOM) to identify and modify specific parts of your page. This course also includes a final project where you will create an interactive HTML5 form that accepts and verifies input.

See salaries and explore the career path for Software Engineer

Data Scientist

Data Scientists use data to solve problems and make predictions. JavaScript is a popular programming language for data science, and this course will help you build a foundation in the language. You will learn the basics of the language, such as data types, variables, and loops, as well as how to use the Document Object Model (DOM) to identify and modify specific parts of your page. This course also includes a final project where you will create an interactive HTML5 form that accepts and verifies input.

See salaries and explore the career path for Data Scientist

Web Analyst

Web Analysts collect and analyze data to improve the performance of websites. JavaScript is a popular programming language for web analytics, and this course will help you build a foundation in the language. You will learn the basics of the language, such as data types, variables, and loops, as well as how to use the Document Object Model (DOM) to identify and modify specific parts of your page. This course also includes a final project where you will create an interactive HTML5 form that accepts and verifies input.

See salaries and explore the career path for Web Analyst

UX Designer

UX Designers are responsible for the user experience of a website or app. This course will help you build a foundation in JavaScript, which is the programming language of the web. You will learn the basics of the language, such as data types, variables, and loops, as well as how to use the Document Object Model (DOM) to identify and modify specific parts of your page. This course also includes a final project where you will create an interactive HTML5 form that accepts and verifies input.

See salaries and explore the career path for UX Designer

Information Architect

Information Architects design and organize the content on a website or app. JavaScript is a popular programming language for information architecture, and this course will help you build a foundation in the language. You will learn the basics of the language, such as data types, variables, and loops, as well as how to use the Document Object Model (DOM) to identify and modify specific parts of your page. This course also includes a final project where you will create an interactive HTML5 form that accepts and verifies input.

See salaries and explore the career path for Information Architect

Project Manager

Project Managers plan and execute projects. JavaScript is a popular programming language for project management, and this course will help you build a foundation in the language. You will learn the basics of the language, such as data types, variables, and loops, as well as how to use the Document Object Model (DOM) to identify and modify specific parts of your page. This course also includes a final project where you will create an interactive HTML5 form that accepts and verifies input.

See salaries and explore the career path for Project Manager

Quality Assurance Analyst

Quality Assurance Analysts test software to ensure that it meets requirements. JavaScript is a popular programming language for quality assurance, and this course will help you build a foundation in the language. You will learn the basics of the language, such as data types, variables, and loops, as well as how to use the Document Object Model (DOM) to identify and modify specific parts of your page. This course also includes a final project where you will create an interactive HTML5 form that accepts and verifies input.

See salaries and explore the career path for Quality Assurance Analyst

Technical Writer

Technical Writers create documentation for software and other technical products. JavaScript is a popular programming language for technical writing, and this course will help you build a foundation in the language. You will learn the basics of the language, such as data types, variables, and loops, as well as how to use the Document Object Model (DOM) to identify and modify specific parts of your page. This course also includes a final project where you will create an interactive HTML5 form that accepts and verifies input.

See salaries and explore the career path for Technical Writer

Database Administrator

Database Administrators manage and maintain databases. JavaScript is a popular programming language for database administration, and this course will help you build a foundation in the language. You will learn the basics of the language, such as data types, variables, and loops, as well as how to use the Document Object Model (DOM) to identify and modify specific parts of your page. This course also includes a final project where you will create an interactive HTML5 form that accepts and verifies input.

See salaries and explore the career path for Database Administrator

Business Analyst

Business Analysts analyze business processes and identify opportunities for improvement. JavaScript is a popular programming language for business analysis, and this course will help you build a foundation in the language. You will learn the basics of the language, such as data types, variables, and loops, as well as how to use the Document Object Model (DOM) to identify and modify specific parts of your page. This course also includes a final project where you will create an interactive HTML5 form that accepts and verifies input.

See salaries and explore the career path for Business Analyst

Systems Analyst

Systems Analysts design and implement computer systems. JavaScript is a popular programming language for systems analysis, and this course will help you build a foundation in the language. You will learn the basics of the language, such as data types, variables, and loops, as well as how to use the Document Object Model (DOM) to identify and modify specific parts of your page. This course also includes a final project where you will create an interactive HTML5 form that accepts and verifies input.

See salaries and explore the career path for Systems Analyst

Network Administrator

Network Administrators manage and maintain computer networks. JavaScript is a popular programming language for network administration, and this course will help you build a foundation in the language. You will learn the basics of the language, such as data types, variables, and loops, as well as how to use the Document Object Model (DOM) to identify and modify specific parts of your page. This course also includes a final project where you will create an interactive HTML5 form that accepts and verifies input.

See salaries and explore the career path for Network Administrator

Reading list

We've selected 30 books that we think will supplement your learning. Use these to develop background knowledge, enrich your coursework, and gain a deeper understanding of the topics covered in Interactivity with JavaScript.

Java in a Nutshell

Save

Comprehensive guide to JavaScript, covering everything from the basics to advanced topics. It's an excellent resource for both beginners and experienced JavaScript developers, and it's written in a clear and concise style.

Java in a Nutshell

Kindle Edition

Eloquent JavaScript, 3rd Edition

Save

More comprehensive introduction to JavaScript. It covers more advanced topics, such as closures, prototypes, and asynchronous programming. It also includes a number of challenges and exercises.

Interactivity with JavaScript

What's inside

Syllabus

Good to know

Save this course

Reviews summary

Interactive javascript

Activities

Career center

Reading list

Share

Similar courses