js（笔记）

js如何使用脚本

使用< script > 元素嵌入JavaScript代码时 ，只须为< script >指定type属性
如果要通过< script >元素来包含外部JavaScript文件，那么src属性就是必需的。这个属性的值是一个指向外部JavaScript文件的链接，例如: < script type=“text/javascript” src="./js/index.js">< /script>

标签的位置

按照传统的做法，所有< script >元素都应该放在页面的 < head>元素中，这种做法的目的就是把所有外部文件（包括css文件和JavaScript文件）的引用都放在相同的地方，可是，在文档的< head>元素中包含所有JavaScript文件，意味着必须等到全部JavaScript代码都被下载‘解析和执行完成以后，才能开始呈现页面的内容（浏览器在遇到< body>标签时才开始呈现内容）。对于那些需要很多JavaScript代码的页面来说，这无疑会导致浏览器在呈现页面时出现明显的延迟，而延迟期间的浏览器窗口将是一片空白。为了避免这个问题，现在web应用程序一般都把全部JavaScript引用放在< body>元素中页面内容的后面。

变量

声明变量 使用变量的时候一定要初始化
如何声明
* 声明变量的关键字 var（js里面区分大小写**** VAR）**
js里面的数据类型 number string boolean undefined object function**
变量js里面可以分：两种变量 局部变量 全局变量 （相对的）**
相对的
全局变量
在事件或者方法之外的变量 —全局变量

    局部变量 --事件或者方法内部的变量----局部变量
     ***

    <script>
        /*
         * js基本语法  变量
         * 变量可以分为变量  常量（只读）
         * 变量是啥？？  可以变的量
         * 
         * 声明变量的规则：
         * var  变量名称  =  初始化
         *
         * */
        var a;  //undefined  未定义
        //
        a = 10;
        console.log(a);
        //变量声明同时初始化
        var b = 10;
        console.log(b);
        //同时声明多个变量
        var c, d;
        console.log(c, d);
        //声明多个时候初始化
        var e, f = 5;
        console.log(e, f);

        /*
         * 区分大小写
         * */
        var h = 20;
        var H = 15;
        console.log(h, H);
        //typeof 检测变量的数据类型
        var a1 = 1;
        console.log(typeof a1);
        var a2 = "abc";
        console.log(typeof a2);
        var a3 = true;
        console.log(typeof a3);
        var a4 = null;
        console.log(typeof  a4);//object
        var a5;
        console.log(typeof a5);
        var a6 = function () {

        }
        console.log(typeof  a6);


        /*
         * 相对的
         * 全局变量
         *在事件或者方法之外的变量   ---全局变量
         *
         * 局部变量 --事件或者方法内部的变量----局部变量
         *
         * 变量名称冲突  就近选择
         * */
        var m1 = 20;
        function mm1() {
            var m2 = 30;
            console.log(m1);
            var m1 = 100;
            console.log(m1, m2);
        }
        mm1();
        /* function mm2(){
         console.log(m1,m2);
         }
         mm2();*/

    </script>

js里面变量不带关键字的问题

<script>
      不带var  默认为全局变量
        function showData(){
            var a=10;		//定义了showDate（）函数的一个局部变量
            b=20;				//定义了一个全局变量b  虽然这个变量定义在showDate（）里面  
            							因为不带var    所以b是全局变量
            console.log(a,b);
        }
        showData();
        function showinfo(){

            console.log(b);
        }
        showinfo();
        //带var 的变量  不可以删除   不带的可以删除   configurable 的值  true可以删除  false不能删除   
        var m=1;
        c=2;
        console.log(Object.getOwnPropertyDescriptor(window,'m'));
        console.log(Object.getOwnPropertyDescriptor(window,'c'));
        delete  m;
        console.log(m);
        delete  c;
        console.log(c);//上一条语句删除了c变量   所以输出会出现ReferenceError: c is not defined
    </script>

字符串里面的常用方法

<script>
    var str="abcdefg";
    console.log(str.indexOf("m"));//一个参数   找到了返回当前字符的索引位置   没找到直接返回-1
    console.log(str.indexOf("c"));//一个参数   找到了返回当前字符的索引位置   找到直接返回该字符的索引位
    console.log(str.indexOf("b",0));//两个参数  找到字符返回字符的索引位置 没找到返回-1 indexOf("字符",从哪个位置开始找)
    console.log(str.lastIndexOf("c"));//str.lastIndexOf()从后往前面找  类似indexOf
    console.log(str.lastIndexOf("b",3));//类似indexOf
    //遍历字符串  获取每个字符的索引位
    //遍历
    for(index in str){
        console.log(str[index]);//将字符串输出
        console.log(str.charAt(3));//根据索引获取对应的字符
        console.log(str.charCodeAt(0));//根据索引获取对应的ascii值

    }
     var hj=97;
    console.log(String.fromCharCode(hj));//根据ascii值获取相应字符
    console.log(str.split(""));//以什么符号划分为集合
     var as=str.split("");//给变量as赋值一个集合
    console.log(as.join("|"));//以什么符号将集合连接成字符串
    //字符串的拼接
    var c1="abc";
        C2="DEF";//定义了两个变量并且对变量初始化
    console.log(c1.concat(C2));//将两个字符串拼接 字符串的拼接   concat   合并
    console.log(c1.replace("b","B"));//替换 replace  替换
    //字符串的截取   substr(index,length)
    console.log(str.substr(1,4));//从索引位为1的位置截取4个数
    console.log(str.substring(1,4));//从索引位为1的位置截取到第四位 取小数取到3 截到第三位*/
</script>

js里面的函数

 <script>
        /*
        * js里面的函数问题
        * 什么是函数？  （方法   调用完成  ）
        *函数的声明规则   关键字  function
        * function name(){}
        * 函数的调用规则  name();
        * 函数的声明提前  在代码执行之前提前声明
        * */
        //声明函数
        name();
        function name(){
            console.log(1);
        }
        //函数里面的其他问题
        //参数问题   返回值问题   函数的自执行问题  匿名函数
        /*
        * 1.函数的参数   参数：形参   调用函数传递的值  实参
        * */
        student(1,2,3);
        function student(name,sex,age){
            console.log(name,sex,age);
        }
        //无参函数

        //arguments  函数特有的属性  里面是函数的相关参数
        stu(1,2,3,4,5,6);
        function stu(){
            /*arguments.length*/// 参数列表的长度
            console.log(arguments[0],arguments[1],arguments[2],arguments[3]);
        }
        //函数有无返回值问题  return  返回  直接跳出  后续代码不执行
        console.log(showname());
        function showname(){
            //代码
            return 1;
        }

        //自执行函数   匿名函数 函数没有名称
        (function (){
            console.log(123);
        })();
        (function (a,b){
            console.log(a,b);
        })(1,2);

        //匿名函数 函数没有名称
        console.log(fun);//变量也可以提前声明
        //fun()   报错   fun is not function
        //下面这种声明方式的函数  不能被提前声明
        var fun=function (){
            console.log(1);
        }
        fun();


    </script>

循环

for（初值;条件;表达式）{//代码}

<script>
/*
         * 最简单的for怎么写  死循环
         * */
        /*for(;;){

         }*/
    var a=0;
        while(a<10){ 			//while后面的括号里是满足循环的条件
            console.log( a++);
    }
    do{								// do while 循环至少进行一次
        a++;							和while循环一样  while后面的括号里是满足循环的条件
        console.log(a);		
    }while(a<0);
</script>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            text-align: center;
        }
        span{
            display: inline-block;
            width: 100px;
            height: 30px;
            border: 1px solid black;
            text-align: center;
            line-height: 30px;
            background:linear-gradient(#ffda7a, #ffbf67);
            box-sizing: border-box;
        }
    </style>
</head>
<body>
<script>
    //金字塔线条

    for(i=0;i<50;i++){
        document.write("<hr style='width:"+(i*10)+"px '/>");
    }
    var s="ab";
    var f="cd";
    var h="efg";
    console.log("ab"+"cd"+"efg");
    //金字塔 乘法表
    var i=1,j=0;
    for(i=1;i<10;i++){
        for(j=1;j<=i;j++){
            console.log(i+"*"+j+"="+(i*j));
            document.write("<span>"+i+"*"+j+"="+(i*j)+((i*j)<10?"&nbsp;&nbsp;&nbsp;":"&nbsp;")+"</span>");
        }
        document.write("<br/>");
    }
    //平行四边形
    for(i=0;i<10;i++){
        for(k=i;k<=5*i;k++) {
            document.write("&nbsp;&nbsp;&nbsp;");
        }
        for(j=0;j<50;j++){
            document.write("*");
        }
        document.write("<br/>");

    }
</script>
</body>
</html>

闭包

 <script>
        /*
         * 什么是闭包：使用别人的私有变量
         * 优缺点：
         * 缺点：会将闭包的值存在内存里面  会占用内存   ----网页的内存泄露
         * 有点：可以使用局部变量
         *
         * 在做开发的时候尽量避免使用闭包
         *
         * */
        function fun1(){
         var a=10;
         return a;
         }
         function fun2(){
         console.log(fun1());
         }
         fun2();

    </script>

逻辑结构

		/* 逻辑选择结构   if  逻辑判断
        *if()判断的条件  成立或者不成立
      
        * 运算符：
        * 数学运算符  
        * + - * / % ++ --
        *  逻辑运算符
        * && ||  !
        *  比较运算符
        * > < >= <= !=
        *
        * = == ===(= 赋值  ==判断值一样 ===值和类型 )
        * 三元运算符  条件？true：false
        * */
       /* ++ -- 前置或者后置  （前置先++ -- 在运算，后置 先运算在++ --）*/
        var a=1;
        a++;
        console.log(a);//2
        a--;
        console.log(a);//1

        var a1=1;
        var a2=3;
        var a4=5;
        var m=a1+(a2*(--a4));//m=13
        console.log(m,a4);//13  4
        console.log(2 / 5);//0.4
         /*条件选择*/
       /* switch(条件)
        {
            case : break;
            case : break;
            case : break;
            default : break;
        }*/
         var pay="支付宝支付";
         var res=1;
         var price=200;
         var num=2;
         /*break  跳出当前结构*/
         switch (pay){
             case "微信支付":
                 res=0.95;
                 break;
             case "支付宝支付":
                 res=0.85;
                 break;
             default :
                 res=1;
                 break;
         }
         var totle=price*num*res;
         console.log(totle);

逻辑结构的一点算法题

<script>
    var price=100;
    var res;
    var p="微信支付";
    var together;
    if(p=="微信支付"){
        res=0.5;
    }
    else if(p=="支付宝支付"){
        res=0.8;
    }
        else{
            res=1;
         }
    together=price*res;
    console.log(together);
    p="支付宝支付";
    switch(p){
        case "微信支付":
            res=0.5;
            break;
        case "支付宝支付":
            res=0.8;
            break;
        default :res=1;
    }
    together=price*res;
    console.log(together);
//1-100内的所有素数
    for(i=2;i<100;i++){
        var flag=1;
        for(j=2;j<i;j++){
            if(i%j==0){
                flag=0;
            }
        }
        if(flag==1){
            console.log(i+"素数");
        }
    }
    //几个人围成一圈。从1开始报数,但逢尾数是7或者7的倍数,则不去报数,要喊过。如果犯规则要“惩罚”。
    for(i=1;i<60;i++){
        var flag=1;
        if(i%10==7||i%7==0){
           flag=0;
        }
        if(flag==1){
            console.log(i);
        }
    }
    for(i=1;i<60;i++){
        if(!(i%7==0||i%10==7)){
            console.log(i);
        }
    }
    //递归
    //阶乘
    function fun(num){
        if(num==1){
            return 1;
        }
        else{
            return num*fun(num-1);
        }
    }
    console.log(fun(5));
    //斐波那契数列
    function feibonacci(number){
        if(number==2||number==1){
            return 1;
        }
        else{
            return feibonacci(number-1)+feibonacci(number-2);
        }
    }
    console.log(feibonacci(6));
//寻找1-1000能被五整除或者能被六整除的数字
    for(i=1;i<1000;i++){
        if(i%5==0||i%6==0){
            console.log(i);
        }
    }
    //带var的变量不可以删除  不带var的可以删除
   /* var a=1;
    c=0;
    delete c
    console.log(c);*/
    //不带var 默认全局变量
    function name() {
        var b = 10;
        d = 100;
        console.log(b);
        console.log(d);
    }
    name();
    function name1(){
       // console.log(b);
        console.log(d);
    }
    name1();
</script>