[Lecture 2] JavaScript and Regex

• Why JS?
  “PG”
  • JS is similar to other programming languages with some limitations, so why JS?
  • Use it as a programming Language? No, never
  • https://gist.githubusercontent.com/jonathantneal/656b23d080994df1587f770f61d88c77/raw/205003863c3b3a93e252f3928918a3e348384b62/harlem-shake.js
  • History of JS:
    • JS was developed as LiveScript by NetScape
    • When releasing, there was a sudden hype in the popularity of Java, so they named it JS
    • Even the creator of Node.js, ​ Ryan Dahl​ , eventually realized the limitations of the system before leaving to work on other projects. He was very transparent about it:
    • "​ […] I think Node is not the best system to build a massive server web. I
    • would use ​ Go ​ for that. And honestly, that’s the reason why I left Node.
    • It was the realization that: oh, actually, this is not the best server-side
    • system ever ​ ."
• Properties of JS
  “PG”
  • JavaScript cannot read files from or write them to the file system on the computer.
  • JavaScript cannot establish any connection to whatever computer, except to download a new HTML page or to send mail. This, too, would create unacceptable hazards
  • You cannot read out the history of the browser. Thus a malicious site owner cannot write a script that finds out where you surfed to recently
  • You cannot set the value of a file upload field
• JS syntax
  “PG”
  • Semicolon? Yes and No
  • Hoisting, Closure
  • Declare using let, const, var
    • function run(){
      • let foo=‘Foo’
      • var bar=‘Bar’
      • console.log(foo, bar)
      • {
        • let baz=‘Bazz’
        • var rap=‘Rapp’
        • console.log(baz, rap)
      • }
      • console.log(rap)
      • console.log(baz)
    • }
  • Output
  • Input
  • looping
  • if, else if ,else
  • switch
• What is document and Document Object Model?
  “TV”
  • Tree structure which consists objects
  • When a web page loads, browser creates DOM of page
  • Window -> document -> <form> -> <input>
  • Node, Element, Child -> Same terminologies
• DOM Creation and Manipulation
  “TV”
  • createElement
  • createTextNode
  • appendChild
    • var node = document.createElement(“LI”);
    • var textnode = document.createTextNode(“Water”);
    • node.appendChild(textnode);
    • document.getElementById(“myList”).appendChild(node);
  • cloneNode
  • adoptNode
    • var frame = document.getElementsByTagName(“IFRAME”)[0]
    • var h = frame.contentWindow.document.getElementsByTagName(“H1”)[0];
    • var x = document.adoptNode(h);
  • importNode
    • var frame = document.getElementsByTagName(“iframe”)[0]
    • var h = frame.contentWindow.document.getElementsByTagName(“H1”)[0];
    • var x = document.importNode(h, true);
  • querySelector
  • getElementById,ClassName,TagName
• JS datatypes and operations
  “TV”
  • typeOf
  • String - trim, toUpper, toLower, charAt, concat, replace, search
  • Number - prototype
  • Operators - typeof, delete, in, void
  • Statements - general JS lines
  • Math - Math.round(4.5), Math.PI
  • Date - new Date()
  • Array
  • Boolean
  • Error
  • RegExp /[]/i,g,m
  • Global
  • JSON
  • Conversion
• Event listeners
  “PG”
  • Onclick
  • Onchange
  • Onmouseover
  • Onmouseout
  • Onkeydown
  • Onload
• Special functionalities
  “TV”
  • Methods string
  • Indexof
  • Lastindexof
  • Search
  • Global match flag
• AJAX
  • HTTP request: GET, POST
  • API - Toffee ki dukan
• JS sync/async
  “PG”
  • JS is sync+async

• Jquery

• Event Loop
• Regex
  • Regular Expressions
    • Special text string for describing a search pattern
  • Why does one need it?
    • Explain with mobile number’s example or email example.
      • +91 7302202105
      • 7302202105
      • 917302202105
      • (+91 |91)?[6-9]{1}[0-9]{9}
    • Spelling
      • gr[ae]y - check gray or grey
      • colou?r - check color or colour
  • Groups
    • Capturing Group (abc) -> abc
    • Character class [abc] -> a or b or c
  • Backreference
    • He (is|was) nice but \1 stupid
  • Special Characters
    • | - or in capturing group
    • ^
      • not in character class
      • asserts the starting position in a line
    • $ - asserts the ending position in a string
    • . - matches any character except line terminators (\n)
    • \s - Any whitespace character - (\s\t\r\n) : \S
    • \w - [a-zA-Z0-9_] : \W
    • \ - escape sequence
  • Quantifiers
    • Quantity {n} - exactly n characters
    • {n, } - n or more
    • ? - 0 or 1
    • * - 0 or more
    • + - 1 or more
  • Greedy Quanitifier
    • How do they work?
    • .+b - aaaaaaabcd
  • Lazy quantifier
    • a “witch” and her “broom” is one
    • “.+?” or “.++” or “.+”
  • Possessive Quantifier
    • Regex: “.*+” "abc"x
    • Backtracking to abc", " fails to match x. Backtracking to abc, " matches ". An overall match “abc” is found.