美文网首页
JavaScript之简单准备

JavaScript之简单准备

作者: JustinPenChia | 来源:发表于2016-11-06 12:51 被阅读173次

    一.js的组成:

    ECMAScript js组成语言的语法和基本对象
    DOM 文档对象模型,描述处理网页内容的方法和接口
    BOM 浏览器对象模型,描述与浏览器进行交互的方法和接口

    二.js的特点:

    跨平台的web脚本语言
    向html页面添加交互行为
    可与服务器进行通信

    三.js出现的位置:

    1.行间

    <input type="button" onclick="alert(1);" value="Click"/>
    

    2.内嵌

    <script>
            //这里是js代码
    </script>
    

    3.外链js文件

    <script src="demo.js"></script>

    三.window.onload

     windows.onload是为页面加载完成
    
    window.onload=function(){
            //当页面中的元素全部加载完成后执行这里的代码
     }
    

    什么时候用window.onload?
    1.当js代码需要获取页面当中的元素的时候,如果这个script放在元素的面前,那就需要加载window.onload
    2.如果script标签放在元素的后面,那就不需要加window.onload

    script不能自结束
    1.直接在html中的script标签中写
    2.可以引入外部文件,通过src指定外部文件的位置,特别注意的是不能省略script的结束标签

    对于js全部都是通过var来完成变量的创建,
    当在函数内部没用使用var来声明变量的时候,这个变量就会作为全局变量声明,所以在函数中定义变量是一定要用var

    实例:

    需求:点击按钮,让div的宽度与高度变化

    1.拿到按钮

    doucument.getElementByID("btn")

    2.给按钮添加点击事件

    按钮.onclick=function(){
        //把点击后的事情放到这里
        //拿到要修改的元素
    doucument.getElementByID("box")
        //修改拿到元素的属性
        div.style.width=值
        div.style.height=值
    }
    

    3.修改属性

    元素.style.样式=值

    js代码:

    var btn=document.getElementById("btn");
    var box=document.getElementById("myDiv");
    btn.onclick=function(){
        box.style.width="200px";
        box.style.height="200px";
    };
    

    相关文章

      网友评论

          本文标题:JavaScript之简单准备

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