JavaScript

JavaScript

与html结合的方式:

  • 只需要在head标签或者body标签中,使用script标签来书写JavaScript代码即可

​
<head>
    <script type="text/javascript">
   alert("hello JavaScript");//它可以接收任何类型的参数,这种参数就是警告框提示的信息
    </script> 
</head>

需要另外创建一个JavaScript文件,然后

<head>
    <script type="text/javascript" src="JavaScript文件.js">
    </script>
</head>

  1. JavaScript里的变量类型:

    数值类型:number

    字符串类型:string

    对象类型:object

    布尔类型:object

    函数类型:function

    JavaScript里面的特殊值:

    undefined:未定义,所有js变量未赋予初始值的时候,默认都是undefined

    null:空值

    NAN:全称是:not a number

  2. typeof()函数可以取到变量类型

  3. 关系运算:

    ==等于

    ===全等于

  4. 这几种情况参与逻辑运算被定义为假: 0,null,””(空串),undefined

  5. 数组元素类型可以不同,会自动扩容,没有赋值的部分类型是undefined

  6. //定义无参数函数
    ​
    function fun(){
        alert("fun函数被调用了");
    }
    //调用
    fun();
    //定义有参函数
    function fun(a,b)//不需要定义类型
    {}
    ​
    //还有一种定义方式:
    var fun=function(a,b){}

  7. 函数不支持重载

  8. 函数中的隐形参数

    var fun=function(){
        alert(arguments);//arguments是隐形参数,用来查看参数个数
    }

  9. 创建对象

    var obj={
        age:18,
        fun:function(){
            alter(this.age);
        }  
    };

  10. 注册事件

    unload事件
    ​
    function onloadfun(){}
    <body οnlοad="onloadfun();"></body> //静态注册onload事件(浏览器解析完之后就会自动触发的事件)
    ​
    <head>
    window.οnlοad=function(){};    //动态注册的onload事件
    </head>
    ​
    ​
    ​
    onclick事件
    function fun(){}
    <body>
        <button οnclick="fun();">按钮1</button>//静态注册onclick事件
        <button id="btn01">按钮2</button>
    </body>
    <head>
    window.οnlοad=function(){
    var btnobj=document.getElementById("btn01");
    btnobj.οnclick=function(){//动态注册onclick事件
                ...
        }
     }  
    </head>
    ​
    同理还有onblur(失去焦点事件)
    onchange(内容改变,主要用于选择按钮,内容改变会有提示)
    onsubmit(表单提交事件,验证所有表单是否合法)
    <οnsubmit='return false'>//如果不合法可以将参数设置为false
        动态注册:
        window.οnlοad=function(){
            //获取标签对象
            var obj=document.getElemtById("from1");
            //如果不合法就阻止提交
            return false;
        }

  11. DOM文本对象模型

    <head>
    <script type="text/javascript">
    function click(){
        var username=Obj=document.getElementById("username");
        //获取对象
    }
    <body>
        用户名:<input type="text" id=username> 
    <button οnclick="click()">校验</button>

  12. 正则表达式:

    //两种正则表达式对象的写法
    var patt=/内容/;
    var patt=new RegExp(内容);
    ​
    ​
    //[字母或者数字]表示要求字符串中是否包含
    var patt=[a-z];//[0-9]等等
    var str="asdasd";
    alert(patt.test(str));//会返回true
    ​
    /\w/          是否包含任意数字,字母,下划线
    /字符*/      表示是否包含0个或者多个字符
    /字符?/      表示包含0个或者1个
    /字符{3}/    表示是否包含连续三个字符
    /字符{3,6}/  表示是否包含连续三个字符,至少3个最多6个
    /字符$/      表示必须以字符结尾
    /^字符/           表示字符串必须以字符开头

  13. 将标签插入到文本框

    <head>
    var usernameobj=getElementById("username");//获取对象
    usernameobj.innerHTML="验证成功"
    
    </head>
    <body>
    用户名:<input type="text" id="username" value="asd">
        <span id="username" ></span>
    </body>
        
      

  14. <html>
      <head>
        <script type="text/javascript">
          function checkAll() {
            var hobbies = document.getElementsByName("hobby");
            for (var i = 0; i < hobbies.length; i++) {
              hobbies[i].checked = true;
            }
          }
    
          function checkNo() {
            var hobbies = document.getElementsByName("hobby");
            for (var i = 0; i < hobbies.length; i++) {
              hobbies[i].checked = false;
            }
          }
    
          function checkReverse() {
            var hobbies = document.getElementsByName("hobby");
            for (var i = 0; i < hobbies.length; i++) {
              if (hobbies[i].checked) hobbies[i].checked = false;
              else hobbies[i].checked = true;
            }
          }
        </script>
      </head>
      <body>
        用户名:<input type="text" οnblur="onblurFun()" /><br />
        密码: <input id="password" type="text" /><br />
        <input type="checkbox" name="hobby" value="cpp" checked="checked" />C++
    
        <input type="checkbox" name="hobby" value="java" />java
    
        <input type="checkbox" name="hobby" value="js" />js
        <br />
        <button type="button" οnclick="checkAll()">全选</button>
    
        <button type="button" οnclick="checkNo()">全不选</button>
        <button type="button" οnclick="checkReverse()">反选</button>
      </body>
    </html>
    //getElementsByName

  15. <html>
      <head>
        <script type="text/javascript">
         var inputs=document.getElementsByTagName("input");//按照指定标签名来进行查询并且返回集合
        alert(inputs)
        </script>
    
      </head>
      <body>
        用户名:<input type="text" οnblur="onblurFun()" /><br />
        密码: <input id="password" type="text" /><br />
        <input type="checkbox" name="hobby" value="cpp" checked="checked" />C++
    
        <input type="checkbox" name="hobby" value="java" />java
    
        <input type="checkbox" name="hobby" value="js" />js
        <br />
        <button type="button" >全选</button>
        <button type="button" >全不选</button>
        <button type="button" >反选</button>
      </body>
    </html>

  16. document三个对象查询优先使用Id,然后是name,最后是标签.以上三个方法需要在页面加载之后才能查询

  17. create element

    <html>
      <head>
        <script type="text/javascript">
          window.onload = function () {
            var obj = document.createElement("div");
            // obj.innerHTML = "我爱你";
            var ne=document.createTextNode("我爱你");
            document.body.appendChild(ne);
          };
        </script>
      </head>
      <body>
        用户名:<input type="text" οnblur="onblurFun()" /><br />
        密码: <input id="password" type="text" /><br />
        <input type="checkbox" name="hobby" value="cpp" checked="checked" />C++
    ​
        <input type="checkbox" name="hobby" value="java" />java
    ​
        <input type="checkbox" name="hobby" value="js" />js
        <br />
        <button type="button">全选</button>
    ​
        <button type="button">全不选</button>
        <button type="button">反选</button>
      </body>
    </html>
    ​

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值