- [Instructor] Before we start writing JavaScript, we need to know the basic rules of the language. Some of these are hard rules that define how the language itself works, others are conventions that decide how we write JavaScript, so it's easier to read for ourselves, and for others. Rule number one JavaScript is case sensitive. This means when you use your shift or capslock keys, it really matters. Unlike in HTML and CSS, where you can use upper and lower case letters willy-nilly, in JavaScript the casing of a word matters.
If, for example, you create a variable named greenDuck, with a capitalized D, and then try to reference it with a lowercase d, JavaScript sees them as two completely different things and you get an error. This case sensitivity matters everywhere except inside quoted strings of texts. For example, you may have noticed when we got the date from the browser, we typed out var date equals new date with a capitalized D, well, if you try to do the same with a lowercase d, you get an error.
That's because new date with a capitalized D, calls a constructor, new date with a lowercase d, is nothing. Rule number two, speaking of upper and lowercase, the agreed upon naming convention for JavaScript is to use what's known as camelCase. That means we can catenate or squish together words, and separate them by capitalizing the first letter of each word. You'll see this in the methods we use, like getElementByTagName, and in variables I write like greenDuck, or aliceTheCamelHasFiveHumps, and many other things.
The general rule is to start variable, function and method names with a lowercase letter, class and object names with a capitalized letter, and constants are typically all caps. Follow these conventions, and your scripts will be consistent with what others are doing, and much easier to understand. Rule number three, JavaScript does not care about whitespace but you should. When we write JavaScript we provide instructions in the form of statements. Each statement is a separate instruction, so for example, create a variable, add the current date to that variable, output the current date as HTML inside the body element et cetera.
How exactly you'll lay out this in your document doesn't matter much to the browser. You can add as much or as little whitespace, that is actual space between lines and elements. The problem is, if you don't do this consistently, your code will be really hard to read for humans and you are humans, so this matters to you. Therefore, even though we don't have to, we add whitespace to keep our code accessible to non-computers. Each statement goes in its own line, properties within functions with multiple lines are indented and so on.
The end result is code that is easy to maintain. Rule number four: End each statement with a semicolon. This one is controversial. Technically JavaScript doesn't care if you use semicolons or not, except for a few specific situations. But, if you don't use them, your code will be very hard to read. So, it's good practice to add semicolons at the end of each statement to keep your code structured. Now I say this is controversial because you'll find lots of people who will tell you, using semicolons is as crazy as eating a chocolate bar with a knife and fork.
That's their opinion. My opinion is, code should be readable and maintainable, and semicolons help in both of these regards. Semicolons are a matter of opinion, do whatever works best for you. Rule number five: Use comments liberally. Comments are strings of text in your code that are ignored by the browser. They're there for you, the human being, to leave notes to yourself, and others, about your code. In JavaScript, you create single line comments by starting the line with two forward slashes, and multi-line comments starting with forward slash asterisk, and ending with asterisk forward slash, just like in CSS.
Use comments to explain to yourself and anyone else looking at the code what's going on, so you can return to the code years later and still understand it. You'll see me use lots of comments in my code throughout the course, and you should do the same.
Author
Updated
4/1/2019Released
5/17/2017Through practical examples and mini-projects, this course helps you build your understanding of JavaScript piece by piece, from core principles like variables, data types, conditionals, and functions through advanced topics including loops, closures, and DOM scripting. Along the way, you will also be introduced to some ES6 and the basics of JavaScript libraries.
- What is JavaScript?
- Working with data
- Using functions and objects
- Working with JavaScript and the DOM
- Changing DOM elements
- Handling events
- Working with loops
- Making images responsive using markup
- Troubleshooting code
- Validating functionality
- Minifying JavaScript
Skill Level Beginner
Duration
Views
Related Courses
-
Introduction
-
Welcome1m 7s
-
-
1. JavaScript: An Introduction
-
What is JavaScript?2m 38s
-
-
2. The Basics
-
Introducing the browser console10m 31s
-
3. Working with data
-
Data types in JavaScript4m 2s
-
Arrays2m 20s
-
4. Functions and Objects
-
Functions in JavaScript3m 28s
-
Build a basic function3m 29s
-
Anonymous functions5m 11s
-
Variable scope3m 17s
-
ES2015: let and const6m 12s
-
Make sense of objects3m 19s
-
Object constructors6m 16s
-
Closures8m 11s
-
-
5. JavaScript and the DOM, Part 1: Changing DOM Elements
-
Access and change elements4m 33s
-
Access and change classes3m 45s
-
Access and change attributes4m 53s
-
Add DOM elements6m 56s
-
6. Project: Create an Analog Clock
-
Use CSS to move clock hands3m 49s
-
7. JavaScript and the DOM, Part 2: Events
-
What are DOM events?1m 31s
-
Some typical DOM events1m 59s
-
Add and use event listeners6m 51s
-
-
8. Project: Typing Speed Tester
-
Rundown of HTML markup2m 58s
-
Build a count-up timer5m 56s
-
Add a reset button5m 3s
-
-
9. Loops
-
Loops3m 37s
-
Looping through arrays4m 7s
-
Break and continue loops7m 9s
-
-
10. Project: Automated Responsive Images Markup
-
Project breakdown1m 55s
-
Rundown of project setup3m 26s
-
-
11. Troubleshooting, Validating, and Minifying JavaScript
-
Troubleshooting JavaScript7m 20s
-
Online script linting5m 57s
-
Automate script linting8m 24s
-
Online script minification2m 50s
-
Automate script minification2m 24s
-
12. Bonus Chapter: Ask the Instructor
-
What are arrow functions?3m 11s
-
What does the % symbol do?3m 47s
-
-
Conclusion
-
Next Steps1m 55s
-
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.
CancelTake notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: How to write JavaScript: A crash course