JavaScript for Beginners

JavaScript for Beginners

Wifi network: CrossCamp.us Members

Wifi password: innovate

Class Slides

gdila.org/js4beginners

Thank you

Welcome!

Tell us about yourself!

Follow along!

What is JavaScript?

Why learn JavaScript?

• Beginner-friendly
• Large community, online and off
• Most in-demand skill in tech today
  • Salary range $50K-$125K, $90K average salary

Let's Develop It!

Code Pen

• Write some text
• Add a button
• Do something when we click the button

Functions

Functions are reusable pieces of code.

Using Functions

First, declare the function.

<script>
  function turtleFact() {
    document.write('A turtle\'s lower shell is called a plastron.');
  }
</script>

Then, use it as many times as you want!

<script>
  turtleFact();
</script>

Let's Develop It

Code Pen

• Write a function
• Call the function when we click the button
• Create multiple buttons and functions

Let's Develop It

Code Pen

• Add a div to the page
• Style the div
• Write a function to change the text in the div
• Call the function when we click the button

Variables

A variable is a place to store values

Variable Values

• When you first create a variable, it does not have a value (it is null).
• You can set a value for a variable.
• Variables can hold different types of information, like words, numbers, and collections of data.
• The value of a variable can change over time.

Naming Variables

• The variable name is case-sensitive.
• A new variable needs to have a unique name.
• Variable names need to start with a letter, $, or _.
• Variable names can only be made of letters, numbers, $, or _.

Declaring a Variable

To declare (create) a variable, just type the word var and the variable name.

<script>
  var numberOfKittens;
</script>

It is a good idea to give your variable a starting value. This is called initializing the variable.

<script>
  var numberOfKittens = 5;
</script>

Using a Variable

Once you have created a variable, you can use it in your code. Just type the name of the variable.

<script>
  var numberOfKittens = 5;
  document.write(numberOfKittens);
</script>

Let's Develop It

Code Pen

• Rewrite our text function to use variables

Let's Develop It

Code Pen

• Add a text input to the page
• Get the text input's value
• Write the value out to the div on the page

Variable Scope

The scope of a variable is how long the computer will remember it.

Global Scope

A variable declared outside a function has a global scope and can be accessed anywhere, even in a function.

var awesomeGroup = 'Girl Develop It'; //Global scope

function whatIsAwesome() {
  document.write(awesomeGroup + ' is pretty awesome.'); //Will work
}

whatIsAwesome();

Local Scope

A variable declared within a function has a local scope and can only be accessed within that function.

function whatIsAwesome() {
  var awesomeGroup = 'Girl Develop It'; //Local scope
  document.write('I made a variable called awesomeGroup with a value of ' + awesomeGroup); //Will work
}

whatIsAwesome();
document.write(awesomeGroup + ' is pretty awesome.'); //Won't work

Let's Develop It

Code Pen

• Experiment with variable scope

The if statement

Use if to decide which lines of code to execute, based on a condition.

if (condition) {
  // statements to execute
}

var bananas = 5;
if (bananas > 0) {
  document.write('You have some bananas!');
}

Let's Develop It

Code Pen

• Change our function so it only does something if a condition is met

The if/else statement

Use else to provide an alternate set of instructions.

var age = 28;
if (age >= 16) {
  document.write('Yay, you can drive!');
} else {
  document.write('Sorry, but you have ' + (16 - age) + ' years until you can drive.');
}

Let's Develop It

Code Pen

• Change our function so it does something different if the condition isn't met

The if/else if/else statement

If you have multiple conditions, you can use else if.

var age = 20;
if (age >= 35) {
  document.write('You can vote AND hold any place in government!');
} else if (age >= 25) {
  document.write('You can vote AND run for the Senate!');
} else if (age >= 18) {
  document.write('You can vote!');
} else {
  document.write('You can\'t vote, but you can still write your representatives.');
}

Let's Develop It

Code Pen

• Change our function so it does something different in several different conditions

Let's Develop It

Code Pen

• Use JS to change the style of elements on the page

Thank you!

Questions?