web programming → HTML - CSS - JS most important notes

HTML

relative to the content and the structure
id , name different → check box
id , different , name same → radio button
id , name same → drop down list
Tags with no closing tag : hr, br, img, input, source
Underline in CSS = tag u in html
Overline in CSS = no tag in html
Line-through in CSS = del tag in html
Text direction use = use bdo tag
Mp3 type is mpeg
ogg can be used for video and audio
Focus on the special characters: &nbsp, &lt, &gt, &amp, &qout, &apost, &copy

CSS

styling and presentation
external CSS → website level <head> <link rel="stylesheet" type="text/css" href="page.css"> </head>
internal CSS → <style type="text/css"> … </style>
line-height: 50px; → affects both the spacing above and below the inline elements
letter-spacing:6px , -6px ;

spacing between the letters , default = 6px , may be in negative values but the letters will be over each others

two classes <p class="center large">This paragraph w</p>
id vs class

Classes use a period (.) in CSS - IDs use a hash (#) in CSS.
Classes can be applied to multiple elements.- IDs must be unique within a page.

JS

Part One

dynamic content
head or body or both <script type="text/javascript"> js code </script> → internal
<script type="text/javascript" src="test.js"></script> → external
compare : === , !== value and equal type , == value only
document.write() statements are overwriting the entire content of your HTML document
alert box pop up then OK without Cancel : alert("Hello World!")
confirm box : confirm("are you sure!") with OK , Cancel
A prompt box is often used if you want the user to input a value : prompt ("New student", "default value")
parseInt() : change from string to numbers
+ with strings → concatenation
new Date().getDay();

new Date(): This creates a new Date object, representing the current date and time.
.getDay(): This method is called on the Date object to retrieve the day of the week. It returns a number between 0 and 6

one statement will be executed even if the condition isn’t justify → do while
document.getElementById("demo").

innerHTML = "Hello World"; inset this value in the HTML
.align = "center" center text
.style.fontSize = "50px";
.style.fontFamily = "impact";
.value; access the value of that tag

(self-invoked) (function() {...})()
A function can be stored in a variable → send values using the variable name
var arr2 = arr1→ (arr2 references the same array as arr1)
var arr2 = [...arr1] → Create a shallow copy using spread syntax
valid → document.write(Math.min(...arr2) + "<br>");
invalid → document.write(Math.min(arr2) + "<br>");
function() { myFunction(); }: This is an anonymous function that gets executed when the double-click event occurs. Inside this function, myFunction() is called.

<p id="demo">Double-click me.</p>
<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "I was double-clicked!";
}
document.getElementById("demo").ondblclick = function() {myFunction()}; 
</script>

window.onload → when all the elements in the page is loaded then the function is preformed

Part Two

Compile JS code: browser
Browser has interpreter by default
JS: most popular scripting language
Java invented: Sun Microsystems
; optional in JS
Variable = container = unique identifier
alert popup: OK only
confirm box: OK, cancel
prompt box: user input
Function scope: var
Block scope: let, const
new Date: current date + time
Size array dynamic can be changed
In array: number, subscript, index
Events: things happen to HTML
JavaScript reacts to events
onload called by window.onload
Self-invoked Function: (function myFunction { }())
Min, max in array: Math.max(...array_name)
Random value between 0 and 90: Math.random() * 90