Campsite Coders

Learn JavaScript

Learn to code and become a Front End Web Developer

Campsite Coders Bootcamp Coding Advenuture

JavaScript Basics

Learn the basics of JavaScript so that you can quickly add animation and interaction capabilities to your website. You can create events that happen when a user click a button, moves their mouse or makes a selection from a dropdown bar. There are so many more things JavaScript can do so let's get started!

JavaScript is a programming language that gives instructions to your website browser telling it how to process a web page. You as a developer will write the code. You'll use HTML to layout the page and then use CSS to add style to the page. You then add JavaScript to make things "happen" on the page. The ACTIONS that happen as a result of an EVENT happening is what a JavaScript programmer defines in code.

JavaScript Syntax

JavaScript is case sensitive. Most words are typed in lowercase. You put quotes around text you want printed to the page. You wrap statements in brackets and wrap commands in parentheses. You end statments with semicolons.

function() {

// start

console.log("Do something"); // This is the statement

} // end

Coding in the Console

The JavaScript console is your trusty sidekick in the world of web development. Think of it as a digital notepad where you can communicate with your code. When you write JavaScript programs, the console allows you to see what's happening behind the scenes. It's where you can check for errors, test out your code, and get feedback instantly. You can print messages, variables, or even the results of your code to the console to better understand how your program is running. It's an invaluable tool for debugging and learning, and as you progress in your JavaScript journey, you'll find yourself using it often to gain insights into your code's behavior."

After you complete the video, please leave a comment (on YouTube) to indicate that you have completed this step.

JavaScript Variables

JavaScript variables are like containers that allow you to store and manage data in your code. Think of them as labeled boxes where you can put different types of information, such as numbers, text, or even more complex stuff like objects. They are crucial in programming because they enable you to work with dynamic data.

After you complete the video, please leave a comment (on YouTube) to indicate that you have completed this step. In the comments, let us know if you understand what variables are.

JavaScript Arrays

Arrays in JavaScript use NUMBERS to identify and access elements. An HTML bullet list contains a list of items. The individual items in the list can be considered elements and the grouping of them an array. You will later learn how to "loop" thru a list of items.

JavaScript Functions

A function is a way to bundle code so that it can be reused. Functions allow us to run the same bundle of code from different pages in our web app. If you write your script in an external javascript file you can then reuse it on any page in your website application by adding a link to that file in the head section of the html page you want to use it on. If you only want the script to run in one page you can add the script inside of the page.

JavaScript Objects

Objects in JavaScript use STRINGS to identify and access elements. These strings are called "keys" or "properties" and the elements they point to are called "values". This is often refered to as "key/value pairs". For example: Jacket{color:blue} "color" is the property and "blue" is the value. An object can have many properties. For example: Jacket{size: large; color:blue; brand: Magellan; }. Using JavaScript, you could write code to change the color of the jacket.

JavaScript Components

Spend some time learning Bootstrap 3/4/5 and look at the components. Learn how to interact with HTML elements on the page, manipulating the DOM using JavaScript. Once you have completed that task, move to the next topic.

Campsite Coders Bootcamp Coding Adventure
Road Map for Coding Adventure One

Campsite Coders

56747 Ewing Rd

Moffat, CO 81143


Campsite Coders logo in footer

Copyright 2023 . All rights reserved