美文网首页
javascript

javascript

作者: 两分与桥 | 来源:发表于2018-05-05 10:45 被阅读22次

javascript 总体上我觉得跟 java 差不多，各种结构和语句类似于 C，但是 javascript 是弱类型的语言，记录一些重要的点：

实例化变量不加 var ，该变量就会变成全局变量

javascript 的数组，类型是object

console.log 就是在控制台输出

<body>
    <p>one</p>
    <p>two</p>
    <p>three</p>
    
    //javascript 标签一般放在 body闭合标签上
    <script>
        doms = document.getElementsByTagName("p"); //取出所有的P标签，doms 为列表
        console.log(doms);
        for (var i=0; i<doms.length;i++){
            console.log(i);
            console.log(doms[i]);
        }
        console.log('***************************************')
        for (var j in doms){
            console.log(j); //这样取出来的会多出，length，item，namedItem三个
            console.log(doms[j])
        }
    </script>

</body>

输出结果：


== 与 ===

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
    <script>
        console.log(2==2);
        console.log(2=="2"); //检测是否相等时，会进行类型转换
        console.log(2==="2"); //全等于不执行类型转换
    </script>

</body>

</html>
输出结果：
true
true
false

在比较上也会执行类型转换，例如数字与字符串相比，会把字符串转换成数字来比较

异常，try catch , finally

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
    <script>
        try {
            console.log('try');
            throw Error('define error');
        }
        catch(e) {
            console.log(e);
        }
        finally {
            console.log('finally');
        }
    </script>

</body>

</html>

输出结果：
try
Error: define error
finally

ECMA 对象，各种内置的对象都有各自的方法
Array 数组的进出栈操作就是对数据的添加和删除，push 和 pop 是一种，添加在数组尾部，unshift 和 shift 是另一种，添加在数组前面，都是类似栈操作。（也就是先进后出）
function， 函数，没有设定返回值时

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
    <script>
        function f(x,y) {
            alert(x+y);
        }
        console.log(f(22,88)); //没有设定返回值，打印为 undefined
        console.log(f.length); //f.length 返回的是函数期望的参数个数 ，这里为2
    </script>
</body>

</html>

注意：js的函数加载执行与python不同，它是整体加载完才会执行，所以执行函数放在函数声明上面或下面都可以。

当 function 没有传递参数，或过多或过少时，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
    <script>

        func1(1,2);  // 3
        func1(1,2,3);// 3 #传的过多只会取前面两个
        func1(1);    // NaN
        func1();     // NaN
        
        function func1(a,b){
            console.log(a+b);
        }
    </script>
</body>

</html>

还有一个挺重要的，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
    <script>
         function a(a,b){
            alert(a+b);
         }

           var a=1;
           var b=2;
            a(a,b); //会报错，Uncaught TypeError: a is not a function
    </script>
</body>

</html>

arguments 可以解决传递不限长度的参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
    <script>
        function f() {
            console.log(arguments);
            var sum = 0;
            for(var i=0; i<arguments.length; i++){
                sum = sum + arguments[i]
            }
            return sum;
        }
        console.log(f(1,2,3,4,5,6))
    </script>
</body>

</html>

输出结果：
Arguments(6) [1, 2, 3, 4, 5, 6, callee: ƒ, Symbol(Symbol.iterator): ƒ]
21

发现了一个忽略的小问题，返回的 func_b 只是一个入口

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
    <script>

        city = "langfang";
        function func_a() {
            var city = 'beijing';
            return func_b
        }
        function func_b() {
            console.log(city)
        }
        var ret = func_a();
        ret();
    </script>
</body>

输出结果打印的是 langfang

在python也是如此，

</html>
test = 222

def action_a():
    test = 'a'
    return action_b

def action_b():
    print(test)

b = action_a()
b()

打印的是 222

javascript 还有一个匿名函数，就不贴了。
一直弹窗确认的 javascript 程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
    <script>
        var ret = window.confirm();
        if(ret == false){
            while(true){
               ret2 = window.confirm();
                if(ret2 == true){
                   break;
                }
            }
        }
        window.alert("congralation pass");
        console.log(ret)
    </script>
</body>

</html>

// 如果不确认，就会一直弹出窗，

显示时间的程序，要避免产生另外的计时器，也就是当多次点击begin按钮时，所以设定在返回值ret为undefined时启动，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #input1{
            margin-top: 60px;
            margin-left: 50px;
            width: 350px;
            height: 50px;
            color: blue;
            font-size: 30px;
            text-align: center;
        }
        .button{
            margin-left: 20px;
            width: 45px;
            height: 30px;
        }
    </style>
</head>
<body>
<input type="text" id="input1" value="show time">

<button class="button" onclick="begin()">begin</button>
<button class="button" onclick="stop()">stop</button>
    <script>
        function show_time() {
            time = new Date().toLocaleString();
            docu = document.getElementById("input1");
            docu.value = time;
        }
        var ret;
        function begin() {
            if(ret==undefined) { // 避免产生另外的计时器
                show_time();
                ret = setInterval(show_time, 1000);
            }
        }
        function stop() {
            clearInterval(ret);
            ret=undefined;
        }
    </script>
</body>

</html>

一个检测 input 的 text 的程序，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .input1{
            margin-top: 60px;
            margin-left: 50px;
            width: 350px;
            height: 50px;
            color: blue;
            font-size: 30px;
            text-align: center;
        }

    </style>
</head>
<body>
<input type="text" class="input1" value="请输入" onfocus="f1(this)" onblur="f2(this)">
    <script>
        function f1(that) { # this 把 input 自己传进来，直接调用就行了
            if(that.value=="请输入")
            that.value = "";
        }
        function f2(that) {
            if (!that.value.trim())
            {
                that.value = "请输入";
            }
        }
    </script>
</body>

</html>

效果倒是挺简单的了。

另一种绑定函数的方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .test{
            display: block;
            text-decoration: none;
            margin-top: 35px;
            margin-left: 150px;
            width: 100px;
            height: 50px;
            color: blue;
            font-size: 30px;
            line-height: 45px;
            text-align: center;
            border: 1px solid lightgray;
        }
    </style>
</head>
<body>
    <a href="#" class="test">aaa</a>
    <a href="#" class="test">bbb</a>
    <a href="#" class="test">ccc</a>
<script>
    var i;
    ele = document.getElementsByClassName("test");
    for (i=0; i<ele.length; i++){
        ele[i].onclick=function () {
            console.log(this.innerHTML); // this 也就是指代触发事件的那个标签
        }
    }
</script>
</body>

</html>

form 表单提交事件，在提交之前可以检测并阻止

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="" method="get" id="submit_form">
        <input type="text" name="username">
        <button type="submit">提交</button>
    </form>
<script>
    var ele = document.getElementById("submit_form");
    ele.onsubmit=function (e) { // 系统为我们创建好了 event 事件，我们只需要接受即可
        alert(6666);
        //return false //返回false 阻止提交，默认为执行完 onsubmint 后提交
        alert(e); //弹出框e为 [object Event]
        e.preventDefault(); //阻止默认事件发生，在这里也就是阻止提交
    }
</script>
</body>

</html>

event 事件传播，与阻止

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .outer{
        width: 300px;
        height: 300px;
        background-color: cornflowerblue;
        float: left;
    }
    .inner{
        margin-top: 100px;
        margin-left: 100px;
        width: 100px;
        height: 100px;
        background-color: orangered;
    }
</style>
<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
<script>
    var ele = document.getElementsByClassName("inner")[0];
    ele.onclick=function (e) {
        alert("inner");
        e.stopPropagation(); // 不加这句时，事件就会向外层传播，
        // 而 outer就会接收到事件，从而按下inner时会有两个弹窗, inner和outer
    };
    ele.parentElement.onclick=function (e) {
        alert("outer");
    }
</script>
</body>

</html>

改变 css 属性，button 改变颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .outer{
        width: 300px;
        height: 300px;
        background-color: cornflowerblue;
        float: left;
    }
    .inner{
        margin-top: 100px;
        margin-left: 100px;
        width: 100px;
        height: 100px;
        background-color: orangered;
    }
    .module{
        float: left;
        display: block;
        width: 100px;
        height: 40px;
        margin-left: 30px;
        margin-top: 30px;
    }
</style>
<body>
    <div class="outer">
        <div class="inner"></div>
    </div>

    <button class="module" onclick="blue()">blue</button>
    <button class="module" onclick="red()">red</button>
<script>
    function blue() {
        // css 中的属性例如 background-color 要写为 backgroundColor
        document.getElementsByClassName("inner")[0].style.backgroundColor="blue";
        console.log('blue')
    }
    function red() {
        document.getElementsByClassName("inner")[0].style.backgroundColor="red";
        console.log('red')
    }
</script>
</body>

</html>

为特定的 标签添加 class 属性，使其隐藏或可见

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    body{
        margin: 0;
    }
    .outer{
        height: 1000px;
    }
    .hide{
        opacity:0.3;
    }
    .button{
        margin-top: 30px;
        margin-left: 30px;
        display: inline-block;
        width: 100px;
        height: 40px;
        font-size: 20px;
    }
</style>
<body>
    <div class="outer">
        <p>《寄扬州韩绰判官》</p>
        <p>唐代杜牧</p>
        <p>青山隐隐水迢迢，秋尽江南草未凋。</p>
        <p>二十四桥明月夜，玉人何处教吹箫？</p>
        <button class="button" onclick="func_hide()">hide</button>
        <button class="button" onclick="func_show()">show</button>
    </div>


<script>
    function func_hide() {
        var ele = document.getElementsByClassName("outer")[0];
        ele.classList.add("hide"); //为 outer 添加 class hide 
    }
    function func_show() {
        var ele = document.getElementsByClassName("outer")[0];
        ele.classList.remove("hide");
    }
</script>
</body>

</html>

多个 input 的 checkbox 全选和取消，反选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .module{
            margin-top: 30px;
            margin-left: 20px;
        }
        .button{
            margin-top:15px;
            margin-left:15px;
        }
    </style>
</head>
<body>
<table border="1px" class="module" cellpadding="5px">
    <tr>
        <td><input type="checkbox" class="check"></td>
        <td>one</td>
        <td>one</td>
    </tr>
    <tr>
        <td><input type="checkbox" class="check"></td>
        <td>two</td>
        <td>two</td>
    </tr>
    <tr>
        <td><input type="checkbox" class="check"></td>
        <td>three</td>
        <td>three</td>
    </tr>
</table>
<button class="button" onclick="selectAll()">全选</button>
<button class="button" onclick="cancel()">取消</button>
<button class="button" onclick="reverse()">反选</button>
<script>

    var ele = document.getElementsByClassName("check");
    function selectAll() {
        for (var i=0; i<ele.length; i++){
            ele[i].checked  = true
        }
    }
    function cancel() {
        for (var i = 0; i < ele.length; i++) {
            ele[i].checked = false
        }
    }
    function reverse() {
        for (var i=0; i<ele.length; i++){
            ele[i].checked = !ele[i].checked
        }
    }
</script>
</body>

</html>

select 二级联动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<select id="provinces">
    <option value="">请选择省份</option>
</select>
<select id="citys">
    <option value="">请选择城市</option>
</select>

<script>
    var provin_ele = document.getElementById("provinces");
    var city_ele = document.getElementById("citys");
    data = {"河北省":["石家庄","廊坊"],"山西":["晋城","大同"],"陕西":["西安","延安"]}
    for (var i in data) { // 遍历出来的 i 为省份
        var provin_option = document.createElement("option"); //创建 option 标签
        provin_option.innerHTML = i;
        provin_ele.appendChild(provin_option);
        console.log(i);
    }

    provin_ele.onchange=function () { // 在provin 修改的时候才触发修改第二级select
        console.log(this); // 就是 province 自己
        select = this.options[this.options.selectedIndex];//[]内的为select选择的排序，例如山西为2
        console.log(select); // 打印出来就是一个标签了
        console.log(select.innerHTML); // 标签中的文本
        city_ele.options.length = 1; // 给第二级select赋值前要清空之前存在的option，否则会出现累加现象
        for (var i in data[select.innerHTML]){
            var city_option = document.createElement("option");
            city_option.innerHTML = data[select.innerHTML][i];
            city_ele.appendChild(city_option);
            console.log(data[select.innerHTML][i]);
        }
    }

</script>
</body>

</html>

1.外部对象就是浏览器提供(内部)的API
2.这些对象由W3C规定，由浏览器开发者设计并开发
3.这些对象分为2部分，其中BOM包含了DOM
4.我们可以通过js访问这些对象

javascript中启动定时器就相当于启动了一个支线程，主线程执行完支线程后立刻向下执行，支线程需要等待定时的时间。

参考yuan老师的博客：http://www.cnblogs.com/yuanchenqi/articles/5980312.html

相关文章

网友评论

      本文标题：javascript

      本文链接：https://www.haomeiwen.com/subject/xkusrftx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|javascript|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！