【JavaScript】入门笔记

约定不等于承诺〃 2022-01-11 04:07 260阅读 0赞

--------------------

**目录**

1.基础知识

2.数组与字符串

3.函数

4.对象

5.BOM:浏览器对象模型

6.DOM：文档对象模型

--------------------

# 1.基础知识 #

**1.基础**

*  <script type="text/javascript"></script>一般写在头文件中，一种弱语言，可以写多个，变量赋值后不要改变类型，关键字区分大小写，顾名思义，不能以数字开头。
 *  alert("hello world!");警告框显示
 *  document.write("hello world");打印
 *  <script type="text/javascript" src="demo.js">引入外部语句

**2.自动数据类型**

var temp="1"+1;
    alert(temp);
    var tmp=1-"2";//-1
    var tmp=1-"2a";//NaN
    alert(tmp);

*  运算符：算术、关系、逻辑、自增、自减、赋值；
 *  自动类型转换：任何类型的数据和字符串相加，其他数据类型自动转换为字符串，表示字符串拼接；
 *  查看语法错误：谷歌浏览器：chome控制台F12；

**3.表达式和赋值**

**代码规范**

1.注意层级缩进；tab=4空格；

2.； ，后面跟空格 运算符=+前后空格；

3.每条语句加；

**看表达式：**

1.功能；

2.表达式值，比如100, 2+3；

3.细分：算术表达式；

赋值运算符：= 复合赋值运算：+=

**4.强制数据类型**

1.除了相加操作，任何数据类型与数字做运算，其他类型都会自动转换为数字在运算；

2.通过Boolean()强制转换为布尔型，数字0转成布尔为false，非0均为true；空字符串转为false，否则为true；特殊转为false；

3.Number（）将别的数字类型转为数字；非数字字符串转为NaN; 1.特殊：null：0；underined：NaN

4.parseInt()取整 20a转为20

5.parseFloat() 取浮点数

6.分母可以取0；

**5.运算符**

5.1 一元运算符

只能操作一个值的运算符；a++，a--；--a；++a

5.2 关系运算符

1. 比较字符创编码值，字符以二进制方式存储，可以转换为十进制进行比较，ASCII码表 ；

2.逐位比较；

3.两个操作数有一个是数值，则将另外一个转为数值；

**在等于和不等于比较上**，非数值：

1.一个操作数为布尔值，则比较前转为数值；

2.一个操作数为字符串，比较前转为数值；

3.一个为NaN,则==转为false，！=为true；

全等和全不等上====，！==，判断值相等，数据类型也必须相等

5.3 逻辑运算符

&&，||，！

6.流程语句

选择语句：

if(){
    
           }else if(){
    
           }
               else{
               
               }
    }

switch和三目：

// switch(){
        //     case 常量1：
        //     break;
        //     case 常量2；
        //     break;
        //     default:
        //         break;
    
        // }
    /*
            三目：表达式1？表达式2：表达式3；
    */

循环语句：

1.while

2.dowhile

3.for

4.break,continue;

--------------------

# 2.数组与字符串 #

1.数组定义

var arr=[1,true,"hello"];
    alert(arr);
    alert(arr[0]);

2.属性和遍历

var arr=[1,true,"hello"];
       
        alert(arr.length);//属性
        var srr=[10,20,30,40];
        alert(srr[1+2]);
        var arr=[];
        
        for(var i=0;i<10;i++)
        {
            arr[i]=Math.random();//随机数
        }
        alert(arr);
        
        for (var i in arr)//效率高
        {
            document.write(arr[i]+"<br />");
        }

3.栈方法和队列方法

4.方法

5.二维数组

在数组元素中元素还为数组

var arr=\[\[\] \[\] \[\]\]

6.字符串

**概念**

var str="hello";//创建
      alert(str.length);//属性
      alert(str[1]);//访问

**字符串.方法()**

--------------------

# 3.函数 #

1.函数分类

1.无参 function 函数名（）\{

函数体

function print(){
              for(var i=0;i<10;i++){
                  document.write("hello world! <br/>");
              }
     }

2.有参函数

function print(n){
              for(var i=0;i<n;i++){
                  document.write("hello world! <br/>");
              }
      }
    
      print(5);

2.内置函数：alert()······

3.自定义函数：函数名为标识符

4.arguments数组

function sum(){
        for(var i=0;i<arguments.length;i++){
            sum += arguments[i];
        }
        alert(sum);
    }
    sum(3,4,5,6);

2.返回值

function add(num1,num2){
             
             return num1+num2;
          }
    
        var result=add(3,4);
        alert(result);

3.作用域

var a=10;
    function sum(){
        var a=5;
        alert(a);
     }
     alert(a);//10
     sum();//5
     alert(a);//10

4.递归

*  面试会用，但是工作一般禁止，如sum（100）=sum(99)+100;

function sum(n){
         if(n==1){
             return 1;
          }
          return sum(n-1)+n;
    }
    alert(sum(100));

5.事件驱动函数

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script type="text/javascript">
            window.onload=function(){//页面加载完毕才执行
                var oBtn=document.getElementById("btn");
                oBtn.onclick=function(){
                    alert(oBtn);
                }
          
           }  
       </script>
    </head>
    <body>
        <input type="button" value="按钮" id="btn" >
    </body>
    </html>

--------------------

# 4.对象 #

1.创建

常用：var person=\{\}；

日期对象：var d=new Date();

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjQzNjk0_size_16_color_FFFFFF_t_70][]

2.定时器

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script type="text/javascript">
            var i=0;
            window.onload=function(){
                var oBtn=document.getElementById("btn");
    
                oBtn.onclick=function(){//点击后显示
                    var timer=setInterval(function(){//匿名函数
                        document.write(i++ +"<br />");
                        if (i==5){
                            clearInterval(timer);
                        }
                    },1000);//函数，毫秒数
                }
            }
        </script>
    </head>
    <body>
        <input type="button" id="btn" value="按钮" >
    </body>
    </html>

--------------------

# 5.BOM:浏览器对象模型 #

1.对话框

var res= confirm("请选择确定和取消");
    alert(res);
    var aee=prompt("请输入一个数",9);

2.open

3.history对象

4.字符串实例

?id=5&search=ok

获取url中search，通过传入对应的key，返回key对应的value

例子：传入id，返回5

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script type="text/javascript">
        /*?id=5&search=ok
            获取url中search，通过传入对应的key，返回key对应的value
            例子：传入id，返回5
        */
    
        function getValue(search,key){
            var start=search.indexOf(key);//返回第一次出现的位置，找不到就返回-1
            if(start == -1){
                return;
            }else{
                var end=search.indexOf("&",start);//第2个参数是查找的起始位置,O要大写
                if(end==-1){
                end=search.length;
                }
            }
            var str=search.substring(start,end);//提取子字符串
            // alert(str)
            var arr=str.split("=");
            return arr[1];
           
        }
        var search = "?id=5&search=ok";
       alert(getValue(search,"id"));
       alert(getValue(search,"search"));
    
        </script>
    </head>
    <body>
    </body>
    </html>

--------------------

# 6.DOM：文档对象模型 #

1.元素节点

innerHTML 获取元素节点标签间的内容

id； className ；tagName 获取元素节点的标签名；name

1.1Id节点

document.getElementById("div1");

1.2 TagName节点

document.getElementByTagName

参数：标签名

功能：获取当前页面上所有符合该标签名标准的元素节点

返回值：数组

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script type="text/javascript">
          window.onload=function(){
            var oDiv=document.getElementsByTagName("li");
            alert(oDiv);//[object HTMLCollection]
            alert(oDiv.length);//8
            var oli=document.getElementById("ul1");
            var oLi=oli.getElementsByTagName("li");
            alert(oLi.length);//4
            for(var i=0;i<oLi.length;i++){
              alert(oLi[i].innerHTML);// 1111 333 444 555
            }
          }
        </script>
    </head>
    <body>
    <ul id="ul1">
      <li>11111</li>
      <li>333</li>
      <li>444</li>
      <li>555</li>
    </ul>
    <ol>
        <li>11111</li>
        <li>333</li>
        <li>444</li>
        <li>555</li>
      </ol>
    </body>
    </html>

1.3 Name节点

document.getElementsByName()

参数：name的值

返回值：数组

**只有文本输入框的元素节点才有**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script type="text/javascript">
          window.onload=function(){
            var oDiv=document.getElementsByName("hello");
            alert(oDiv.length);
          }
        </script>
    </head>
    <body>
    <div name="hello">
    </div>
    <span name="hello"></span>
    <input name="hello">
    </body>
    </html>

1.4 ClassName节点

document.getElementsByClassName()

参数：calss

返回值：数组

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script type="text/javascript">
          window.onload=function(){
            var oDiv=document.getElementsByClassName("box");
            alert(oDiv.length);
          }
        </script>
    </head>
    <body>
        <ul id="ul1">
            <li>11111</li>
            <li class="box">333</li>
            <li>444</li>
            <li>555</li>
          </ul>
          <ol>
              <li>11111</li>
              <li  class="box">333</li>
              <li>444</li>
              <li  class="box">555</li>
          </ol>
    </body>
    </html>

1.5 封装函数

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        
        <script type="text/javascript">
        //封装函数简化操作，css选择器,id,.className,tagName,name=xxx,
            function $(vArg){
                switch(vArg[0]){
                    case "#"://id
                        return document.getElementById(vArg.substring(1));
                    break;
                    case "."://className
                        return document.getElementsByClassName(vArg.substring(1));
                        break;
                    default:
                    var str=vArg.substring(0,5);
                    if(str=="name="){
                        return document.getElementsByName(vArg.substring(5));
                       
                    }else{
                        return document.getElementsByTagName(vArg);
    
                    }
                    break;
      
                }
            }
         
            window.onload=function(){
            alert($("#div1").innerHTML);
            alert($(".box").length);
            alert($("div").length);
            alert($("name=hello").length);
          
       }
       
        </script>
    </head>
    <body>
       <div id="div1">11111</div>
       <div class="box">222</div>
       <div class="box">3333</div>
       <div name="hello">4444</div>
    </body>
    </html>

2.获取当前样式

getComputedStyle

3.操作当前节点元素

setAttribute，removeAttribute

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0MjQzNjk0_size_16_color_FFFFFF_t_70]: /images/20220111/956f8c446c964fecb3a04157a9518fa4.png