CSS Selectors Guide:
Intro to Javascript Notes: Mr. Kay, Engineering & Design
1. What's your name?
Hey! Let's get to know each other. What's your name?
INSTRUCTIONS
Type it with quotes around it, like this:"Ryan" and then click Save & Submit Code.
Javascript Code (script.js):
"Timothy"
2. Finding the length
Well done! How long is your name?
INSTRUCTIONS
Find out by typing your name in quotes and ending it with .length . Click Save & Submit Code afterwards (do this from now on after you complete the instructions).
For me, that'd be "Leng".length
script.js:
"Timothy".length
Results: 7
3. Basic math
Great job! Now, let's do some math. You can do math through programming!
INSTRUCTIONS
Calculate any addition operation you like. Add any two numbers in the form3 + 4.
script.js:
45 + 20
Results: 65
4. Numbers and more
See what happened? You can use the command line to do basic math operations. Try playing around some more.
INSTRUCTIONS
You can use * for multiplication and/ for division if you want. Enter another valid expression to pass this lesson.
Script.js:
(5*5)/5
Results: 5
5. Error: does not compute!
There are some things you can't do in the console. Computers only speak certain languages, like the one you've been using today: JavaScript!
If you use words that aren't in the JavaScript language, it will get confused and give you an error.
INSTRUCTIONS
Try to confuse the interpreter by using a word it doesn't know, like eggplant. It will give you a ReferenceError.
Script.js:
Whatever!
ReferenceError: Whatever! is not defined
Well done. You have confused the computer!
6. Editor and comments
So far, everything you've done has been one line in the editor. But interesting programs involve many lines of code.
You can write many lines of code, press the Save & Submit Code button, and the output will show up in the results box to the right.
You may notice that the box already has some code in it, and each line starts with//. Anything after a // is called a comment and is ignored by the computer.
Comments are extremely useful for explaining tricky parts of your code or leaving yourself reminders. You can also temporarily disable lines of code by commenting them out, or adding // in front of them.
INSTRUCTIONS
The computer will ignore the code onlines 1-2, since it is commented out.
On line 4, find the length of the word "cake" and multiply it by 9.
Hint
We can use .length after "cake" to find the length. Then we can multiply it by 9 by using *.
If you comment out your new code, it won't run! Make sure it's not commented out.
Script.js:
// This is a comment that the computer will ignore.
// It is for your eyes only!
"cake".length * 9
Results: 36
7. What am I learning?
This is JavaScript (JS), a programming language. There are many languages, but JS has many uses and is easy to learn.
What can we use JavaScript for?
• make websites respond to user interaction
• build apps and games (e.g. blackjack)
• access information on the Internet (e.g. find out the top trending words on Twitter by topic)
• organize and present data (e.g. automate spreadsheet work; data visualization)
INSTRUCTIONS
Press Save & Submit Code to see an example of how JavaScript can be interactive!
8. Interactive JavaScript
What we just saw was a fun example of how JavaScript can be interactive. Try it yourself!
Examples:
confirm("I feel awesome!");
confirm("I am ready to go.");
These boxes can be used on websites to confirm things with users. You've probably seen them pop up when you try to delete important things or leave a website with unsaved changes.
INSTRUCTIONS
Write your own message that you want the user to confirm.
Script.js:
// Also try the Q&A forum to get help
// The link is on the bottom left of the page!
confirm("Are you ready to learn Javascript?");
Results:
Pops up a window with your message, “Are you ready to learn Javascript?”, option to click OK or cancel.
9. What is programming?
Programming is like writing a list of instructions to the computer so it can do cool stuff with your information.
Programs can't yet make your bed, but they can do math, keep track of your bank account, or send a message to a friend.
To do any of these actions, the program needs an input. You can ask for input with a prompt.
Examples:
1. prompt("What is your name?");
2. prompt("What is Ubuntu?");
INSTRUCTIONS
Use the prompt command to ask the user where they are from.
Hint
Even tiny mistakes or typos can cause errors. Make sure to check that your punctuation is right and every opened bracket or brace is closed.
Script.js:
prompt("Where are you from?");
Results in a window opening up with the prompt, “Where are you from?” and allows you to enter data and click OK.
10. Data Types I & II: Numbers & Strings
Data comes in various types. You have used two already!
a. numbers are quantities, just like you're used to. You can do math with them.
b. strings are sequences of characters, like the letters a-z, spaces, and even numbers. These are all strings: "Ryan","4" and "What is your name?" Strings are extremely useful as labels, names, and content for your programs.
To make a number in your code, just write a number as numerals without quotes: 42,190.12334.
To write a string, surround the string with quotes: "What is your name?"
INSTRUCTIONS
Write a string with at least 3 words and find the length of the string. Length counts every character in the string—including spaces!
Hint
To check the length of something, we type "string".length. Remember a string might not always be a word—you can put almost any character in between quotes to make a string.
Script.js:
"Help me I am falling and I can't get up".length Results: 39
11. Data Type III: Booleans
The third type of data is a boolean(pronounced "bool-ee-un" and named afterGeorge Boole). A boolean can have only two values, true or false.
You can use them in your code by making statements that evaluate to true orfalse.
For example:
1. 10 > 3 evaluates to true
2. 5 < 4 is just crazy talk, so it evaluates to false
Booleans are extremely useful because later they will let us run certain parts of our code only if certain conditions are true. For example, ATMs evaluate [the amount in your bank account] > 0 and will only give you cash if the answer is true.
INSTRUCTIONS
Write code that will evaluate true ifI'm coding like a champ! has more than 10 characters.
You can just write the condition into your editor and it will be evaluated for you.
Hint
You can use "string".length to find the number of characters in your string.
Your code should look something like this:
"I'm coding like a champ!".length > 10
Script.js:
"I am coding like a champ".length > 10; Results: True
12. Using console.log
You may have noticed that the interpreter doesn't print out every single thing it does. So if we want to know what it's thinking, we sometimes have to ask it to speak to us.
console.log() will take whatever is inside the parentheses and log it to the consolebelow your code—that's why it's calledconsole.log()! This is commonly called printing out.
INSTRUCTIONS
Please print the following two console.log statements at the same time. Type one on line 1 and the other on line 2. Then press Save & Submit Code.
console.log(2 * 5)
console.log("Hello")
Hint
1. Make sure to include quotes for strings, and no quotes for numbers.
2. Check your parentheses carefully.
3. Make sure you are running two console.log statements at the same time.
On line 1, type out the first statement. Then on line 2, type out the second statement. Then press run!
Script.js
console.log(2*5)
console.log("Hello")
Results:
10
Hello
13. Comparisons
We've learned about three data types: numbers, strings, and booleans. Let's learn about comparison operators and how they relate to data types.
List of comparison operators:
• > Greater than
• 4);
console.log("Xiao Hui".length8);
console.log(8*2===16);
console.log(8*3===16);
console.log(8*1===16);
Results:
true
true
true
true
false
false
14. Decisions, decisions
Nice work on the comparisons! Now let's take a look at how useful they can be.
You can use comparisons plus booleans to decide whether a block of code should run. This is called an if statement orconditional statement.
Take a look at the code on the right. The computer first looks at line 1. If the condition (in this case, 100 < 2) is true, then it executes the code inside the curly braces{}.
If the condition is false, it skips the code in the curly braces entirely and goes on to the next line, which is line 6.
INSTRUCTIONS
Edit line 1 so that your program will print out both statements.
Hint
If the condition on line 1 executes totrue, it will run the code in between the curly braces.
Script.js
if ( 100 > 2 )
{
console.log("You are good at math!");
}
console.log("Just letting you know: your program got to line 6");
Results:
You are good at math!
Just letting you know: your program got to line 6
15. Computers are smart
Good work with the if statements! Now, we're going to give your robot two options.
Your robot has just come to a fork in the road. It is going to check the program that you wrote to decide which road it should go down.
In code form, that looks kind of like this:
if (this condition is true)
{
// do this code
}
else // "otherwise"
{
// do this code instead
}
Your robot starts on the first line. If the condition is true, it will execute the code in the first set of curly braces, just like last time. This will skip the else block.
But if the condition is false, the robot will skip the first block and execute block afterelse. So the robot executes one piece of code orthe other, depending on the condition in the first line. You're teaching it how to make decisions on its own! Robots grow up so fast. It seems like just yesterday that it was in robotic diapers.
INSTRUCTIONS
1. Fill in a condition on line 1 of the program that will evaluate to false. What will happen to your robot?
2. Fill in some code to run in the elseportion (this will run if the condition is false). Use console.log for this part.
Hint
You can write a condition with an inequality like 10 < 5:
if (10 < 5)
{
// This won't run, since 10 > 5
}
else
{
// This part WILL run!
console.log(/* something */);
}
Script.js:
if (2+2===5)
{
alert("Let's go down the first road!");
}
else
{
// What should we do if the condition is false? Fill in here:
console.log("Jump off a cliff")
}
Results:
Jump off a cliff
16. More practice with conditionals
It is really important to use the right syntax. Try quizzing yourself to see if you have it down. Do as much as you can by yourself, but if you need a reminder, see the Hint button below.
Right now these seem pretty boring because we're using two numbers in the condition. Soon we will be able to use more interesting conditions, like the number of dollars in your bank account, the number of Facebook friends you have, or the name of your cat! We'll be able to compare these things even as they change.
INSTRUCTIONS
Write code that contains an if/elsestatement, just like we did in the last exercise. When your condition istrue, print to the console "I am right". When it is false, print to the console "I am wrong". Make sure your statement evaluates to false so it prints out "I am wrong".
Hint
if ("Leng".length === 4) {
// Do this code
} else { // Otherwise...
// ...do this code instead!
}
Script.js:
// Remember, the order and punctuation matter.
// If you get an error, check carefully, line by line.
// If you're really stuck, see the hint!
if (5 ................
................
In order to avoid copyright disputes, this page is only a partial summary.
To fulfill the demand for quickly locating and searching documents.
It is intelligent file search solution for home and business.