JavaScript 基础

作者: 有情绪的仙人掌 | 来源:发表于2017-08-18 16:45 被阅读10次

第14天，JavaScript
JS-Basic
JavaScript-01
Js全局变量和局部变量
JavaScript学习指南
javaScript 基础知识
5-javascript基础
JavaScript 基础
JS相关思维导图
Python全栈工程师学习笔记｜JavaScript基础

内部样式

    <script type="text/javascript">
          
    </script>

外部样式
与 css 外部样式类似

三种提示框

一般用的很少，会卡住页面，一般放到尾部

        <script type="text/javascript">
//          alert("我叫xxx");
//          prompt("你是男的的吗？","hello");
            confirm("确定删除吗？");
        </script>

变量

不用为每个变量定义相应的类型，系统会自动识别

        <script type="text/javascript">
//          var num1=10;
//          alert(num1);
            var num1;
            num1=100;
            prompt("这是一百吗？");
            
            num3=100;
            prompt(num3);
            
            prompt("10*10=?","");
        </script>

字符串的处理

        <script type="text/javascript">
            var String="akdnkasdsamndjqkwnd";
            //字符串长度
            alert(String.length);
            //返回所在索引的字符
            alert(String.charAt(6));
            //返回首次字符的索引
            alert(String.indexOf("d"));
            //返回截取的数组
            alert(String.split("k"));
        
        </script>

数组

        <script type="text/javascript">
        //数组声明 1
            var box=new Array(3);
            box[0]=4;
            box[1]=2;
            box[2]=3;
            alert(box);
        //数组声明 2
            var box1=new Array("hello","hi","what");
            alert(box1);
        //join 加入分割内容
            alert(box1.join("*"));
        //排序sort()
        alert(box.sort());
        </script>

运算符

    <script type="text/javascript">
        //计算+
            var num1=1;
            var num2=2;
            alert(num1+num2);
        //计算×
            alert(num1*num2);
        //计算/
            alert(num1*num2);
        //计算++,--
            var j=1;
            var i=j++;
            alert("i="+i+",j="+j);
            
            var a=1;
            var b=++a;
            alert("a="+a+",b="+b)
        </script>

循环

  <script type="text/javascript">
            //for循环
//          var i=1;
//          for(;i<10;i++){
//              document.write("hello<br/>");
//          }
            //while循环
            var j=0;
            while(j<10){
                document.write("while循环<br/>");
                j++;
            }
            //do while循环
            var a=0;
            do{
                document.write("do while 循环<br/>");
                a++;
            }while(a<10)
            //break 与 continue用法
            var i=1;
            for(;i<10;i++){
                if(i==5){
                    continue;
                }
                document.write("hello"+i+"<br/>");
            }
        </script>

DOM

点击进入网址

        <script type="text/javascript">
            function go_to(){
                window.location.href="http://111.13.100.91";
                window.history.forward();
            }
        </script>
    </head>
    <body>
        <input type="button" name="" id="" value="到百度" onclick="go_to()"/>
    </body>

验证

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            function tip(){
                var username = document.getElementById("username").value;
                var password = document.getElementById("password").value;
                if(username=="" && password==""){
                    document.getElementById("span1").innerHTML="用户名,密码不为空";
                    document.getElementById("span1").style.color="red";
                }else{
                    document.getElementById("span1").innerHTML="";
                }
            
                if(password.length>6){
                    document.getElementById("span2").innerHTML="长度不能超过6";
                    document.getElementById("span2").style.color="red";
                }else{
                    document.getElementById("span2").innerHTML="";
                }
                
            }
            function tip2(){
                var password = document.getElementById("password").value;
                var confirm_pas=document.getElementById("password2").value;
                if(password!=confirm_pas){
                    document.getElementById("span3").innerHTML="密码不一致";
                    document.getElementById("span3").style.color="red";

                }else{
                    document.getElementById("span3").innerHTML="";
                }
            }
            
            function space(){
                document.getElementById("span3").innerHTML=""
            }
        </script>
    </head>
    <body>
        <form action="" method="get">
            用户名：<input type="text" id="username" onblur="tip()"/>  <span id="span1"></span><br />
            密码：<input type="password" id="password" onblur="tip()" onfocus="space()"/><span id="span2"></span><br />
            确认密码：<input type="password" id="password2" onblur="tip2()" /><span id="span3"></span>
            <br />
            <input type="email" name="" id="" value="" />
            <input type="submit" onclick="tip()"/>
            
        </form>
    </body>
</html>

last

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            function add(){
                var numb=document.getElementById("number").value;
//              alert(numb);
                numb++;
                document.getElementById("number").value=numb;
            }
            function indu(){
                var numb=document.getElementById("number").value;
                numb--;
                if(numb<1){
                    document.getElementById("number").value=1;
                }else{
                    document.getElementById("number").value=numb;
                }
            }
        </script>
    </head>
    <body>
        <input type="button" name="" id="indu" value="-" onclick="indu()"/><input id="number" type="text" value="1">
            
        </input><input type="button" name="" id="add" value="+" onclick="add()" />
    </body>
</html>