sameer fakhoury
  • Home
  • CTF Writeups
  • Course Summaries
  • Cyber Reports
  • Articles
  • Event Notes
  • About Me
web programming → HTML - CSS - JS most important notes

web programming → HTML - CSS - JS most important notes

HTML

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

CSS

  1. styling and presentation
  2. external CSS → website level <head> <link rel="stylesheet" type="text/css" href="page.css"> </head>
  3. internal CSS → <style type="text/css"> … </style>
  4. line-height: 50px; → affects both the spacing above and below the inline elements
  5. letter-spacing:6px , -6px ;
    • spacing between the letters , default = 6px , may be in negative values but the letters will be over each others
  6. two classes <p class="center large">This paragraph w</p>
  7. id vs class
    1. Classes use a period (.) in CSS - IDs use a hash (#) in CSS.
    2. Classes can be applied to multiple elements.- IDs must be unique within a page.

JS

  • Part One
    1. dynamic content
    2. head or body or both <script type="text/javascript"> js code </script> → internal
    3. <script type="text/javascript" src="test.js"></script> → external
    4. compare : === , !== value and equal type , == value only
    5. document.write() statements are overwriting the entire content of your HTML document
    6. alert box pop up then OK without Cancel : alert("Hello World!")
    7. confirm box : confirm("are you sure!") with OK , Cancel
    8. A prompt box is often used if you want the user to input a value : prompt ("New student", "default value")
    9. parseInt() : change from string to numbers
    10. + with strings → concatenation
    11. new Date().getDay();
      1. new Date(): This creates a new Date object, representing the current date and time.
      2. .getDay(): This method is called on the Date object to retrieve the day of the week. It returns a number between 0 and 6
    12. one statement will be executed even if the condition isn’t justify → do while
    13. document.getElementById("demo").
      1. innerHTML = "Hello World"; inset this value in the HTML
      2. .align = "center" center text
      3. .style.fontSize = "50px";
      4. .style.fontFamily = "impact";
      5. .value; access the value of that tag
    14. (self-invoked) (function() {...})()
    15. A function can be stored in a variable → send values using the variable name
    16. var arr2 = arr1→ (arr2 references the same array as arr1)
    17. var arr2 = [...arr1] → Create a shallow copy using spread syntax
    18. valid → document.write(Math.min(...arr2) + "<br>");
    19. invalid → document.write(Math.min(arr2) + "<br>");
    20. function() { myFunction(); }: This is an anonymous function that gets executed when the double-click event occurs. Inside this function, myFunction() is called.
      21. <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>
    21. window.onload → when all the elements in the page is loaded then the function is preformed
  • Part Two
    1. Compile JS code: browser
    2. Browser has interpreter by default
    3. JS: most popular scripting language
    4. Java invented: Sun Microsystems
    5. ; optional in JS
    6. Variable = container = unique identifier
    7. alert popup: OK only
    8. confirm box: OK, cancel
    9. prompt box: user input
    10. Function scope: var
    11. Block scope: let, const
    12. new Date: current date + time
    13. Size array dynamic can be changed
    14. In array: number, subscript, index
    15. Events: things happen to HTML
    16. JavaScript reacts to events
    17. onload called by window.onload
    18. Self-invoked Function: (function myFunction { }())
    19. Min, max in array: Math.max(...array_name)
    20. Random value between 0 and 90: Math.random() * 90

©sameer fakhoury

GitHubLinkedIn