A Smarter Way to Learn JavaScript Flashcards
Chap 1: alert
alert ( “Thanks for your input!” );
String
Chap 2:Variables for Strings
var name = “Bobby”;
name = “Bobby”;
alert(name);
Variables are never enclosed in quotes, and text strings are always enclosed in quotes
Chapter 3:Variables for Numbers
You can also assign a number: example... 1 var originalNum = 23; 2 var numToBeAdded = 7; 3 var newNum = originalNum + numToBeAdded + 34; alert(newNum);
Chapter 4:Variable Names Legal and Illegal
Here are the rest of the rules:
- A variable name can’t contain any spaces.
- A variable name can contain only letters, numbers, dollar signs, and underscores.
- Though a variable name can’t be any of JavaScript’s keywords, it can contain keywords.
- For example, userAlert and myVar are legal.
- Capital letters are fine, but be careful. Variable names are case sensitive. A rose is not a Rose. If you assign the string “Floribundas” to the variable rose, and then ask JavaScript for the value assigned to Rose, you’ll come up empty. I teach the camelCase naming convention. Why “camelCase”? Because there is a hump or two (or three) in the middle if the name is formed by more than one word. A camelCase name begins in lower case. If there’s more than one word in the name, each subsequent word gets an initial cap, creating a hump. If you form a variable name with only one word, like response, there’s no hump. It’s a camel that’s out of food. Please adopt the
camelCase convention. It’ll make your variable names more readable, and you’ll be less likely to get variable names mixed up.
-Examples:
userResponse
userResponseTime
userResponseTimeLimitresponse
Chapter 5:Math expressions: Familiar operators
Math expression: + - * /
1 var num = 10;
2 var anotherNum = 1;
3 var popularNumber = num + anotherNum + 5;
4 alert(popularNumber);
- % is the modulus operator. It gives you the remainder when the division is executed
- Ex: var numberOne = 9 % 3; (=0)
Chapter 6: Unfamiliar operators
Unfamiliar operators: num++; <=> num = num + 1; num--; <=> num = num - 1; var n = 1; var m = n++; => m =1 ; n=2 var k = n--; => k=1 ; n=0 var l= ++n; => l=n=2 var j= --n; => j=n=0
Chapter 7: Eliminating ambiguity
In JavaScript as in algebra, the ambiguity is cleared up by precedence rules. var n = 2 * 3 + 4; =10
Chapter 8: Concatenating text strings
1 var message = "Thanks, "; 2 var userName = "Susan"; 3 var banger = "!"; 4 var customMess = message + userName + banger; 5 alert(customMess);
Chapter 9: Prompts
A prompt box asks the user for some information and provides a response field for her answer. 1 var question = "Your species?"; 2 var defaultAnswer = "human"; 3 var spec = prompt(question, defaultAnswer); 4 alert(spec);
Chapter 10: if statements
var n = prompt("What is your name?");
var m = "Bobby";
if (n === m) { alert("Exactly"); }Chapter 11: Comparison Operators
=== , !== , >< , >= , <= is the comparison Operators
used in numbers, strings, variables, math expressions, and combinations.
Chapter 12:if…else and else if statements
In the style convention I follow, the else part has exactly the same formatting as the if part.As in the if part, any number of statements can execute within the else part.
else if is used if all tests above have failed and you want to test another condition
var n = prompt(“What is your name?”);
var m = “Bobby”;
if (n === m) { alert(“Exactly”); }
else if (n === “Bao”) { alert(“True”); }
else { alert(“No”); }
Chapter 13: Testing sets of conditions
&& (and) test for a combination of conditions in
JavaScript.
|| (or)
if (age > 65 || age < 21 && res === “U.S.”) {
Chapter 14: if statements nested
For readability, a lower level is indented 2 spaces beyond the level above it. (Nested ifs)
if (x === y || a === b) && c === d) { g = h; } else { e = f; }
equal if (c === d) { if (x === y) { g = h; } else if (a === b) { g = h; } else { e = f; } else { e = f; }Chapter 15: Arrays
An Array is For readability, a lower level is indented 2 spaces beyond the level above it.
var n = [1, "m", true];
var m = n{0]; (=1)Chapter 16: Arrays Adding and removing elements
An empty Array: var n = [];
Assign value to it: n[1] = “m”; n[2] = “k”;
pop: you can remove the last element of an array
n.pop();
push: you can add value n.push(“m”, “k”);
Chapter 17: Arrays Removing, inserting, and extracting elements
var n = [“l”, “m”, “k”];
Use the Shift method to remove an element from the beginning of an array. n.shift();
To add one or more elements to the beginning of an array, use the Unshift method. n.unshift(“h”, “a”);
Use the Splice method to insert one or more elements anywhere in an array,while optionally removing one or more elements that come after it n.splice(1, 1, “a”, “b”);
=> n = [“l”, “a”, “b”];
You could make additions without removing any elements. n.splice(1, 0, “a”, “b”); => n = [“l”, “a”, “b”, “m”, “k”];
You can also remove elements without adding any. n.splice(1, 0);
Use the Slice method to copy one or more consecutive elements in any position and put them into a new array
var m = n.slice(1, 3); => m = [“m”, “k”];
Chapter 20:for loops nested
var firstNames = ["BlueRay ", "Upchuck ", "Lojack ", "Gizmo ", "Do-Rag "];
var lastNames = ["Zzz", "Burp", "Dogbone", "Droop"];
var fullNames = [];
for (var i = 0; i < firstNames.length; i++) {
for (var j = 0; j < lastNames.length; j++) {
fullNames.push(firstNames[i] + lastNames[j]);
}
}Chapter 21: Chaning Case
var n = m.toLowerCase(); or UpperCase. m can be a string, an array value (m[1]),
Chap 22: Strings: Measuring length and extracting parts
var n = "abcd"; slice To copy a section of a string. var m = n.slice(0, 1); = "a". length To know number of string. var k = n.length; = 4.
Chapter 18: For loops
Loops:
for (var i = 0; i < 10; i++) {
for (var i = 0; i > -3; i--) {Chapter 19: for loops: Flags, Booleans, array length, and loopus interruptus
Flag is ust a variable that starts out with a default value that you give it, and then is switched to a different value under certain conditions.
Assigning the strings "no" and "yes" to the switch, it's
conventional to use the Boolean values false and true.
var matchFound = false;
for (var i = 0; i <= 4; i++);
if (cityToCheck === cleanestCities[i]) {
matchFound = true;
alert("It's one of the cleanest cities");
break;
}
}
if (matchFound === false) {
alert("It's not on the list");
}Chapter 23:Strings: Finding segments
The indexOf method finds only the first instance of the segment you’re looking for.
var firstCharacter = text.indexOf(“World War II”);
To find the last instance of a segment in a string, use lastIndexOf.
var text = “To be or not to be.”;
var segIndex = text.lastIndexOf(“be”); = 16
Chapter 24: Strings: Finding a character at a location
var firstName = "Bobby"; var firstChar = firstName.slice(0, 1); or var firstChar = firstName.charAt(0);
Chapter 25: Strings: Replacing characters
We use Replace method.
var n = "Bobby";
var new = n.replace("Bobby", "abc"); = "abc"
n = n.replace("Bobby", "abc") = "abc".Chapter 26: Rounding numbers
var n = Math.round(0.56); = 1 var n = Math.round(0.49); = 0. var n = Math.ceil(.000001); = 1. var n = Math.floor(.9999); = 0
Chapter 27: Generating random numbers
var randomNumber = Math.random(); = from 0.00 through 0.999. To round the value represented by improvedNum down to the nearest integer that ranges from 1 through 6. var bigDecimal = Math.random(); var improvedNum = (bigDecimal * 6) + 1; var numberOfStars = Math.floor(improvedNum);
Chapter 28: Converting strings to integers and decimals
ParseInt converts all strings, including strings comprising floating-point numbers, to integers.
var myInteger = parseInt("1.9999"); = 1
To preserve any decimal values, use ParseFloat.
var myFractional = parseFloat("1.9999"); = 1.9999Chapter 29: Converting strings to numbers, numbers to
strings
var integerString = "24" var num = Number(integerString); = 24.
var numberAsNumber = 1234; var numberAsString = numberAsNumber.toString();
Chapter 30:Controlling the length of decimals
We use toFixed method.
var n = 1.5556;
n = n.toFixed(2); = 1.6
n = n.toFixed(); = 2
In a 100% sure;var str = num.toString();
if (str.charAt(str.length - 1) === "5") {
str = str.slice(0, str.length - 1) + "6";
}Chapter 31: Getting the current date and time
var dayNames = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]; var now = new Date(); var theDay = now.getDay(); var nameOfToday = dayNames[theDay;
Chapter 32: Extracting parts of the date and time
var d = new Date();
getDay(); 0-6 0 is Sunday.
getMonth(); 0-11 0 is January.
getDate gives you a number for the day of the month.
var dayOfMonth = d.getDate();
getFullYear gives you a 4-digit number for the year.
var currYr = d.getFullYear();
getHours gives you a number from 0 through 23 corresponding to midnight through 11 p.m.
0 is midnight, 12 is noon, 23 is 11p.m
var currentHrs = d.getHours();
getMinutes gives you a number from 0 through 59.
var currMins = d.getMinutes();
getSeconds gives you a number from 0 through 59.
var currSecs = d.getSeconds();
getMilliseconds gives you a number from 0 through 999.
var currMills = d.getMilliseconds();
getTime gives you the number of milliseconds that have elapsed since midnight, Jan. 1, 1970.
var millsSince = d.getTime();
Chapter 33: Specifying a date and time
var today = new Date();
var doomsday = new Date("June 30, 2035");
var mstoday = today.getTime();
var msdoomsday = doomsday.getTime();
var dDiff = msDiff / (1000 * 60 * 60 * 24);
converts the milliseconds into seconds (1000), minutes (60), hours (60), and days (24).
dDiff = Math.floor(dDiff);
var d = new Date("July 21, 1983 13:25:00");
separating hours, minutes, and seconds.Chapter34:Chaning elements of a time and time
var d = new Date(); d.getFullYear(2000); to change year to 2000 same to Month(4), Date(4), Hours(4),Minure(4), Seconds(4), Millisecond(4)
var date = new Date(); create Date
var n = date.getFullYear(); extracting Year
date.setFullYear(n - 100); Reset Date object century back
alert(date);
Chapter 35: Function
A function is a block of JavaScript that robotically does the same thing again and again, whenever you invoke its name.
Call a function:
function a() {
alert("Hello");
}
a();Chapter 36: Function: Passing them data
If you call the Function and passing data to it, the string inside () is called Argument, variables are Parameters.
You can put Number in () separated by Commas
Example: function a(n, “Hello”, 9) {
alert(n, “Hello”, 9); }
Chapter 37: Functions: Passing data back from them
Using keyword Return. A variable can be used as a Function anywhere to sends data back to the calling code.
a Function can return only a single value to the code that calls it.
Example: function a(b, c) { return b + c; } alert(…);
Chapter 38: Functions: Global and Local Variables
Scope is the difference between Global and Local variables. Global variables are declared in the main code and known&useable everywhere, Local variables are declared in the Function and known&useable only inside the Function. To pass data from Local var to Global var using Return. Ng lại using var n = a();
Chapter 39 + 40: Switch statements: How to start them and How to complete them
Switch statements is to test many conditions.
switch(dayOfWk) {
case "Sat" :
alert("Whoopee");
break;
case "Sun" :
alert("Whoopee");
break;
case "Fri" :
alert("TGIF!");
break;
default :
alert("Shoot me now!");
}Chapter 41: While loops
Instead For loops we use While loops:
var i = 0;
while (i <= 3) {
alert(i);
i++;
}Chapter 42: Do… While Loops
Do the same task as While loops.
ar i = 0;
do {
alert(i);
i++;
} while (i < 0);Chapter 43: Placing Scripts
The best place is at the end of Body section.
alert(“Hello”);
Chapter 44: Commenting
// for 1 line /* */ for 2 or more line
Chapter 45: Events: Links
All of these user actions(clicking a button,etc) are known as Events.and JS code the respond to it are called Even Handler. Below is Inline event-handling approach.
- <a> (or var greet=”hi’; alert(greet); or popup(‘Hi’);)</a>
- Text</a>
Chapter 46: Events: Button
The Scripting approach is used by most Professionals.
<a><img></img></a>
<img></img>
Chapter 47: Events: Mouse
learn how to make things happen when the user mouses over something on the page.
onMouseover for detecting that the user is hovering over an element.
onMouseout for … no longer hovering …..
<img></img>
Chapter 48: Events: Fields
onFocus tell JS to do omething when the user clicks in the field.
onBlur tell this field no longer has the focus.
Email:<br></br>
Chapter 49: Events: Reading Fields Values
Email:
