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