js 笔记

本文介绍了JavaScript的基本语法,包括变量、事件、循环和数组操作。讨论了数据类型如number、string、boolean,以及Math对象在处理数学运算中的应用。还涉及函数的使用、对象的概念以及日期处理。
摘要由CSDN通过智能技术生成

--
<script src="***.js"></script> -写在最后-连接js
学习js,需要学习什么?
        1.基本语法 
        2.事件
        3.对象
//----注销代码
boolean含义:  1==true(真)
    2==false(错)
break-----------直接退出
continue--------退出,并进入下次循环
Iterator -- 可迭代
 a += i-----------循环累加
(for(var j=1;j<i;j++){
    if(i % j == 0){}
    })----------------求因子
push()------可向数组的末尾添加一个或多个元素,并返回新的长度。
var log = document.getElementById ("***")----js连接到id为***的div.
.toFixed(*)--------保留*为位小数
console.log(Math.max.apply(null,arr));-------求arr数组最大值(ES5)
console.log(Math.max(...arr));-------------求arr数组最大值(ES6)
-----------------------------------------
var * = *; ----------------------------------------- 用于声明变量 
let * = *; ----------------------------------------- 一样用于声明变量,但只能用于 块结构 中
var * = prompt("***"); ----------------------------- 输入框 ,输入内容(*)输入提示(***)

document.write(""); -------------------------------- 在页面显示

console.log("*");----------------------------------- 在页面控制器查看

alert("");------------------------------------------ 警告弹出框,仅确定

confirm(""); --------------------------------------- 选择弹出框,当用户点击确定或取消时,都会得到对应的点击结果

prompt("");----------------------------------------- 提示弹出框

document.write("");--------------------------------- 在html文档中,书写一段内容

console.log("");------------------------------------ 在控制台进行内容输出,主要用于代码调试,控制器查看

\n-------------------------------------------------- 弹出框换行

parseInt()------------------------------------------ 取整数
              
parseFloat()---------------------------------------- 取小数

(* % 2 = 0)----------------------------------------- 取偶数

if(i == *){break;}---------------------------------- 满足条件停止循环

&& :并且--------------------------------------------  多个条件必须同时成立 
|| :或者--------------------------------------------  多个条件只要有一个条件成立 
!  :取反

Math.abs(xxx); ------------------------------------- 绝对值
Math.cbrt(x); -------------------------------------- 立方根
Math.sqrt(x); -------------------------------------- 平方根
Math.ceil(x.1); ------------------------------------ 最接近x的最大整数(x+1)
Math.floor(x.1); ----------------------------------- 最接近x的最小整数(x)
max(x, y, z, ..., n)-------------------------------- 最高的数字。
min(x, y, z, ..., n)-------------------------------- 最小的数字。
Math.pow(x,y) -------------------------------------- x的y次幂
Math.round(x) -------------------------------------- x的四舍五入值
Math.random() -------------------------------------- 得到0-1之间的随机小数,不包含1
parseInt(Math.random() * (大 - 小 + 1) + 小)-------- 随机数

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

数组的遍历:------for(var i=0;i<4;i++){console.log(typeof i);}
console.log("-----------");

for..in : 遍历出数组中的下标值,注意,它的数据类型是string
for(var i in arr){console.log(arr[i]);console.log(typeof i);}

for..of : 遍历出数组中的所有元素
for (var item of arr) {console.log(typeof item);}
-------------------------------------------------------------
if(条件1){

        }else if(条件2){

        }else if(条件3){

        }else{

        }
 
---------------------------------------------------------------------
switch(aa){
            case xx: -- switch块中提供的标识的可能取值


            [default]:

            [break]
        }

---------------------------------------------------------------------
for(循环的起始;循环的条件;循环的条件迭代){
        循环体
    break----------直接退出
    continue-------退出,并进入下次循环

    }
---------------------------------------------------------------------------------
代码:
(* % 2 = 0)---偶数
var * = *; -- 用于声明变量 
var * = prompt("***"); ---------输入框 ,输入内容(*)输入提示(***)
document.write(""); -----在页面显示
console.log("*");----在页面控制器查看

number: 整数 ,小数,正数,负数都是number   
         NaN -- not a number -- 这不是一个数字 
string: "" ''  -- 只要有字符串参与的加法运算,都会变成字符串拼接运算

boolean:(布尔),表示逻辑运算中的结果为真或假  true 或 false 

undefinded:未被初始化

parseInt()  -- 将值转换为整数 
parseFloat() -- 将值转换为小数
Number() -- 根据具体数据进行相应转换
运算符号:(+)加(-)减(*)乘(/)除(%)取余
     && || 短路与 短路或
        & |  逻辑与  逻辑或

        位运算符:
            ^ & |

--------------------------------------------------------------------
1.代码位置:
----------------------------
        <script></script> -- 可以出现在页面上的任何位置
        <script src="引入外部js文件"></script>
        <a href="javascript:js代码"></a> -- 可以由a标签主导js的执行
            -- <a href="javascript:void(0)"> -- 拿a为假链接 
        <xx on事件="js"> -- 为元素绑定指定的事件,通过事件触发js的执行
--------------------------------------------------------------------------------
  2.输出语句:
-------------------
    var * = *        -- 用于声明变量 
        alert("");         -- 警告弹出框,仅确定
        confirm("");         -- 选择弹出框,当用户点击确定或取消时,都会得到对应的点击结果
        prompt("");        -- 提示弹出框
    document.write("");     -- 在html文档中,书写一段内容
        console.log("");    -- 在控制台进行内容输出,主要用于代码调试,控制器查看
    \n            -- 弹出框换行

        例:<script>alert("!23");
            confirm("是否注册?");
            document.write("<div style='width:100px;height:100px;border:1px solid red'></div>");
            document.write(123);
                console.log("123123123132");
        </script>
-------------------------------------------------------------------------------------

        变量:可以变化的量

        var -- 用于声明变量 

        初始化 -- 定义了但没有初始值 

    输入语句:
    var a = 1; // 声明了一个变量a,同时为它赋值1
    var b = "abc"; // 声明了一个变量b,同时为它赋值为"abc"

    alert(a);
    var a;
    var a = prompt("请输入你的姓名:"); //声明一个变量a , 同时将输入得到的数据赋值给这个变量
    console.log(c);

        JS中,所有变量的数据类型是由值来决定的,在运算过程中一定要注意数据类型转换的问题
-------------------------------------------------------------------------------------------------
     数据类型:只要是数据,都会有数据类型,js中使用typeof指令查看变量的数据类型
-----------------------------------------------------
        number: 整数 ,小数,正数,负数都是number   
            NaN -- not a number -- 这不是一个数字 

        string: "" ''  -- 只要有字符串参与的加法运算,都会变成字符串拼接运算
        boolean:(布尔),表示逻辑运算中的结果为真或假  true 或 false 
        undefinded:未被初始化
      
        Array,Object,null:以后讲

---------------------------------------------------------------
    数据类型的转换:
--------------------------
        显示转换:
            parseInt()  -- 将值转换为整数 
            parseFloat() -- 将值转换为小数
            Number() -- 根据具体数据进行相应转换

        隐式转换:
            运算过程中,进行- * /的转换,且参与运算的值中都为数字组成的字符串(必须纯数字)
        
--------------------------------------------------------------------------------------------------------
运算符:**2 ---平方
--------------------------------
        算术运算符:+ - * / %
        比较运算符:> < >= <= == != === !==
        赋值运算符:= += -= *= /= %=
        单目运算符:++ --
        三目运算符:布尔表达式 ? 值1:值2; -- 如果布尔表达式的结果为true,那么取值1为整个运算的结果,否则取值2为整个运算的结果
        逻辑运算符:&& || !
        && : 并且  -- 多个条件必须同时成立 
            || : 或者  -- 多个条件只要有一个条件成立 
            !  : 取反
--------------------------------------------------------
 分支语句: 在有条件选择的情况下,对代码进行条件性执行

        单分支:仅当条件成立时,if子句才会执行
        if(条件){
            if子句
        }

        双分支:当条件成立时,执行if子句,否则执行else子句
        if(条件){
            if子句
        }else{
            else子句
        }

        多分支:
        if(条件1){

        }else if(条件2){

        }else if(条件3){

        }else{

        }
-------------------------------------------------------------------------------
switch(aa){
            case xx: -- switch块中提供的标识的可能取值


            [default]:

            [break]
        }

        注意:switch只能用于判断标识的固定取值,不能判断范围

        if:   可以做单条件或多条件的判断,并且可以判断固定值及数据的范围
        switch:只能做固定值的判断 
---------------------------------------------------------------------------------

循环:
        循环必须有开始及结束 
        循环必须要有条件 

    for(循环的起始;循环的条件;循环的条件迭代){

        循环体

    }

    1.定义循环变量(循环的起始) -- 2.进行条件判断 -- true -- 执行循环体 -- 3.迭代循环变量 
                                -- 进行条件判断  -- true -- 执行循环体 -- 迭代循环变量
                                -- 进行条件判断  -- true -- 执行循环体 -- 迭代循环变量
                                。。。。。。。。。-- false -- 循环结束

1.注意死循环  2.循环条件  3.循环值的迭代

---------------------------------------------------------------------------------------------------
Math:js内置对象,用于处理数学操作

        Math.abs(xxx); -- 返回得到xxx的绝对值
        Math.cbrt(x); -- 返回得到x的立方根
        Math.sqrt(x); -- 返回得到x的平方根
        Math.ceil(x); -- 返回最接近x的最大整数
        Math.floor(x); -- 返回最接近x的最小整数 
        max(x, y, z, ..., n)    返回值最高的数字。
        min(x, y, z, ..., n)    返回值最小的数字。
        Math.pow(x,y) -- 返回x的y次幂
        Math.round(x) -- 返回x的四舍五入值
        Math.random() -- 得到0-1之间的随机小数,不包含1
   
----------------------------------------------------------------------------------
 while: 一般用于构建未知循环次数的循环
          for: 一般用于构建已知循环次数的循环

          两者可以相互替换
       var i = 1;

     while(i >= 0){
        console.log("00000");
        i--;
     }

--------------------------------------------------------------------------------
      循环嵌套:
        1.各层循环按自己的规则执行循环
        2.各层循环中的continue或break都只会对自己的循环产生作用
        3.执行中,外层控制轮数,内层控制每轮的次数

    for(var i=1;i<=3;i++){
        for(var j=1;j<=5;j++){
        document.write("*");
        }
             if(i == 2){
            break;
            }
            document.write("<br>");
    }

-----------------------------------------------
 对象:new -- 创建
        new Array(); -- 创建了一个空的新数组
        new Array(值1,值2,值3..) -- 在创建数组时,为该数组赋初始值
        new Array(Number); -- 创建出一个只有初始长度,没有具体值的新数组

    字面值:[]
    length---数组长度
    arguments.length == * -------- 判断数组是否有*个数
    行rowCon
    列colCon
-----------------------
    数组的访问 
        下标 : 
    


    注意: 在js,数组不是定长的,可以在操作过程中,对已知数组的长度进行扩容,也可以访问已知数组中不存在的元素


    */

    // var arr = new Array();//创建了一个空的数组对象 

    // var arr = new Array("a","b","c","d","e");
    // var arr2 = new Array(1,2,"a","b","c");

    // var arr = new Array("a");


    //数组的遍历 :
    for(var i=0;i<4;i++){
        console.log(typeof i);
    }


    console.log("-----------");

    //for..in : 遍历出数组中的下标值,注意,它的数据类型是string
    for(var i in arr){
        // console.log(arr[i]);

        console.log(typeof i);
    }


    //for..of : 遍历出数组中的所有元素
    for (var item of arr) {
        console.log(typeof item);
    }
----------------------------------------------------------------------
Array.isArray(obj) -- 判断obj是否为数组,返回true或false
    // // var arr = [];
    // // arr[0] = [];
    // // arr[0][0] = 1;
------------------------------------------------------------
 函数(方法):将可以完成某一功能的代码进行打包,后期需要使用该功能模块时进行调用 

        function 函数名(形式参数){
            函数体;
            [return]
        }

        function -- 函数声明 
        形式参数列表(形参)-- 在函数声明时,要求当外部调用函数时,必须按照声明规则传递给函数的参数列表
        实际参数列表(实参)-- 在调用函数时,根据函数的形参要求,传递给函数的实际运算数据
        return *-- 返回值* / 函数的结束 

        注意:函数必须通过调用执行

    //求两数相加的和
    // function add(a,b){
    //     var c = a + b;
    //     // console.log(c);
    //     return c;//当函数执行完成后,将c的运算结果作为整个函数的运行结果,返回给调用者
    // }

    // var a = add(12,14);

    // console.log(a * 2);

-------------------------------------------------------------------------------------
js的函数中,形参和实参是不用一一对应的

        如果实参比形参多,形参从左到右一一对应实参
        如果实参比形参少,不够的形参会被赋undefined

        arguments -- 专门用于管理函数中的参数的对象 ,这个对象在函数被调用时自动生成

        重载:如果同一个作用域中有多个重名函数,那么可以通过参数的不同来区分这些函数 

        注意:正常的编码规范中,实参与形参应该对应 
function getArea(){

        if(arguments.length == 1){
            return Math.PI * arguments[0]  * arguments[0] ;
        }else if(arguments.length == 2){
            return arguments[0] * arguments[1];
        }else if(arguments.length == 3){
            return (arguments[0] + arguments[1]) * arguments[2] / 2;
        }

        return false;
    }


    console.log(getArea(5,6));

--------------------------------------------------------------------------------
 /*
        递归:函数自己调用自己,在递归中的函数必须给返回条件
    */

    // function fun1(){
    //     alert("fun1");
    //     fun2();
    //     alert("0000")
    // }

    // function fun2(){
    //     alert("fun2");
    // }


    // fun1();


    // var i = 1;

    // function fun(){
    //     console.log("123");
    //     i++;

    //     if(i == 5){
    //         return ;
    //     }

    //     fun();
    // }


    // fun();

    //求数的阶乘

    //3! = 1*2*3   5! = 1*2 *3 *4*5

-----------------------------------------------------------------------------
 //使用函数作为参数:
    //回调函数
    // function fun(t){
    //     if(typeof t == "function"){
    //         t();
    //     }else{
    //         console.log(t);
    //     }
    // }


    // function test(){
    //     alert("我是test函数");
    // }

    // fun(test);


    //使用函数作为返回值:
    // function fun(){
    //     function t(){
    //         alert("我被返回了");
    //     }

    //     return t;
    // }


    // var f = fun();
    // f();


    //匿名函数 
    // function fun(f){
    //     f();
    // }

    // fun(function(){
    //     alert("我是匿名函数")
    // });

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

        抽像:抽出像的部分

        女朋友 

        功能:这个对象可以完成的
            陪你聊天
            陪你吃饭
            陪你看电影

        属性:修饰这个对象 
            性别
            年龄
            身高
            体重

        具体:
            迪丽热巴

            性别:女
            年龄:28
            身高:172
            体重:100

            功能:
                演电影 
                唱歌 
                参加真人秀
                跳舞

    */


    /*
        万物皆对象 

        把大象放进冰箱要几个步骤 
        
        面向过程开发:开门 - 放 - 关门

        面向对象开发: 
                大象 (体重,体积,走路) 
                冰箱 (门大小,容积,门可以打开/关闭)
                人    (手可以操作冰箱门)


        Object -- 
        . -- 的


    
    */

    //方式一:通过new Object()创建初始对象 
    var obj = new Object();//创建出了一个对象

    obj.color = "red";
    obj.size = "20";
    obj.shape = "长方形";

    obj.save = function(){
        console.log("可以存放小物品");
    }

    obj.save();


    // 方式二:通过字面值: 
    var gf = {
        name:"迪丽热巴",
        age:20,
        hight:172,
        weight:50,

        sing:function(){
            alert(this.name + "会唱歌");
        }

    };


    for(var key in gf){

        if(typeof gf[key] == "function"){
            gf[key]();
        }

    }

---------------------------------------------------------
  console.log(Number.MIN_VALUE);

    var date = new Date();//获取机器当前时间 


    // // date.setFullYear(2020);
    // // date.setMonth(12);

    // // var year = date.getYear();//1900 1970
    // var year = date.getFullYear();//公元纪年
    // var month = date.getMonth();
    // var d = date.getDate();
    // var h = date.getHours();
    // var m = date.getMinutes();
    // var s = date.getSeconds();
    // var ms = date.getMilliseconds();
    // var day = date.getDay();

    // if(s < 10){
    //     s = "0" + s;
    // }

    // console.log(year + "年" + ++month + "月" + d + "日 " + h +":" + m + ":" + s + " " + ms + " 星期" + day);


    // var date = new Date(1000);//从1970年1月1日  00:00:00开始计时后多少毫秒所对应的时间

    // console.log(date);


    var yuandan = new Date(2023,0,1,2,30,59,567);

    // console.log(yuandan);


    var cha = yuandan - date;

    console.log(cha);//获取两个时间节点之间的毫秒差

    //1.做一个时钟,document.write写在页面上
    //2.做一个倒计时,计算从现在到元旦还有多久,精确到秒

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


 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值