Tag Name
Js Tag
Usage
Javascript Basics
getElementById
const elem = document.getElementById('para');
This method will return the id of an html element
getElementsByTagName
const elem = document.getElementsByTagName('li');
This method will return all elements with li tag
getElementsByClassName
document.getElementsByClassName('test');
This method will return all the test class of an html element
querySelector()
querySelector(li);
This method will return one copy of an li from an unordered list.
querySelectorAll()
querySelectorAll(li);
This method will return several copies of an li from an unordered list.
let
{ let x = 2;}
Let creates a variable.
Variables defined with let have a limited scope.
const
const PI = 3.141592653589793;
const creates a constant.Constants are created in uppercase and cannot be redeclared.
alert();
alert("Hello! I am an orange banana!");
method displays an alert box with a message and an OK button.
confirm()
confirm("Press a button!");
displays a dialog box with a message, an OK button, and a Cancel button.
prompt();
| button onclick = 'myFunction( )' > click me |
|
| < script > function myFunction ( ) { |
| let person = prompt('Please enter your name'); |
| if (person != null) { |
| document.getElementById("demo").innerHTML = |
| 'Hello ' + person + '! How are you today?'; |
| }
}
< /script > |
this method displays a dialog box that prompts the user for input. In this case
the user is asked to enter his name. After the Ok button is pressed
'How are you is displayed before the name that was entered.
if statement
if (condition) {
// block of code to be executed if the condition is true
}
statement to specify a block of
JavaScript code to be executed if a condition is true.
sync
< script src="demo_defer.js" sync/ >
the JavaScript does not wait for responses when executing a function, instead it continues with executing other functions.
defer
< script src="demo_defer.js" defer/ >
specifies that the script is downloaded in parallel to parsing the page,
and executed after the page has finished parsing
Innertext();
let text = element.innerText;
property sets or returns the text content of an element.
Innerhtml();
document.getElementById("demo")
.innerHTML = "I have changed!";
Html tags can be used within the text.
The bold tags change plain text to bold text.
createElement();
const para = document.createElement("p");
para.innerText = "This is a paragraph";
Html tags can be used within the text.
The bold tags change plain text to bold text.
appendChild();
document.body.appendChild(para);
This example adds the para.innerText to your webpage
insertBefore();
myList2 = [Water, Milk, Juice];
document.getElementById("myList2");
myList2.insertBefore(para);
This method inserts Water, Milk, Juice before our paragraph.
removeChild();
const list = document.getElementById("myList");
list.removeChild(list.lastElementChild);
Ex
- chocolate
- vanilla
- strawberry
method removes a child node before an existing child.
In this example strawberry would be removed from the unordered list
prevent default();
| var my_func = function(event) { |
| alert("validate form first"); |
| event.preventDefault(); |
| attach event listener |
| vform.addEventListener("submit", my_func, true); |
| < form id="laura" method="post"> |
| < input type="submit" / >
< /form >
}; |
Clicking on a "Submit" button, prevents the form from submitting.In this case you recieve an alert. Most of the time this is used for validation using regex before sending the form.
Javascript & Css
The first method to change css is getElementsByClassName
< script >
document.getElementsByClassName("p2").style.color = "blue";
< /script >
The paragraph with an id of p2 changes the text color to blue.
The second method to change css uses camelCase.
Javascript CSS removes hyphens from CSS property names
using camelCase. A common place to find Javascript CSS is in an event listener that activates when a button is clicked.
// The "background color" property in external CSS and Javascript CSS.
background-color: white;
document.body.style.backgroundColor = "white";
Javascript CSS uses the style property to modify HTML element styles.
Functions
Function
function myFunction(p1, p2) {
return p1 * p2;
}
block of code designed to perform a particular task executed when something calls it.
Arrays
Indexed Array
var fastfood = ["Burger King", "Mcdonalds", "Kentucy Fried Chicken"];
Array elements are counted starting with 0.
Associative Array
var cars = { "Chevy": "Nova", "Pontiac": "Cadillac"};
An associative array is simply a set of key value pairs.
MultiAssociative Array
let activities = [ ['Work', 9], ['Eat', 1], ['Commute', 2]];
a JavaScript multidimensional array is an array of arrays
Array Methods
Pop();
var fruits = ["Banana", "Orange", "Apple"; fruits.pop();
The pop() method removes the last element of an array.
The new array ends with Apple.
Push();
var fruits = ["Banana", "Orange", "Apple"]; fruits.push("Kiwi");
The push() method adds new items to the end of an array,
and returns the new length.
length();
let text = "12345678";
let length = text.length;
returns the length of a string. counting begins at 0.
sort();
const fruits = ["Banana", "Orange", "Apple";
fruits.sort();
sorts the elements as strings in alphabetical and ascending order.
Events
onclick();
object.onclick = function(){myScript};
The onclick event occurs when the user clicks on an element.
onchange();
object.onchange = function(){myScript};
The onchange event occurs when the value of
an element has been changed.
onload();
< body onload="myFunction()" >
The onload event occurs when an object has been loaded.
onfocus();
object.onfocus = function(){myScript};
The onfocus event occurs when an element gets focus.
onmouseover();
object.onmouseover = function(){myScript};
occurs when the mouse pointer is moved onto an
element, or onto one of its children
onmouseout();
object.onmouseout = function(){myScript};
occurs when the mouse pointer is moved out of an element, or out of one of its children.
addEventListener();
element.addEventListener("click", myFunction)
The addEventListener() method attaches an event
handler to the specified element like a mouse click or onchange even
removeEventListener();
myDIV.removeEventListener("mousemove", myFunction);
The remove EventListener() method removes
an event handler that has been attached with the addEventListener() method.
Loops
for loop
for (i = 0; i < 5; i++) { text += "The number is " + i + "
"; } }
loops through a block of code a number of times
while loop
while (condition) { // code block to be executed }
loops through a block of code while a specified condition is true.
Time: new Date() or Date()
new Date();
let day = objectDate.getDate();
returns 23 [day of month]
Month
getMonth ( );
Returns the month (from 0-11).
Day
getDay ( );
Returns the day of the week (from 0-6).
Year
let year = objectDate.getFullYear();
Returns a four digit number.
Hour
getHours ( );
Returns the hour (from 0-23).
Minute
getMinutes ( );
Returns the minutes (from 0-59).
Second
getSeconds ( );
Returns the seconds (from 0-59)
setInterval();
const intervalID = setInterval(myCallback, 1000);
method repeats the function myCallback every second.
clearInterval();
clearInterval(myCallback );
method clears the
myCallback timer set with the setInterval() method.
setTimeout();
setTimeout(greet, 3000);
method executes the function greet after three seconds.
The method executes the code only once.
clearTimeout();
function myStopFunction() {
clearTimeout(myStopFunction;
}
method clears the
myStopFunction timer set with the setTimeout() method.
Regular Expressions
The match() Method
< p id="demo">< /p >
< script >
let text = "The rain in SPAIN stays mainly in the plain";
let result = text.match(/ain/);
document.getElementById("demo").innerHTML = result;
< /script >
match() searches for a match against "ain".
The replace() Method
Visit My moms house!
< script >
let text = document.getElementById("demo").innerHTML;
document.getElementById("demo").innerHTML = text.replace(
"Visit My moms house!", "Visit my new girlfriends house!");
< /script >
Visit My moms house! is replaced with 'Visit my new girlfriends house!'