MumuNiMochii
4 years ago
parent
97f84bf65f
commit
50c30655d7
@ -0,0 +1,12 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>30DaysOfJavaScript: Inline Script</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<button onclick="alert('Welcome to 30DaysOfJavaScript!')">Click Me</button>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>30DaysOfJavaScript: Internal Script</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<script>
|
||||||
|
console.log('Welcome to 30DaysOfJavaScript')
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>30DaysOfJavaScript: External Script</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1 @@
|
|||||||
|
console.log('Welcome to 30DaysOfJavaScript!')
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>30DaysOfJavaScript: Multiple External Scripts</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<script src="main.js"></script>
|
||||||
|
<script src="message.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1 @@
|
|||||||
|
console.log('This is the main script.')
|
||||||
@ -0,0 +1 @@
|
|||||||
|
console.log('This is the message script.')
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>30DaysOfJavaScript: Data Types - Numbers</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<script>
|
||||||
|
console.log(-1) // Negative integer
|
||||||
|
console.log(0) // Zero integer
|
||||||
|
console.log(1) // Positive integer
|
||||||
|
console.log(-1.1) // Negative decimal
|
||||||
|
console.log(0.0) // Zero decimal
|
||||||
|
console.log(1.0) // Positive decimal
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>30DaysOfJavaScript: Data Types - Strings</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<script>
|
||||||
|
console.log('This string is written between single quotes.') // Single quotes
|
||||||
|
console.log("This string is written between double quotes.") // Double quotes
|
||||||
|
console.log(`This string is written between backticks.`) // Backticks
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,15 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>30DaysOfJavaScript: Data Types - Booleans</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<script>
|
||||||
|
console.log(true) // True boolean
|
||||||
|
console.log(false) // false boolean
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,15 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>30DaysOfJavaScript: Data Types - Undefined</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<script>
|
||||||
|
let variable
|
||||||
|
console.log(variable) // It is undefined as it is not assigned to a value
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,15 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>30DaysOfJavaScript: Data Types - Null</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<script>
|
||||||
|
let variable = null
|
||||||
|
console.log(variable) // The variable has an empty value
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,26 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>30DaysOfJavaScript: Data Types - Checking Data Types</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<script>
|
||||||
|
console.log(typeof -17)
|
||||||
|
console.log(typeof 0)
|
||||||
|
console.log(typeof 29)
|
||||||
|
console.log(typeof -42.36)
|
||||||
|
console.log(typeof 0.567)
|
||||||
|
console.log(typeof 12.32)
|
||||||
|
console.log(typeof "1")
|
||||||
|
console.log(typeof '2')
|
||||||
|
console.log(typeof `3`)
|
||||||
|
console.log(typeof true)
|
||||||
|
console.log(typeof false)
|
||||||
|
console.log(typeof undefined)
|
||||||
|
console.log(typeof null) // object
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,42 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>30DaysOfJavaScript: Variables</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<script>
|
||||||
|
/*
|
||||||
|
The 'let' is used for changing values, while 'const' is for those
|
||||||
|
that are not. The let is used instead of 'var' due to leak issues.
|
||||||
|
*/
|
||||||
|
// The 'camelCase' is JavaScript's variable naming convention
|
||||||
|
let firstName = 'Dean Harold'
|
||||||
|
let middleName = 'Potestades'
|
||||||
|
let lastName = 'Abad'
|
||||||
|
console.log(firstName, middleName, lastName)
|
||||||
|
|
||||||
|
const earthGravity = 9.81 // in m/s^2
|
||||||
|
const boilingPoint = 100 // of water in °C
|
||||||
|
const PI = 3.14159265359 // geometrical constant
|
||||||
|
console.log(earthGravity, boilingPoint, PI)
|
||||||
|
|
||||||
|
/*
|
||||||
|
Variables can also be declared in one line, and they are separated
|
||||||
|
by comma.
|
||||||
|
*/
|
||||||
|
let alias = 'Dragunov',
|
||||||
|
age = 879,
|
||||||
|
race = 'Dragonkin',
|
||||||
|
job = 'Adventurer',
|
||||||
|
title = 'Dragon Lord'
|
||||||
|
console.log('Name:', alias)
|
||||||
|
console.log('Age:', age)
|
||||||
|
console.log('Race:', race)
|
||||||
|
console.log('Job:', job)
|
||||||
|
console.log('Title:', title)
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
console.log(typeof negativeInteger)
|
||||||
|
console.log(typeof zeroInteger)
|
||||||
|
console.log(typeof positiveInteger)
|
||||||
|
console.log(typeof negativeDecimal)
|
||||||
|
console.log(typeof zeroDecimal)
|
||||||
|
console.log(typeof positiveDecimal)
|
||||||
|
console.log(typeof singleQuote)
|
||||||
|
console.log(typeof doubleQuote)
|
||||||
|
console.log(typeof backtick)
|
||||||
|
console.log(typeof trueBool)
|
||||||
|
console.log(typeof falseBool)
|
||||||
|
console.log(typeof undefinedVariable)
|
||||||
|
console.log(typeof emptyVariable)
|
||||||
@ -0,0 +1,67 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>30DaysOfJavaScript: Exercises</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<script>
|
||||||
|
// Comments can make code readable
|
||||||
|
// Welcome to 30DaysOfJavaScript
|
||||||
|
/*
|
||||||
|
Comments can make code readable,
|
||||||
|
easy to reuse and informative
|
||||||
|
*/
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!--
|
||||||
|
Make external scripts and use the latter
|
||||||
|
to print the first one's variables
|
||||||
|
-->
|
||||||
|
<script src="variables.js"></script>
|
||||||
|
<script src="datatypes.js"></script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Declare 4 variables without assigning values
|
||||||
|
let a, b, c, d
|
||||||
|
|
||||||
|
// Declare 4 variables with assigned values
|
||||||
|
let e = '1',
|
||||||
|
f = '2',
|
||||||
|
g = '3',
|
||||||
|
h = '4'
|
||||||
|
|
||||||
|
/*
|
||||||
|
Declare variables to store your first name,
|
||||||
|
last name, marital status, country, and age
|
||||||
|
in multiple lines.
|
||||||
|
*/
|
||||||
|
let firstName = 'Dean Harold'
|
||||||
|
let lastName = 'Abad'
|
||||||
|
let maritalStatus = 'single'
|
||||||
|
let country = 'Philippines'
|
||||||
|
let age = 19
|
||||||
|
|
||||||
|
/*
|
||||||
|
Declare variables to store your first name,
|
||||||
|
last name, marital status, country, and age
|
||||||
|
in a single line.
|
||||||
|
*/
|
||||||
|
let fn = firstName,
|
||||||
|
ln = lastName,
|
||||||
|
ms = maritalStatus,
|
||||||
|
ct = country,
|
||||||
|
ag = age
|
||||||
|
|
||||||
|
/*
|
||||||
|
Declare 2 variables myAge and yourAge and assign
|
||||||
|
them their initial values and log into the
|
||||||
|
browser console.
|
||||||
|
*/
|
||||||
|
let myAge = 19, yourAge = 21
|
||||||
|
console.log("I am ", myAge, " years old.\nYou are ", yourAge, " years old.")
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
let negativeInteger = -10
|
||||||
|
zeroInteger = 0,
|
||||||
|
positiveInteger = 42,
|
||||||
|
negativeDecimal = -16.84,
|
||||||
|
zeroDecimal = 0.0,
|
||||||
|
positiveDecimal = 420.69,
|
||||||
|
singleQuote = 'A string between single quotes',
|
||||||
|
doubleQuote = "A string between double quotes",
|
||||||
|
backtick = `A string between backticks`,
|
||||||
|
trueBool = true,
|
||||||
|
falseBool = false,
|
||||||
|
undefinedVariable = undefined,
|
||||||
|
emptyVariable = null
|
||||||
@ -0,0 +1,53 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>30DaysOfJavaScript: Data Types - Primitive</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<script>
|
||||||
|
/*
|
||||||
|
Includes:
|
||||||
|
Numbers - integers and floats
|
||||||
|
Strings - any data under single, double, or backtick quotes
|
||||||
|
Booleans - true or false value
|
||||||
|
Undefined - a declared variable without an assigned value
|
||||||
|
Null - an empty/no assigned value
|
||||||
|
*/
|
||||||
|
// Examples of primitive data types:
|
||||||
|
let negativeInteger = -10
|
||||||
|
zeroInteger = 0,
|
||||||
|
positiveInteger = 42,
|
||||||
|
negativeDecimal = -16.84,
|
||||||
|
zeroDecimal = 0.0,
|
||||||
|
positiveDecimal = 420.69,
|
||||||
|
singleQuote = 'A string between single quotes',
|
||||||
|
doubleQuote = "A string between double quotes",
|
||||||
|
backtick = `A string between backticks`,
|
||||||
|
trueBool = true,
|
||||||
|
falseBool = false,
|
||||||
|
undefinedVariable = undefined,
|
||||||
|
emptyVariable = null
|
||||||
|
|
||||||
|
// Primitive data types are immutable (non-modifiable)
|
||||||
|
/*
|
||||||
|
Here, the first letter is accessed by getting the
|
||||||
|
first element under the string 'singleQuote', and
|
||||||
|
tries to replace the capital A with its lowercase.
|
||||||
|
*/
|
||||||
|
singleQuote[0] = 'a' // This would throw an error
|
||||||
|
|
||||||
|
// Comparing values will return a boolean value
|
||||||
|
let num1 = 10, num2 = 10
|
||||||
|
console.log(num1 == num2) // true
|
||||||
|
|
||||||
|
let js = 'JavaScript', py = 'Python'
|
||||||
|
console.log(js == py) // false
|
||||||
|
|
||||||
|
let lightOn = true, lightOff = false
|
||||||
|
console.log(lightOn == lightOff) // false
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,107 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>30DaysOfJavaScript: Data Types - Non-Primitive</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<script>
|
||||||
|
/*
|
||||||
|
Includes:
|
||||||
|
Objects
|
||||||
|
Functions
|
||||||
|
Arrays
|
||||||
|
*/
|
||||||
|
// Array is a list of data values contained in square brackets
|
||||||
|
let numbers = [1, 2, 3]
|
||||||
|
numbers[0] = "This is the first element"
|
||||||
|
numbers[1] = "This is the second element"
|
||||||
|
numbers[2] = "This is the last element"
|
||||||
|
|
||||||
|
/*
|
||||||
|
Value of each index in the array are reassigned;
|
||||||
|
the values are changed from int to string data types.
|
||||||
|
*/
|
||||||
|
console.log(numbers[0])
|
||||||
|
console.log(numbers[1])
|
||||||
|
console.log(numbers[2])
|
||||||
|
|
||||||
|
/*
|
||||||
|
The example proves that an array, which is a non-primitive
|
||||||
|
data type is mutable (modifiable).
|
||||||
|
Non-primitive data types are not comparable by value.
|
||||||
|
Even if 2 non-primitive data types have the same properties
|
||||||
|
and values, they are not strictly equal.
|
||||||
|
*/
|
||||||
|
let set1 = [1, 2, 3],
|
||||||
|
set2 = [1, 2, 3]
|
||||||
|
console.log(set1 == set2) // false
|
||||||
|
|
||||||
|
let object1 = {
|
||||||
|
character: {
|
||||||
|
alias: 'Dragunov',
|
||||||
|
age: 879,
|
||||||
|
race: 'Dragonkin',
|
||||||
|
job: 'Adventurer',
|
||||||
|
title: 'Dragon Lord'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
object2 = {
|
||||||
|
character: {
|
||||||
|
alias: 'Dragunov',
|
||||||
|
age: 879,
|
||||||
|
race: 'Dragonkin',
|
||||||
|
job: 'Adventurer',
|
||||||
|
title: 'Dragon Lord'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
console.log(object1 == object2) // false
|
||||||
|
|
||||||
|
/*
|
||||||
|
We do not compare non-primitive data types; do not compare
|
||||||
|
objects, functions, or arrays. Their values are referred to
|
||||||
|
as 'reference' types, because they are being compared by
|
||||||
|
reference instead of values.
|
||||||
|
Two objects are only strictly equal if they refer to the
|
||||||
|
same underlying object.
|
||||||
|
|
||||||
|
So instead of the following:
|
||||||
|
let numbers1 = [1, 2, 3],
|
||||||
|
numbers2 = [1, 2, 3]
|
||||||
|
console.log(numbers1 == numbers2) // false
|
||||||
|
|
||||||
|
let character1 = {
|
||||||
|
alias: 'Dragunov',
|
||||||
|
age: 879,
|
||||||
|
race: 'Dragonkin',
|
||||||
|
job: 'Adventurer',
|
||||||
|
title: 'Dragon Lord'
|
||||||
|
},
|
||||||
|
character2 = {
|
||||||
|
alias: 'Dragunov',
|
||||||
|
age: 879,
|
||||||
|
race: 'Dragonkin',
|
||||||
|
job: 'Adventurer',
|
||||||
|
title: 'Dragon Lord'
|
||||||
|
}
|
||||||
|
console.log(character1 == character2) // false
|
||||||
|
*/
|
||||||
|
// We do:
|
||||||
|
let numbers1 = [1, 2, 3],
|
||||||
|
numbers2 = numbers1
|
||||||
|
console.log(numbers1 == numbers2) // true
|
||||||
|
|
||||||
|
let character1 = {
|
||||||
|
alias: 'Dragunov',
|
||||||
|
age: 879,
|
||||||
|
race: 'Dragonkin',
|
||||||
|
job: 'Adventurer',
|
||||||
|
title: 'Dragon Lord'
|
||||||
|
},
|
||||||
|
character2 = character1
|
||||||
|
console.log(character1 == character2) // true
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,28 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>30DaysOfJavaScript: Data Types - Numbers: Declaring Number Data Types</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<script>
|
||||||
|
// Examples of integers and decimals
|
||||||
|
let negativeInteger = -10
|
||||||
|
zeroInteger = 0,
|
||||||
|
positiveInteger = 42,
|
||||||
|
negativeDecimal = -16.84,
|
||||||
|
zeroDecimal = 0.0,
|
||||||
|
positiveDecimal = 420.69
|
||||||
|
|
||||||
|
// Some real-world constants
|
||||||
|
const earthGravity = 9.81 // in m/s^2
|
||||||
|
boilingPoint = 100, // of water in °C
|
||||||
|
bodyTemperature = 37 // of humans in °C
|
||||||
|
PI = 3.14159265359 // geometrical constant
|
||||||
|
|
||||||
|
console.log(earthGravity, boilingPoint, bodyTemperature, PI)
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,61 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>30DaysOfJavaScript: Data Types - Numbers: Math Object</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<script>
|
||||||
|
// Some real-world constants
|
||||||
|
const earthGravity = 9.81 // in m/s^2
|
||||||
|
boilingPoint = 100, // of water in °C
|
||||||
|
bodyTemperature = 37 // of humans in °C
|
||||||
|
|
||||||
|
// The Math Object provides a lots of methods to work with numbers
|
||||||
|
const PI = Math.PI // geometrical constant
|
||||||
|
console.log(PI) // 3.141592653589793
|
||||||
|
|
||||||
|
/*
|
||||||
|
Round off to the closest number; if above 0.5, round up, else if
|
||||||
|
below 0.5, round down.
|
||||||
|
*/
|
||||||
|
console.log(Math.round(PI)) // round off, 3
|
||||||
|
console.log(Math.round(earthGravity)) // round off, 10
|
||||||
|
console.log(Math.floor(PI)) // round down, 3
|
||||||
|
console.log(Math.ceil(PI)) // round up, 4
|
||||||
|
console.log(Math.min(-0.4, 9, -20.45)) // lowest, -20.45
|
||||||
|
console.log(Math.max(-0.4, 9, -20.45)) // highest, 9
|
||||||
|
|
||||||
|
// Create random float from 0 to 0.999999
|
||||||
|
const random_float = Math.random() // random float
|
||||||
|
console.log(random_float)
|
||||||
|
|
||||||
|
// Create random integer from 0 to 10
|
||||||
|
const random_integer = Math.floor(Math.random() * 11) // random integer
|
||||||
|
console.log(random_integer)
|
||||||
|
|
||||||
|
// Absolute value
|
||||||
|
console.log(Math.abs(-99)) // 99
|
||||||
|
|
||||||
|
// Square root
|
||||||
|
console.log(Math.sqrt(25)) // 5
|
||||||
|
console.log(Math.sqrt(2)) // 1.4142135623730951
|
||||||
|
|
||||||
|
// Power
|
||||||
|
console.log(Math.pow(2, 5)) // 32
|
||||||
|
console.log(Math.E) // 2.718281828459045
|
||||||
|
|
||||||
|
// Logarithm - returns the natural logarithm with base E of x, Math.log(x)
|
||||||
|
console.log(Math.log(2)) // 0.6931471805599453
|
||||||
|
console.log(Math.log(10)) // 2.302585092994046
|
||||||
|
|
||||||
|
// Trigonometry
|
||||||
|
console.log(Math.sin(0)) // 0
|
||||||
|
console.log(Math.sin(90)) // 0.8939966636005579
|
||||||
|
console.log(Math.cos(0)) // 1
|
||||||
|
console.log(Math.cos(90)) // -0.4480736161291702
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>30DaysOfJavaScript: Data Types - Numbers: Random Number Generator</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<script>
|
||||||
|
// Create random float from 0 to 0.999999
|
||||||
|
let random_float = Math.random() // random float
|
||||||
|
console.log(random_float)
|
||||||
|
|
||||||
|
// Create random number from 0 to 10.99
|
||||||
|
let random_number = random_float * 11 // random number
|
||||||
|
|
||||||
|
// Create random integer from 0 to 10
|
||||||
|
let random_integer = Math.floor(random_number) // random integer
|
||||||
|
console.log(random_integer)
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,26 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>30DaysOfJavaScript: Data Types - Strings: Types</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<script>
|
||||||
|
// Various strings under single, double, and backtick quotes
|
||||||
|
let space = ' ',
|
||||||
|
// Examples:
|
||||||
|
single = 'string under single quote',
|
||||||
|
double = "string under double quote",
|
||||||
|
backtick = `string under backtick quote`,
|
||||||
|
singleInDouble = "string with single quote under a 'double quote'",
|
||||||
|
singleInBacktick = `string with single quote under a 'backtick quote'`
|
||||||
|
console.log(single)
|
||||||
|
console.log(double)
|
||||||
|
console.log(backtick)
|
||||||
|
console.log(singleInDouble)
|
||||||
|
console.log(singleInBacktick)
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,113 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>30DaysOfJavaScript: Data Types - Strings: Concatenation</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<script>
|
||||||
|
/*
|
||||||
|
Concatenation - connecting 2 or more strings together
|
||||||
|
There are multiple ways to concatenate strings
|
||||||
|
*/
|
||||||
|
// Using addition operators:
|
||||||
|
let space = ' ',
|
||||||
|
// Examples:
|
||||||
|
firstName = 'Dean Harold',
|
||||||
|
middleName = 'Potestades',
|
||||||
|
lastName = 'Abad',
|
||||||
|
maritalStatus = 'single',
|
||||||
|
country = 'Philippines',
|
||||||
|
age = 19
|
||||||
|
|
||||||
|
fullName = firstName + space + middleName + space + lastName,
|
||||||
|
fullInfo = 'Hi, I am ' + fullName + '. Currently I am ' + age + ' years old and ' + maritalStatus + '. I live in the ' + country + '.'
|
||||||
|
console.log(fullInfo)
|
||||||
|
|
||||||
|
/*
|
||||||
|
Long Literal Strings - backslash character (\) is
|
||||||
|
used at the end of each line to indicate that the
|
||||||
|
string will continue on the next line as the text
|
||||||
|
is too big to be written in a single line:
|
||||||
|
*/
|
||||||
|
const paragraph = "Hi, I am Dean Harold Potestades Abad. Currently I am 19 years old and single. I live in the Philippines. \
|
||||||
|
I like drawing and designing characters, animating things, and coding simple programs. \
|
||||||
|
I spend most of my time on computer due to being a Computer Science student. \
|
||||||
|
I have no school projects at the moment."
|
||||||
|
console.log(paragraph)
|
||||||
|
|
||||||
|
/*
|
||||||
|
Escape Sequences in Strings - the backslash (\)
|
||||||
|
character followed by other characters is an
|
||||||
|
escape sequence.
|
||||||
|
|
||||||
|
The most commonly used escape characters:
|
||||||
|
\n - new line
|
||||||
|
\t - Tab or 8 spaces
|
||||||
|
\\ - backslash
|
||||||
|
\' - single quote
|
||||||
|
\" - double quote
|
||||||
|
*/
|
||||||
|
// Line break or new line
|
||||||
|
console.log('This is such a great learning material to learn JavaScript.\nI would recommend this resource in various platforms.')
|
||||||
|
|
||||||
|
// Tab
|
||||||
|
console.log('Name of Resource\tType of Resource\tLanguage')
|
||||||
|
console.log('30DaysOfJavaScript\tLearning Resource\tJavaScript')
|
||||||
|
|
||||||
|
// To be able to write backslash in a string
|
||||||
|
console.log('The \\ character is called backslash symbol.')
|
||||||
|
|
||||||
|
// To be able to write single quotes in a string
|
||||||
|
console.log("The \'single quotes\' in string are possible with the use of \\ character.")
|
||||||
|
|
||||||
|
// To be able to write double quotes in a string
|
||||||
|
console.log('The \"double quotes\" in string are possible with the use of \\ character.')
|
||||||
|
|
||||||
|
// Mixture of \n, \', and \"'
|
||||||
|
console.log('I don\'t prefer using the \'shortcutted\' word \'don\'t\' in my examples,\nbut the 2 words \"do\" and \"not.\"')
|
||||||
|
|
||||||
|
/*
|
||||||
|
Template Literals - 2 backticks are used in this
|
||||||
|
method. Data can be 'injected' as expressions in
|
||||||
|
this template string.
|
||||||
|
To inject data, we enclose the expression with a
|
||||||
|
curly bracket ({}), preceded by a $ sign.
|
||||||
|
|
||||||
|
Syntax:
|
||||||
|
`String literal text ${expression}`
|
||||||
|
*/
|
||||||
|
let a = 1, b = 2
|
||||||
|
// The data is injected dynamically
|
||||||
|
console.log(`The value of a is ${a} and b is ${b}.\nTogether their sum is ${a + b}.`)
|
||||||
|
|
||||||
|
/*
|
||||||
|
Another example from the previously used variables
|
||||||
|
earlier i.e. the following:
|
||||||
|
|
||||||
|
let space = ' ',
|
||||||
|
firstName = 'Dean Harold',
|
||||||
|
middleName = 'Potestades',
|
||||||
|
lastName = 'Abad',
|
||||||
|
maritalStatus = 'single',
|
||||||
|
country = 'Philippines',
|
||||||
|
age = 19
|
||||||
|
|
||||||
|
fullName = firstName + space + middleName + space + lastName,
|
||||||
|
fullInfo = `Hi, I am ${fullName}. Currently I am ${age} years old and ${maritalStatus}. I live in the ${country}.`
|
||||||
|
*/
|
||||||
|
fullInfo = `Hi, I am ${fullName}. Currently I am ${age} years old and ${maritalStatus}. I live in the ${country}.`
|
||||||
|
console.log(fullInfo)
|
||||||
|
|
||||||
|
/*
|
||||||
|
Using a string template or string interpolation
|
||||||
|
method, we can add expressions which could be a
|
||||||
|
value, or use make comparisons, arithmetic ope-
|
||||||
|
rations, and ternary operation.
|
||||||
|
*/
|
||||||
|
console.log(`${a} is greater than ${b}: ${a > b}`) // 1 is greater than 2: false
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>30DaysOfJavaScript: Data Types - Strings: Methods - Length</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<script>
|
||||||
|
// length - returns the number of characters in a string
|
||||||
|
let js = 'JavaScript'
|
||||||
|
let py = 'Python'
|
||||||
|
console.log(js.length) // 10
|
||||||
|
console.log(py.length) // 6
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>30DaysOfJavaScript: Data Types - Strings: Methods - Accessing Characters in String</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<script>
|
||||||
|
// string[index] - access a character in a string by its index
|
||||||
|
let js = 'JavaScript',
|
||||||
|
firstLetter = js[0],
|
||||||
|
finalPosition = js.length - 1,
|
||||||
|
lastLetter = js[finalPosition] // Decrease by 1 its length as index starts with 0 when counting
|
||||||
|
console.log(`Name: ${js}\nFirst letter: ${firstLetter}\nLast letter: ${lastLetter}`)
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>30DaysOfJavaScript: Data Types - Strings: Methods - toUpperCase()</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<script>
|
||||||
|
// toUpperCase() - changes the string to uppercase letters
|
||||||
|
let js = 'JavaScript'
|
||||||
|
console.log(js.toUpperCase()) // JAVASCRIPT
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>30DaysOfJavaScript: Data Types - Strings: Methods - toLowerCase()</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<script>
|
||||||
|
// toLowerCase() - changes the string to lowercase letters
|
||||||
|
let js = 'JavaScript'
|
||||||
|
console.log(js.toLowerCase()) // javascript
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,28 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>30DaysOfJavaScript: Data Types - Strings: Methods - substr() and substring()</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<script>
|
||||||
|
/*
|
||||||
|
substr() - has 2 arguments, the starting index and
|
||||||
|
the number of characters to slice
|
||||||
|
*/
|
||||||
|
let js = 'JavaScript'
|
||||||
|
console.log(js.substr(0, 4)) // Java
|
||||||
|
console.log(js.substr(4, 6)) // Script
|
||||||
|
|
||||||
|
/*
|
||||||
|
substring() - has 2 arguments, the starting index and
|
||||||
|
the stopping index, and it does not include the stop-
|
||||||
|
ping index's character
|
||||||
|
*/
|
||||||
|
console.log(js.substring(0, 4)) // Java
|
||||||
|
console.log(js.substring(4, 10)) // Script
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,34 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>30DaysOfJavaScript: Data Types - Strings: Methods - split()</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<script>
|
||||||
|
/*
|
||||||
|
split() - splits a string at a specified place, and it changes
|
||||||
|
the string into an array of parts from the splitting based from
|
||||||
|
the passed argument
|
||||||
|
*/
|
||||||
|
let title = '30 Days of JavaScript'
|
||||||
|
// Simply changes into an array
|
||||||
|
console.log(title.split()) // ["30 Days of JavaScript"]
|
||||||
|
|
||||||
|
// Changes into array of words as space or ' ' is the point of split
|
||||||
|
console.log(title.split(' ')) // ["30", "Days", "of", "JavaScript"]
|
||||||
|
|
||||||
|
let name = 'Dean'
|
||||||
|
// Changes into array of letters due to each next '' point
|
||||||
|
console.log(name.split('')) // ["D", "e", "a", "n"]
|
||||||
|
|
||||||
|
let drinks = 'Milo, Coca-Cola, and Delight'
|
||||||
|
// Removes the commas only, therefore retaining the spaces
|
||||||
|
console.log(drinks.split(',')) // ["Milo", " Coca-Cola", " and Delight"]
|
||||||
|
// Removes both commas and spaces, therefore leaving only the nouns
|
||||||
|
console.log(drinks.split(', ')) // ["Milo", "Coca-Cola", "and Delight"]
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>30DaysOfJavaScript: Data Types - Strings: Methods - trim()</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<script>
|
||||||
|
/*
|
||||||
|
trim() - removes trailing space in the beginning or the end
|
||||||
|
of a string
|
||||||
|
*/
|
||||||
|
let js = ' JavaScript ',
|
||||||
|
title = ' 30 Days of JavaScript '
|
||||||
|
console.log(js.trim(' ')) // JavaScript
|
||||||
|
console.log(title.trim()) // 30 Days of JavaScript
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,22 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>30DaysOfJavaScript: Data Types - Strings: Methods - includes()</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<script>
|
||||||
|
/*
|
||||||
|
includes() - takes a substring argument and checks if it is
|
||||||
|
in a string, and it returns a boolean value
|
||||||
|
*/
|
||||||
|
let title = '30 Days of JavaScript'
|
||||||
|
console.log(title.includes('30')) // true
|
||||||
|
console.log(title.includes('69')) // false
|
||||||
|
console.log(title.includes('Days')) // true
|
||||||
|
console.log(title.includes('days')) // false
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>30DaysOfJavaScript: Data Types - Strings: Methods - replace()</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<script>
|
||||||
|
/*
|
||||||
|
replace() - takes 2 parameters the old substring and new one
|
||||||
|
*/
|
||||||
|
let title = '30 Days of Python'
|
||||||
|
console.log(title.replace('Python', 'JavaScript')) // 30 Days of JavaScript
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,20 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>30DaysOfJavaScript: Data Types - Strings: Methods - charAt()</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<script>
|
||||||
|
/*
|
||||||
|
charAt() - takes index in a string and returns its value
|
||||||
|
*/
|
||||||
|
let title = '30 Days of JavaScript',
|
||||||
|
count = title.length
|
||||||
|
console.log(title.charAt(0)) // 3
|
||||||
|
console.log(title.charAt(count - 1)) // n
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>30DaysOfJavaScript: Data Types - Strings: Methods - charCodeAt()</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<script>
|
||||||
|
/*
|
||||||
|
charCodeAt() - takes index in a string and returns its char
|
||||||
|
code or ASCII value
|
||||||
|
*/
|
||||||
|
let title = '30 Days of JavaScript',
|
||||||
|
count = title.length
|
||||||
|
console.log(title.charCodeAt(0)) // 51
|
||||||
|
console.log(title.charCodeAt(count - 1)) // 110
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,22 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>30DaysOfJavaScript: Data Types - Strings: Methods - indexOf()</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<script>
|
||||||
|
/*
|
||||||
|
indexOf() - takes a substring and if it exists, it will
|
||||||
|
return the first position of the substring, and if it
|
||||||
|
does not exist it will return -1
|
||||||
|
*/
|
||||||
|
let title = '30 Days of JavaScript',
|
||||||
|
count = title.length
|
||||||
|
console.log(title.indexOf('Days')) // 3
|
||||||
|
console.log(title.indexOf('JavaScript')) // 11
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in new issue