Intro to JavaScript

In this README:

• Course Outline
• For Students
• For Teachers

The course is taught in 2 days. Each day's class is 4-hours long. Each of the slides and practice files are customizable according to the needs of a given class or audience.

Class 1

Introduction to JavaScript and Basic Programming Concepts

An overview of the history of JavaScript, what it is, and how it interacts with the browser. Covers basic JavaScript concepts including variables, data types, and functions.

Control Flow

Introduces boolean variable, if/then statements, loops, and arrays.

Class 2

Introduction to the DOM

Introduces the Document Object Model (DOM) and how to use JavaScript to interact with it. Includes finding and modifying nodes.

Events, Forms, and Animations

Introduces events, listening functions, form inputs, and basic animations.

For Students

Course description

JavaScript is the world's most popular programming language for a reason -- it's the primary way to build interaction on the web. Learning JavaScript is a logical next step once you've learned HTML/CSS.

Many programming courses end up glossing over some of the tricky words -- 'variable', 'object', 'method' -- this course is especially designed for beginners new to programming concepts, so you'll learn to program with JavaScript. If those words are confusing to you now, no worries! You're exactly who we want to teach.

In this class, we will be covering: basic development concepts, JavaScript, dynamic HTML, and animations and events. Students will exit this class with a good grasp of basic programming principles and the knowledge of how to manipulate HTML elements.

Prerequisites:

You should have: (a) taken Intro to HTML/CSS, or (b) have a working knowledge of HTML

This course is specifically for beginners and we advise experienced developers to not take this class.

Tech requirements:

• Your laptop (Mac, PC, or Linux are all okay).
• A modern web browser - either Chrome or Firefox.
• A text editor. We recommend Sublime Text because it's free and available for Mac, PC, and Linux.

Have a question?

Feedback, fixes and suggestions are welcome! Please post an issue or email [email protected].

For Teachers

Contributing

Feedback, fixes and suggestions are welcome! Please post an issue or submit a pull request with any changes.

Theme customization

You can change theme colors by changing the theme css to any of the following options:

  <link rel="stylesheet" href="css/theme/default.css" id="theme">
  <link rel="stylesheet" href="css/theme/light.css" id="theme">
  <link rel="stylesheet" href="css/theme/sunny.css" id="theme">
  <link rel="stylesheet" href="css/theme/cool.css" id="theme">

You can change the text editor theme by changing the highlight.js css to the following options:

  <link rel="stylesheet" href="lib/css/dark.css">
  <link rel="stylesheet" href="lib/css/light.css">

You can change transition by changing the reveal transition property in Reveal.initialize

  Reveal.initialize({
  				transition:  'default', // default/cube/page/concave/zoom/linear/none
  			});