JS-CSS-HTML
JS-CSS-HTML
CSS(Cascading style sheets) – changes the appearance of the element in the website
Use this syntax for linking
Measuring In CSS:
Px(pixels)
Em(1em is equivalent to 16px)
%(percentange)
Editing Images
Width: 250px; Use width on picture container
and use 100% on width
picture(separate it through div)
Height: 250px;
Object-fit: Cover, contain, fit; Cover- this does the image to
cover the 250px width and
250px height.
Contain- contain the image in
the width and height.
Fit- fit the image in the width
and height.
Object-position: Left, right; This let you adjust the image
Compute hex to rgb color
CSS specificity – it means that in CSS the browser follows a certain syntax and its priority the selector that
has more specific. Class name is more priority rather than element.
Text Element – they exist inside the line of text and modify part of the text
<strong>
bold
</strong>
<u>
underline
</u>
<span>
Modify specific part of the text without affecting the whole text
</span>
This are all void element, it means that there’s no need for closing tag
--------------------------------------------------------------------------------------------------------------------------------------------
HTML Structure – in every program on html there should be this code, this will provide
additional features
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
1. Block Element
2. Inline-block Element
<h1>head</h1>
<h2>head</h2>
<br>line break
<p>paragraph</p>
</body>
</html>
--------------------------------------------------------------------------------------------------------------------------------------------
./JavaScript comment is // and
JavaScript
Console.log() – whatever is input on the bracket will display back at the display on the website, this is within
JavaScript
<script>
alert('WELCOME!')
console.log(2+2);
console.log( 'khurt' + 'cath' );
</script>
</script>
</body>
Can’t use let as but we can use let1 or let 2 since let has value already on js
Can’t start using number like 1let or 2let but we can use it in the middle and last
Can’t use special character but there are two exception which is _ and $ like _khurt/ $khurt
TIPS
Naming convention:
1. camelCase cartQuantity-add the two words and capitalize the 2nd
first letter of the words
2. PascalCase CartQuantity-add the two words and both are capitalized
3. kebab-case cart-quantity- this use for html and css
Project Calculator:
<body>
<p>
<button onclick="console.log(calculation +='7')">7</button>
<button onclick="console.log(calculation +='8')">8</button>
<button onclick="console.log(calculation +='9')">9</button>
</p>
<p>
<button onclick="console.log(calculation +='4')">4</button>
<button onclick="console.log(calculation +='5')">5</button>
<button onclick="console.log(calculation +='6')">6</button>
</p>
<p>
<button onclick="console.log(calculation +='1')">1</button>
<button onclick="console.log(calculation +='2')">2</button>
<button onclick="console.log(calculation +='3')">3</button>
<button onclick="console.log(calculation +='0')">0</button>
</p>
<p>
<button onclick="console.log(calculation += ' + ')"
>+</button>
<button onclick="console.log(calculation += ' - ')">-
</button>
<button onclick="console.log(calculation += ' /
')">/</button>
<button onclick="console.log(calculation += ' *
')">*</button>
<button onclick="console.log(calculation =
eval(calculation))">=</button>
<button onclick="console.log(calculation =
'')">Clear</button>
</p>
</body>
<script>
let calculation = ''
</script>
--------------------------------------------------------------------------------------------------------------------------------------------
Comparison Values
> greater than
< less than
>= greater than or equal to
<= less than or equal to
=== equal to
!==not qual to
Logical Operators:
&& this called AND operator, what it does is it check if its both side is true and false
|| this called OR operator, it checks if one side is true: if there is true it will display true
! this called NOT operator, the way it does is it flip the value more like saying IS NOT TRUE will result to
false vise versa.
Project ROCK-PAPER-SCISSOR
<button onclick="
const khurt1 = Math.random();
let computerMove = '';
console.log(computerMove);
">ROCK</button>
<button onclick="
const khurt1 = Math.random();
let computerMove = '';
console.log(computerMove);
<button onclick="
const khurt1 = Math.random();
let computerMove = '';
console.log(computerMove);
">SCISSOR</button>
Now in this project we learn how to use algorithm the code is Math.random();
Variable that are within {} are only used inside of the curly bracket
if (5){console.log('truthy');}
let ithasitems = 10
if (ithasitems)
{console.log('inventory has items');}
--------------------------------------------------------------------------------------------------------------------------------------------
FUNCTIONS
Why do we use functions?
Functions let us reuse codes
Parameters is like a variable it let you put the value; it can be done multiple times:
The rules in creating:
no use of special words like functions
cannot be use special characters except $ and _
cannot start with a number
</script>
--------------------------------------------------------------------------------------------------------------------------------------------
OBJECTS let you customize and line up the values, one more thing you can display specifically what you want and
let it change it.
let product = {
name: 'khurt',
lastname: 'Baculi'
};
console.log(product);
console.log(product.lastname);
product.lastname = 'doctor';
console.log(product.lastname);
delete product.middleName;
console.log(product);
We can also access the value using bracket notation, this way it let us pick the value with the math symbol on it;
Can be used in values too and or by adding empty string ’’
‘Delivery-time’: ‘1 day’
console.log(product[‘delivery-time’])
NESTED OBJECTS
const wholeName = {
name: 'khurt',
age: '22',
'delivery-time': '1day',
gender: {
gays: '0',
male: '1',
female: '20'}
};
console.log(wholeName)
console.log(wholeName['delivery-time']);
We can also use function on objects just like this
const wholeName = {
name: 'khurt',
age: '22',
'delivery-time': '1day',
gender: {
gays: '0',
male: '1',
female: '20'},
fun: function process(){
console.log('function that is inside the object');}
};
console.log(wholeName)
console.log(wholeName['delivery-time']);
wholeName.fun();
Build-in Objects
JSON(Javascript Object Notation)
-similar to javascript objects
console.log(JSON.stringify(wholeName));
//this let us change javascript object to universal by JSON
console.log(JSON.parse(jsonstring));
//we can let it change to javascript object by making it as
variable and displaying it
localStorage
-let you store but only it works on string, tip: use JSON.stringify to use it
localStorage.setItem('score', JSON.stringify(score));
//THIS SAVE INTO THE LOCALSTORAGE
console.log(localStorage.getItem('score'));
//THIS LET US INTO DISPLAY ON IT AND TURNING IT ON STRING BY USING JSON
JSON.parse(localStorage.getItem('score'))
//STRING THEN TURN INTO OBJECT BACK
--------------------------------------------------------------------------------------------------------------------------------------------
DOCUMENT OBJECT MODEL (DOM)
-DOM is the way to javascript to have fully control
document.body.innerHTML = 'khurt';
document.title = 'Goodevening';
console.log(document.body);
the DOM combines JavaScript and html together, it gives JavaScript control on the webpage
-when a html element is inside the JavaScript it is converted into JavaScript object
the problem with this is that querySelector only select the first html element
the solution is that add class attribute, this will serve as label that can be selected
<button onclick="
subscribe();
"class="js-subscribe-button"
>Subscribe</button>
we can use the dom to select the html and make it as variable that can be console.log just like this
<button class="js-button">hello</button>
<input>
Coercion
So remember whenever we get a value from the DOM it becomes a string so if we want to do math with
it, it needs to be converted to number. The syntax is Number();
onkeydown="console.log('typing')">
<button onkeydown="console.log(event)"
class="js-submit"
>Submit</button>
<button onkeydown="console.log(event.type)"
class="js-submit"
>Submit</button>
If we want to display input element, we need to use the property of .value and make it variable
const nameInput = document.querySelector('.js-name');
console.log(nameInput.value);}
the .value property let us get the content of the input
--------------------------------------------------------------------------------------------------------------------------------------------
Syntax is
<script>
const MyArray = [10, 20, 30, 40, 50];
console.log(MyArray); This syntax lets you show all the array
console.log(MyArray[4]); This syntax let you pick what you want to show in the console
</script>
Console:
Method
.length- tells you how many are there in a array