web front end -- knowledge speed learning of Javascript

Keywords: Javascript Front-end chrome

Environment construction of JavaScript

Development environment: webstorm, hbulider
Running environment: chrome browser


Knowledge 1

Several ways of writing JavaScript

4. Realize the display of data in the page

5 prompt Popup
5. Define variables

 // var a =1; global variable
         // var a =1;
         // alert(typeof (a))
        // const defines constants
        const pi = 3.12
        For this reason, we generally use let

6. Implement simple algorithm
(the same applies to logical operators & &, |,!, and comparison operators <, >, =)

6. Judgment statement

parseInt//The data type is converted to an integer, but does not include a string
parsefloat//Convert Bookstore type to floating point type

Knowledge 2

Functions of JavaScript:

1. Data verification
2. Web page features
3. Data interaction
4. Back end programming (Node)

Knowledge 3

Dialog box provided by JavaScript
1. Warning box: alert (string)
2. Confirmation box: windows

Knowledge 4

function name [formal parameter list]{
//Function body
//Return return value;
Function name [argument list]

// function  show(msg,name) {
        //     alert(` my name is ${name},${msg} ')
        // }
        // show("123","2334")

        // function add(x,y) {
        //     return x+y;
        // }
        // let a = add(2,3)
        // alert(a)
    //    Anonymous function
       let a=  function () {
           alert("Anonymous function")

        function aa(a,10) 

Knowledge 5

Array array

It must be noted that js array is not the concept of array in java. It is similar to linklist in java. The bottom layer uses a two-way linked list structure

// //How to define an array
        // let arr = new Array()
        // console.log(arr)
        // arr.push(10)
        // arr.push(100)
        // arr.push(1000)
        // //Values can be assigned using subscripts
        // arr[4]=1000;
        // console.log(arr)
        // arr[10]= '123'
        //When defined, the given size
        // let arr2 = new Array(10);
        // arr2.push(100)
        // console.log(arr2)
        //You can give a value when creating an array
        // let arr3 = new Array(1,2,3,"1223","22","233");
        // console.log(arr3)
        //You can do the same
        // let arr4 = [1,2,3]
        // console.log(arr4)
        //Traversal of array
        // let arr = new Array(1,2,3,4)
        // for (let i =0;i<arr.length;++i) {
        //     console.log(arr[i])
        // }
        //*Note: when using the for in structure array in JavaScript to iterate, each value iterated out is a subscript * if the iterated object is an object, the iterated out is the attribute of the object
        function say() {
        let obj = new Object();
        obj.name = "123"
        obj['age'] = 16;
        obj.say = say;//Function object
        for (p in obj) {


//Array mode of es6
        let arr3 = new Array(1,2,3,"1223","22","233");
        for (i of arr3) {
        arr3.forEach(function (item,key) {

Knowledge 6

character string

 //1. For the creation of string, if the characteristics of data, the type of variable is determined by the value
        // let s ="this is a string"
        // console.info(typeof (s))

        //2.JavaScript provides a built-in class, stiring. Here, an object is created
        // let s = new String("this is a string")
        // console.log(typeof s)
        //3. Do not use the new keyword
        let s =String('abc')
        // console.info(s)
        //Gets the length of the string
        // console.log(s.length)
        // console.info(s[0])
        // console.log(s.substr(0,1))
        console.info(s.toUpperCase())//Uppercase conversion
        console.info(s.toLowerCase())//a lowercase letter

        //Traversal string
        // for (i in s) {
        //     console.info(s[i])
        // }

Use of Math functions

        console.log(Math.PI )//PI
        //ceil takes an integer up and floor takes an integer down
        console.log(Math.random()*10)//Take a random number, which will be a decimal, so you can use parseInt to take an integer


Use of setInterval

  function msg() {
            alert("3 Seconds later, I bounced out")
          // clearInterval(timer) / / clear data

BOM and DOM programming:

js provides a set of corresponding API s through which developers can realize various operations (open, close, refresh and reset) on the browser

windows object

js of mobile browser is not applicable to Google, but only to IE

 <button onclick="closeWin();">Click to close the browser</button>
    <button onclick="moveWin();">Mobile browser</button>
    <button onclick="moveWin2();">Mobile browser</button>
    <button onclick="openWin();">Open a new window</button>

    <button onclick="goTop();" style="position: fixed; right: 30px; bottom: 30px;">Back to the top</button>

//    console.info(this)

    function goTop() {
        window.scrollTo(0, 0);//Jump
    function closeWin() {
        if (window.confirm("Are you sure you want to close the browser?")) {
    function moveWin() {
        window.moveTo(100, 200);
    function moveWin2() {
        window.moveBy(100, 200);
    function openWin() {
//        window.open("http://www.baidu.com", "_blank", "toolbar=yes")
        window.open("http://www.baidu.com", "_blank");

History object (a child object of windows, which is mainly responsible for the history of the browser)

    // Represents the number of times the page has been opened

    function myBack() {
//            history.back();
      // go function
       *  If the parameter is 0, it means no jump
       *  If it is a positive number, it means to move forward. What number means to move forward
       *  A negative number is the opposite, indicating a retreat

    function forward() {
      // history.go(1);
<button onclick="forward();">forward</button>
<button onclick="myBack();">back off</button>
<a href="test.html">Next page</a>

Get screen length and width


        console.log(screen.availHeight) // The effective height removes the height of the bottom taskbar

Get computer information (navigator)

// Kernel information obtained

    console.info(navigator.platform) // Returns the code name of the browser

    console.info(window.navigator.cookieEnabled) // Returns a Boolean value indicating whether cookie s are enabled in the browser
    console.info(window.navigator.appVersion) // Returns the platform and version information of the browser
    console.info(window.navigator.appCodeName) // Returns the code name of the browser Mozilla
    // Positioning longitude and latitude with Google Maps
    //    console.info(window.navigator.geolocation)

    // User agent object
    //    console.info(navigator.userAgent)

location object

 // Refresh page
    //    setTimeout(function () {
    //        window.location.reload();
    //    }, 5000);
 // Common properties
    console.info(location.href)   /*Get the website*/
    console.info(location.protocol) /*agreement*/
    console.info(location.host)/*Host plus port*/
    console.info(location.search)/*In order to get the code behind the web address Hello, the purpose is to refresh the page*/

    function openWin() {
        window.location.href = "http://www.baidu.com";

    function openWin2() {
       window.location.href.replace("04.location object.html", "01.history object.html")

document object

  // 1. It is absolutely forbidden to directly use the id operation label
    //        console.log(box)
    //        box.innerHTML = "I modified this content";

    // 2. document.getElementById gets the DOM object by id
    //        let box = document.getElementById("box");
    //        console.log(box);

    // 3. Get a set of tags using the class name
    // What you get through className is a set of tags, which is a collection similar to an array
    // Therefore, if you want to operate the DOM object inside, you need to take it out (subscript) for processing
    //        let boxs = document.getElementsByClassName("box");
    //        console.info(boxs)
    //        boxs[4].innerHTML = "I modified this content";

    // 4. Get the required label group by label name
    //        var divs = document.getElementsByTagName("div");
    //        console.info(divs);

    // 5. Get the DOM object through the name attribute
    // This is usually what form labels need to use
    //        var boxs = document.getElementsByName("box");
    //        console.info(boxs);
    //        boxs[0].checked = true;

    // 6. ES5 two new API s at the same time
    // querySelector can only get one DOM object, so it usually uses the same id
    //        let box = document.querySelector("#box");
    //        let box = document.querySelector(".box");
    //        console.info(box)
    //        Box. InnerHTML = ` < H1 > this tag < / H1 >`

    // let boxs = document.querySelectorAll(".box");
    // console.info(boxs)
    // for (box of boxs){
    //     Box. InnerHTML = ` < H1 > this tag < / H1 > `;
    // }

Operation of DOM properties

 let box = document.getElementById("box");
  //        box.title = "this is my new title";
  //        box.style.color = "red";

  //        box["title"] = "set in array mode"

  // getAttribute  setAttribute()
  var s = box.getAttribute("aa");
  // class recommends passing className
  //        box.className = "box";
  // The following is not recommended
  //        box.setAttribute("class", "box");

DOM events get data and how to change it

<style type="text/css">
        #show {
            height: 300px;
            border: 1px solid red;
<div style="width: 300px;" id="show" onclick="scale()">This is a div</div>
    var _show = document.getElementById("show");
    // 1. The first method: DOM object. style. This method can only obtain inline styles
    //You can only get the width in the style, not the height. What should be set for the height belongs to the in-line style
    // 2. The second method, w3c specifies how to obtain the style value
    function scale() {
        var _show = document.getElementById("show");
        // Obtain the width and height. The data obtained here is with "px"
        var h = getComputedStyle(_show).height;
        var w = getComputedStyle(_show).width;
        console.info(h, w)
        // Because the unit is a string, it needs to be removed first. After the operation is completed, the unit is spliced
        _show.style.height = parseInt(h) + 10 + "px";
        _show.style.width = parseInt(w) + 10 + "px";
        // Get width and height, only in line styles can be obtained
        //offset is to obtain pure data without pixels, which is equivalent to the value
        console.log(_show.offsetHeight, _show.offsetWidth)
        console.log(_show.clientHeight, _show.clientWidth)
        _show.style.height = _show.offsetHeight + 10 + "px";
        _show.style.width = _show.offsetWidth + 10 + "px";

Implementation of lucky draw cases

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <title>Welcome to the lucky draw</title>
        .box {
            width: 800px;
            height: 800px;
            border: 1px solid red;
            margin: auto;
            text-align: center;

        .box > div {
            width: 300px;
            height: 300px;
            background-color: #4c8174;
            border-radius: 50%;
            margin: auto;
            line-height: 300px;
            color: white;
            font-size: 30px;
            font-weight: bold;
            /*margin-top: 50px;*/

        .box > a {
            text-decoration: none;
            font-size: 20px;
            display: inline-block;
            background-image: linear-gradient(to right, skyblue, #4c8174);
            width: 200px;
            height: 50px;
            border-radius: 20px;
            line-height: 50px;
            color: white;
            margin: 30px;

        .bg-red {
            background-color: red !important;
            /*important Set the weight and let him use it first*/

        .bg-primary {
            background-color: #8A2BE2 !important;

        .bg-success {
            background-color: green !important;
<div class="box">
    <div id="content">prize</div>
    <a href="#"Id =" start "onclick =" run(); "> start lottery</a>

<script !src="">
    /*The principle is that random goods will jump when the lottery starts, and the random function is not used when the lottery stops*/
    // Define an array
    const goods = ["iphone13 MAX", "BMW 5", "One computer", "notebook", "pen", "Router", "java Course coupon", "doll", "A bowl of beef noodles", "National Day 7 Tour"];

    let flag = true;/*boolean Value control*/
    let content = document.getElementById("content");
    let start = document.querySelector("#start");
    let timer;/*Set the global variable so that the following functions can use this variable*/
    let index;
    function run() {
        if (flag) {
            flag = false;
            start.innerText = "Stop the lottery";
            // content.className = "bg-red";
            content.style.background = "yellow"
            //Set the loop function to randomly extract the goods
            timer = window.setInterval(function () {
                index = Math.floor(Math.random() * goods.length);/*Take a value at random and take an integer down*/
                let g = goods[index];/*Obtain the data of each prize through subscript*/

                    content.textContent = g;/*Function to get product data*/

            }, 10);
        } else {
            flag = true;
            start.innerText = "Start the lottery";
            content.className = "bg-primary";/*Get data style*/


Three elements of event: event source, event object and event handler
How does Js handle events
1. Directly use onxxx to bind events. Normally, this keyword points to windows objects
2. If you want to handle complex events, it is recommended to obtain DOM objects through object binding
dom object. xxx = func
this represents the event object itself
Benefits: 1. Realize three-tier separation, and disconnect the direct binding relationship between html and js. 2
2. You can get the event object directly

3. Event monitoring
Specify the flow mode of event flow (bubble flow, capture flow)

Posted by DigitalDesign on Mon, 08 Nov 2021 12:57:02 -0800