1.变量、事件、函数、style属性操作

[腾讯&妙味远程] 关于闭包的一段代码,不理解.

javascript:广泛应用于客户端的脚本语言,在网页上使用,用来给HTML 网页增加动态功能.

最初的设计是为了检验 HTML表单输入的正确性,运行在浏览器,node里.

基本组成:ECMAScript ,BOM ,DOM


javascript 的特点 :

  1. 列表内容能够让页面和浏览器与用户 产生交互行为.
  2. 可与服务器进行数据交互(node端)
  3. 能动态改页面中的结构和样式

    javascript 学习阶段

  4. 基础语法结构

  5. 页面元素操作
  6. 深入学习——数据交互,组件实现 ,框架使用 等

javascript 出现的位置 ,
  • 行间 ,<input type="button" value = "测试" onclick = "alert(1)">
    ,优点 : 简单明了 .
    缺点:可读性差,不易维护 ,不易扩展

  • 内嵌
    ,<script>
    alert(122)
    </script>

    优点: js和html 分离,可以复用代码 . 缺点:代码不能多文件使用 .

  • 外链接 js文件
<script src= "demo.js"></script>
alert(345)

优点:多文件公用


// : 单行注释
/**/ : 多行注释

position all

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src= "demo.js"></script>
</head>
<body>
    <input type="button" value = "测试" onclick = "alert(1)">
    <script>
        alert(122)
    </script>
</body>
</html>

通过id获取元素 , 单双引号 或者双双引号 ,都可以


style.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{width: 100px;height: 100px;background: yellow;transition:1s;}
        input{width: 100px;}
        *{margin: 0;padding: 0;} 
    </style>
</head>
<body>
    <input type="button" value = "改变样式" id = "btn">
    <div id = "div1"></div>

    <script>
        //通过id获取元素
        var Btn = document.getElementById("btn");
        var Div = document.getElementById("div1");
        Btn.onclick = function(){
            Div.style.background= "pink";
            Div.style.width     = "300px";
            Div.style.height     = "300px";
        }
    </script>
</body>
</html>

variable

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <input type="button" value = "改变样式" id = "btn">
    <div id = "div1"></div>

    <script>
        /*
            标识符:
                变量名 , 常量名 , 函数名  ,函数参数名 ,对象属性名的统称
            变量:
                标识符的一种 ,是一种变化的量,用来存储任意类型的数据
            声明变量 :
                var x; 代表语句的结束 ";"
                ###声明了变量 ,未赋值,默认是undefined
            运算符:
                = 赋值运算符 : 把右边的数据赋给左边的变量或者属性


        */
        var x ;
        console.log(x);
        var q = 1;//声明变量并赋值(初始化)
        var w = 2;
        console.log(q+w);
        //console.log(e);未声明的变量 e is not defined 
        var a,b = 12,c;
        console.log(a,b);
        /*SyntaxError 语法错误 
        var 123  不可以   首字符不可以使用数字 _@#$%^&* 等特殊字符也可以用作变量
        关键字:js语法正在使用的
        驼峰命名法 getElementById 小驼峰   GetElemGentById 大驼峰
        */
    </script>
</body>
</html>

function

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        /*
            函数的作用 :复用代码 ;
                    定义了一个代码块,函数内的代码不会自己执行
            1声明函数 :function abc (){}
            调用函数 : abc()
            2函数表达式 : var abc = function xyz (){} 把一个函数复制给一个变量,
            3.函数声明一定要写名字 .
            4.匿名函数一定要立即使用 .
        */  
        //匿名函数的自执行 函数可以理解为洗衣机 
        (function(){
            console.log(123)
        })()
    </script>
</body>
</html>
  1. 属性 : 事物所具有的不可缺少的性质 ,利用属性 可以描述一个对象的特性和功能

05attribute

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{width: 100px;height: 100px;background: yellow;transition:4s;}
        input{width: 100px;}
        *{margin: 0;padding: 0;} 
    </style>
</head>
<body>
    <input type="button" value = "改变样式" id = "btn">
    <div id = "div1"></div>

    <script>
        //通过id获取元素
        var Btn = document.getElementById("btn");
        var Div = document.getElementById("div1");
        console.log(Btn);
        console.dir(Btn);//key , value 键值对 的形式描述一个对象 
        /*{属性名:属性值,
            属性名:属性值,
            属性名:属性值,
            属性名:属性值,
            属性名:属性值,
            属性名:属性值,}
            */
        /*属性操作
            增删改查属性
            */
            Btn.style.fontSize="50px";
            Btn.style.width="300px";
    </script>
</body>
</html>

06留言板

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <input type="text" id = "message">
    <input type="button" id = "btn" value = "提交">
    <ul id = "list ">
        <li>123</li>
    </ul>
    <script>
        var message    = document.getElementById("message");
        var Btn        = document.getElementById("btn");
        var list       = document.getElementById("list");
        Btn.onclick = function(){
            console.log(message.value);

            list.innerHTML = '<li>'+message.value+'</li>';
            //message.value = "" ;
        }
    </script>
</body>
</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值