TypechoJoeTheme

九肽荷尔蒙's Blog

用户名
密码
用户名
邮箱

九肽荷尔蒙

浅尝辄止,贪得无厌

Javascript笔记(一)

2021-10-26
/
0 评论
/
58 阅读
/
正在检测是否收录...
10/26
## JavaScript

学习目标

1. js是什么
2. js作用(适用范围)
3. 组成部分
4. js使用
5. 核心

一、js是什么

1.js是一门编程语言

2.轻量级,跨平台,运行效率块

3.由浏览器直接解析,不需要编译

4.容易学习,基于对象

二、作用

  1. 给html中标签元素设置行为动作
  2. 进行表单验证
  3. 发送Ajax请求

三、组成

  1. ECMAScript: js中变量的定义 函数定义 对象的定义等等
  2. DOM:Document Object Model 文档对象模型 对标签元素进行增删改查
  3. BOM:Browser Object Model 浏览器对象模型 操作浏览器

四、如何使用

1.行内式   2.内嵌式  3.外链式
1.行内式:标签元素内部书写js代码
<h1 onclick="alert('疼!')">行内式</h1>
2.内嵌式:html中添加script标签,标签中书写js代码
<h2>内嵌式</h2>
    <script>
        document.getElementsByTagName("h2")[0].onclick = function(){
            alert("很疼!");
        }
    </script> 
3.外链式:外部创建js文件,文件中书写index.js代码,使用script标签引入到对应html中
    
  <h3>外链式</h3>
  <script src="./js/index.js"></script>  

五、JS的核心(ECMAScript)

  1. 变量定义
  2. 数据类型
  3. 运算符
  4. 流程控制
  5. 对象(基本对象 函数对象)
①变量定义

格式: var 变量名 = 值

特点:可以是任意类型的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var a;
        console.log(a);//undefined
        a = 12;
        console.log(a);
        a = "呵呵哒";
        console.log(a);
        a = true;
        console.log(a);
    </script>
</body>
</html>
②数据类型
  1. number类型(整数,小数)
  2. string类型(单字符、多字符)
  3. boolean类型(true/false)
  4. object对象类型: array数组 null类型 正则对象 函数对象(除了上述类型都是对象)等等
  5. undefined未定义:没有声明的遍历
测试某一个遍历的类型:typeOf(测试量)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var a = -12;
        var b = 3.14;
        console.log(typeof(a));//number
        console.log(typeof(b));//number
        var str1 = 'a';
        var str2 = "abcdfef";
        console.log(typeof(str1));//string
        console.log(typeof(str2));//string
        var flag = false;
        console.log(typeof(flag));//boolean
        var obj = null;
        console.log(typeof(obj));//object
        var obj2 = {
            name:'张三',
            age:20,
            sex:'女'
        }
        console.log(typeof(obj2));//object
    </script>
</body>
</html>
③运算符
  1. 算数运算符 + - * / % ++ --
  2. 赋值运算符 = += -= *= /=
  3. 比较运算符 > < >= <= == != === !==
  4. 逻辑运算符 & | ! && ||
  5. 三目运算符(三元运算符) 表达式?值1:值2
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 
        console.log("-------1.算数运算符-----------")
        var a = -10;
        var b = -3;
        var c = a%b;
        console.log(c);//-1

        a = 3;
        b = 4;
        var  c = a++  +  ++a;
        console.log(a);//5
        console.log(c);//8
        console.log("--------2.比较运算符----------")
        console.log(a>=++b);//true

        var aa = 12;
        var bb = "12";
        console.log(aa==bb);//先进性类型转换再比较
        console.log(aa===bb);//全等  必须要类型一致
        console.log(bb);
       console.log(Number(bb));
       console.log(Number("12px"));//NaN  属于number  转换不成功时的number值
       console.log(typeof(NaN));//number

       //isNaN()  is not a number?------------false/true
       console.log(isNaN(12));//false
       console.log(isNaN(NaN));//true
       console.log(isNaN("12px"));//false

       console.log("--------3.逻辑运算符----------")
       a = 10;
       b = 15;
       //console.log((a>b)&(b>a));//false 0
       //console.log(a>b|b>a);//true 1

       console.log(a>b&&++a<b);
       console.log(a);
       console.log("--------4.三目运算符----------")
       a = 98;
       console.log(a>=60?"及格":"不及格");
       console.log("--------5.赋值运算符----------")
       a = 20;
       b = 30;
       var temp = a;
       a = b;
       b = temp;
       console.log(a);
       console.log(b);
    </script>
</body>
</html>
④流程控制
if(){}else{}   if(){}else if(){}...  条件
switch(){case:break;....}
while(){}   do{}while()
for(){}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //判断1999年是不是润年:400的倍数  或者  4的倍数不是100的倍数
        var year = 2004;
        if(year%400==0||(year%4==0&&year%100!=0)){
            console.log("润年");
        }else{
            console.log("平年");
        }

        //打印出每个月有多少天
        var month = 4;
        switch(month){
            case 1:
            case 3:
            case 5:
            case 7:
            case 8:
            case 10:
            case 12:
                console.log(31);
                break;
            case 2:
                console.log("28或29");
                break;
            case 4:
            case 6:
            case 9:
            case 11:
                console.log(30);
                break;
            default:
                console.log("月份不合格");
                break;
        }
        //输出1~100中能被3整除的数
        var i = 1;
        while(i<=100){
            if(i%3==0){
                console.log(i);
            }
            i++;
        }

        i = 1;
        do{
            if(i%3==0){
                console.log(i);
            }
            i++;
        }while(i<=100);

        
        for(var i =1;i<=100;i++){
            if(i%3==0){
                console.log(i);
            }
        }


    </script>
</body>
</html>
⑤基本对象
  1. 数组
  2. 函数
  3. 时间
  4. 数学
  5. 字符串
一、数组对象: js中的数组实际与java中数组+集合效果类似   java中  String[] arr = new String[5];
数组是用于装载各种数据的容器 
    1、定义数组
    2、赋值
    3、遍历
    4、删除元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //1.定义数组
        var arr = new Array();
        var arr2 = new Array(5);
        var arr3 = [1,2,"abc",true,null];
        console.log(arr);
        console.log(arr2);
        console.log(arr3);
        console.log("----------------------------")
        //2.赋值
        arr[0] = 1;
        arr[1] = 2;
        arr[2] = "haufheujw";
        arr[100] = true;
        arr["abc"] = "hehe";
        arr.push(3);
        console.log(arr);
        console.log(arr.length);//自定义的键值对不算在长度中
        console.log("----------------------------")
        //3.遍历
        //for(var i=0;i<=arr.length;i++){
       //     console.log(arr[i]);
       // }

        for(var index in arr){
            console.log(arr[index]);
        }
        //4.删除
        delete arr["abc"];
        console.log(arr);
    </script>
</body>
</html>
二、函数对象
    函数创建
    函数执行
    
    创建格式:  function 函数名(){}------建议
           new Function(形参,方法体)----不建议
    
    执行格式: 函数名()
    
    创建执行原理:
        创建函数时开辟堆内存将函数中的代码块转换为字符串存储在该堆中,将堆中地址赋给函数名
        开辟一个私有栈内存空间,通过函数名获取到js字符串,转换为js代码块在私有栈中运行
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //1、无参无返回值函数  创建
        function sum(){
            var a = 10;
            var b = 20;
            console.log(a+b);
            console.log(a+b+NaN);
        }
        //执行
        sum();
        sum();
        //2、有参无返回值
        function sum2(a,b){
            console.log(a+b);
        }
        sum2(3,7);
        //3、无参有返回值
        function sum3(){
            var a = 10;
            var b = 20;
            return a+b; 
        }
        var reSum3 = sum3();
        //alert(reSum3)//30

        //4、有参有返回值
        function fn1(name,age,sex){
            var obj = {
                "name":name,
                'age':age,
                sex:sex
            }
            return obj;
        }
        var reobjs = fn1("小王",19,"女");
        console.log(reobjs);
        //5、匿名函数
        var ff = function(){
            console.log("hello");
        }
        ff();
    </script>
</body>
</html>
三、时间对象
    var date = new Date();
    年 getFullYear()
    月 getMOnth()
    日 getDate()
    时 getHours()
    分 getMinutes()
    秒 getSeconds()
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var date = new Date();
        console.log(date);//Mon Oct 18 2021 15:17:51 GMT+0800 (中国标准时间)
        //单独获取 年  月   日  等
        var year = date.getFullYear();
        console.log(year);

        var month = date.getMonth()+1;//0~11
        console.log(month);

        var day1 = date.getDay();
        console.log(day1);//本周周几

        var day2 = date.getDate();
        console.log(day2);

        var hours = date.getHours();
        var minutes = date.getMinutes();
        var seconds = date.getSeconds();
        console.log(year+"年"+month+"月"+day2+"日"+hours+"时"+minutes+"分"+seconds+"秒");
    </script>
</body>
</html>
四、数学对象
    Math 
    取绝对值        abs()
    获取[0,1)随机数 random()
    向上取整        ceil()
    向下取整        floor()
    最大值          max()
    最小值          min()
       
    练习:获取[3,25]之间随机整数
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var a = Math.abs(-10);
        console.log(a);
        var ran = Math.random();
        console.log(ran);
        var b = Math.ceil(-9.112);
        console.log(b);//-9
        var b = Math.floor(-9.112);
        console.log(b);//-10
        var max = Math.max(2,19,18,33);
        console.log(max);
        var min = Math.min(2,19,18,33);
        console.log(min);
        
        //练习:获取[3,25]之间随机整数
        var num = Math.random();//[0,1)
        num = num*23;//[0,23)
        num = Math.floor(num)//0,22整数
        num = num+3//2~25之间整数
        console.log(num);
    </script>
</body>
</html>
五、字符串对象
    var str = "abc";----------------string
    var str = new String("abc");----object
        
        length 长度
        startsWith()以什么开始
        endsWith()以什么结尾
        subStr(起始位置,截取个数)
        subString(起始位置,结束位置)  含头不含尾
        split()切割
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //字符串对象
        var str1 = "abc";
        var str2 = new String("abc");
        console.log(str1===str2);//false
        console.log(str1==str2);//true

        var ss = str2.startsWith("a");//以某字符开始
        console.log(ss);//true
        var ee = str2.endsWith("c");
        console.log(ee);
        var len = str2.length;
        console.log(len);//3

        var str = "jsi#fajo#ijer#oigf#oia";
        var sub = str.substr(2,4);//ifaj
        console.log(sub);
        var sub2 = str.substring(2,4);//if
        console.log(sub2);
        var arr = str.split("#");
        console.log(arr);

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

六、 事件

1、单击  2、双击  3、值改变  4、获得焦点  5、失去焦点 6、键盘按下  7、键盘抬起   8、鼠标按下  9、鼠标抬起  10、鼠标移入
11、鼠标移出 12、文档就绪
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload=function(){//12.文档就绪---整个页面元素加载完成后出发后面函数的执行
            //单击
            document.getElementById("box").onclick = function(){
            console.log("单击事件发生");
            
        }
        }

    </script>
</head>
<body>

    <div id="box">单击事件</div>

</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function shouji(){
            console.log("双击事件发生");
        }

        //3、onchange事件
        function gaibian(){
            var name = document.getElementsByTagName("input")[0].value;
            console.log(name);
        }
        //4、获得焦点
        function jujiao(){
            document.getElementsByTagName("input")[1].value = "小王";
        }
        //5、鼠标按下
        function anxia(){
            document.getElementsByTagName("div")[1].style.backgroundColor="green";
        }
        //6、鼠标松开
        function songkai(){
            document.getElementsByTagName("div")[1].style.backgroundColor="red";
        }
        //9、鼠标移入
        function yiru(){
            document.getElementsByTagName("div")[1].style.borderRadius = "50%";
        }
        //10、鼠标移出
        function yichu(){
            document.getElementsByTagName("div")[1].style.borderRadius = "0";
        }


    </script>
</head>
<body>
    <div ondblclick="shouji()">双击事件</div>
    <input type="text" name="name" onchange="gaibian()"><br>
    <input type="text" name="pwd" onfocus="jujiao()"><br>
    <input type="button" value="鼠标按下" onmousedown="anxia()" onmouseup="songkai()">
    <div style="width: 100px;height: 100px;background-color:red ;" onmouseenter="yiru()" onmouseleave="yichu()"></div>
   <script>
       //7、键盘按下
    //    window.onkeydown = function(ele){
    //        alert(ele.keyCode);
    //    }
        //8、键盘松开
       window.onkeyup = function(ele){
           alert(ele.keyCode);
       }
   </script>
</body>
</html>

七、弹窗

1、alert("弹窗") 阻碍代码的继续运行

2、confirm("提示信息")

3、prompt("提示信息",“默认值”);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //alert("小红");//普通弹窗:阻碍代码继续运行
        //console.log("小绿");
        //var flag = confirm("你确定要删除?");//是否确定弹窗:选中确定返回true  取消返回false
        //console.log(flag);
        var name = prompt("请输入你喜欢的明星","易烊千玺");//弹窗输入:第一参数提示  第二参数默认值
        console.log(name);

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

朗读
赞(0)
版权属于:

九肽荷尔蒙's Blog

本文链接:

http://sleeve.top/index.php/archives/151/(转载时请注明本文出处及文章链接)

评论 (0)
IP信息

人生倒计时

今日已经过去小时
这周已经过去
本月已经过去
今年已经过去个月

最新回复

  1. fixotaigujup
    2021-12-19

    Urgent imh.mhsz.sleeve.top.vrg.rd intuitively akinetic antiphospholipid [URL=http://damcf.org/drug/sildenafil-vendo/]viagra generique 75 mg[/URL] [URL=http://cocasinclair.com/product/dutas/]retail sale dutas[/URL] [URL=http://graphicatx.com/cialis-in-brazil/]prices of viagra, cialis, lavitra[/URL] [URL=http://nicaragua-magazine.com/item/synthroid/]synthroid online stores[/URL] [URL=http://americanazachary.com/product/lyrica/]lyrica kaufen leipzig[/URL] [URL=http://nicaragua-magazine.com/purchase-kamagra-without-prescription/]generic kamagra 100mg pills[/URL] [URL=http://staffordshirebullterrierhq.com/item/ed-super-advanced-pack/]ed super advanced pack generico online sicuro[/URL] [URL=http://gasmaskedlestat.com/keftab/]buy keftab[/URL] [URL=http://telugustoday.com/product/doxazosin/]buy doxazosin online[/URL] [URL=http://staffordshirebullterrierhq.com/item/jelly-pack-15/]low priced jelly pack 15[/URL] [URL=http://johncavaletto.org/amoxicillin/]amoxicillin[/URL] [URL=http://homemenderinc.com/product/viagra/]acheter du viagra 50 pills[/URL] [URL=http://nutrabeautynutrition.com/pill/cialis-strong-pack-60/]cialis strong pack 60 without pres[/URL] [URL=http://solepost.com/product/prednisone/]prednisone by check[/URL] uncertain arriving viagra advertisement buy dutas online in usa cialis generic synthroid online europe lyrica kaufen leipzig generic kamagra lowest purchase kamagra without prescription ed-super-advanced-pack prescription usa buy keftab generic for doxazosin best generic jelly pack 15 online amoxicillin can you order viagra online cialis-strong-pack-60 en china prednisone by check perimenopausal futile http://damcf.org/drug/sildenafil-vendo/ sildenafil vendo http://cocasinclair.com/product/dutas/ buy dutas online in usa buy dutas online in usa http://graphicatx.com/cialis-in-brazil/ cialis http://nicaragua-magazine.com/item/synthroid/ china synthroid online http://americanazachary.com/product/lyrica/ lyrica http://nicaragua-magazine.com/purchase-kamagra-without-prescription/ kamagra sans ordonnances http://staffordshirebullterrierhq.com/item/ed-super-advanced-pack/ cheap ed super advanced pack without a prescription http://gasmaskedlestat.com/keftab/ buy keftab online http://telugustoday.com/product/doxazosin/ doxazosin tablets http://staffordshirebullterrierhq.com/item/jelly-pack-15/ jelly-pack-15 online canadian http://johncavaletto.org/amoxicillin/ comprar amoxicillin en internet http://homemenderinc.com/product/viagra/ buy viagra online in ireland http://nutrabeautynutrition.com/pill/cialis-strong-pack-60/ buy cialis strong pack 60 w not prescription http://solepost.com/product/prednisone/ prednisone dozirovkamg guaranteed lowest price complexities frustrating ethics.

  2. buying stromecto
    2021-12-19
  3. etufghufeaje
    2021-12-19

    Night wpu.gvif.sleeve.top.yjr.rh relationship; adult magnesium [URL=http://otrmatters.com/item/lowest-cost-propecia/]propecia[/URL] [URL=http://memoiselle.com/product/proscar/]proscar online next day shipping[/URL] [URL=http://thatpizzarecipe.com/amoxil/]amoxil[/URL] [URL=http://anguillacayseniorliving.com/item/prednisone-discount-prices/]40 prednisone from top rated[/URL] [URL=http://johncavaletto.org/drugs/levitra-20mg-achat/]buy generic levitra online with echeck[/URL] [URL=http://washingtonsharedparenting.com/clomid/]clomid panama[/URL] [URL=http://mrcpromotions.com/drug/tretinoin-canada/]buy cheap tretinoin[/URL] [URL=http://anguillacayseniorliving.com/drugs/retin-a/]quebec retin a[/URL] [URL=http://americanazachary.com/product/propecia/]fastest delivery propecia[/URL] [URL=http://celebsize.com/soft-pack-40/]soft-pack-40 online[/URL] [URL=http://americanazachary.com/drugs/xenical/]medicine xenical[/URL] [URL=http://nicaragua-magazine.com/cheap-generic-substitute-doxycycline/]doxycycline[/URL] [URL=http://wow-70.com/pill/cytotec/]buy cytotec online free pills[/URL] [URL=http://damcf.org/drug/diclofenac/]diclofenac come si usa[/URL] fraction lowest cost propecia proscar online next day shipping generic amoxil no perscription prednisone levitra 20mg achat 50 mg clomid online uk tretinoin canada products like retin a real propecia without a prescription soft-pack-40 xenical doxycycline doxycycline online no presciption is buying cytotec from canada safe diclofenac come si usa lubricant adjuvants, intoxicating http://otrmatters.com/item/lowest-cost-propecia/ cheap generic propecia pills http://memoiselle.com/product/proscar/ proscar through mail http://thatpizzarecipe.com/amoxil/ amoxil sites http://anguillacayseniorliving.com/item/prednisone-discount-prices/ prednisone drug company prednisone online order guide http://johncavaletto.org/drugs/levitra-20mg-achat/ levitra uk pharmacy http://washingtonsharedparenting.com/clomid/ buy clomid without prescription http://mrcpromotions.com/drug/tretinoin-canada/ buy tretinoin online canada http://anguillacayseniorliving.com/drugs/retin-a/ retin a http://americanazachary.com/product/propecia/ propecia and mexico other products like propecia http://celebsize.com/soft-pack-40/ soft-pack-40 http://americanazachary.com/drugs/xenical/ xenical http://nicaragua-magazine.com/cheap-generic-substitute-doxycycline/ doxycycline http://wow-70.com/pill/cytotec/ cytotec http://damcf.org/drug/diclofenac/ diclofenac sin receta en farmacias introducing disorientation without.

  4. jonn2
    2021-12-19
  5. jonn1
    2021-12-19