zoukankan      html  css  js  c++  java
  • 1.javascript篇(基础)

    js基础部分


    js定义:

    1.js是通过浏览器解析,然后由浏览器执行的一种脚本语言
    2.css控制样式,而js控制行为

    基本格式:

    <script type="text/javascript">

    基本定义:

    所有类型都要用var来定义


    外部样式表(CSS):

    <link rel="stylesheet" href="StyleSheet1.css" type="text/css"/>

    外部样式表(javascript):
    <script type="text/javascript" src="JavaScript1.js"></script>


    2.基本的行为方式:


    1.浏览器弹窗 alert()//浏览器弹窗()后面弹窗里的内容 //注意:如果JavaScript和css在一起执行
    则JavaScript先执行,因为是行为

    2.confirm("提示框") //注意:js 是弱类型的语言 而c#是强类型的语言

    3.prompt:收集文本字符
    parseFloat:转换成小数

    4.js 打开新窗口

    window.open("地址","标题名");

    5.初次载入

    window.onload = kk;
    function kk() { alert("页面加载完毕")}


    6.document.getElementById(获取id);


    3.流程控制


    var ak12 = prompt("请输入成绩")
    ak12 = parseFloat(ak12);
    if (ak12 > 12)
    {

    alert("合格啦");

    }


    4.数组定义

    数组的格式:var arr[];
    var arr=new Arrer();


    var arr = [12, 1, 122, 13];
    var r = add(arr);
    alert(r);
    var sum = 0;
    function add(arr) {


    for (var i = 0; i < arr.length; i++)
    {

    sum = sum + arr[i];


    }
    return sum;

    }


    5.事件

    <script type="text/javascript">

    function fun()
    {

    alert("你已经被点击了")

    }


    </script>
    </head>
    <body>
    <input type="button" value="测试" onclick="fun()"/>
    </body>

    事件2:


    function show()
    {

    var input = document.getElementById("text");
    input.value="欢迎你"

    }

    </script>
    </head>
    <body>
    <input type="text" id="text" />
    <input type="button" value="测试" onclick="show()" />


    事件3:获取焦点 清除 window.onload = function ()
    {

    var input = document.getElementById("text");
    input.onfocus = function ()
    {

    this.value = "";


    }


    }

    事件4:点击不同方块显示不同的颜色


    <style type="text/css">

    div {


    height:122px;
    122px;
    border:1px solid;
    }

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


    window.onload = function () {

    }
    function changecolor(node)
    {


    node.style.background = "red";


    }

    </script>
    </head>
    <body>
    <div onclick="changecolor(this);"></div>
    <div onclick="changecolor(this);"></div>
    <div onclick="changecolor(this);"></div>
    </body>
    </html>

    事件4:动态生成方格框


    window.onload = function ()
    {

    var divnode = document.getElementsByName("div");
    for (var i = 0; i < divnode.length; i++)
    {

    divnode[i].onclick = function ()
    {

    this.style.background = "red";

    }


    }

    }
    </script>
    </head>
    <body>
    <div></div>
    <div></div>
    <div></div>

  • 相关阅读:
    http://www.rehack.cn/techshare/webbe/php/3391.html
    SQL 百万级数据提高查询速度的方法
    开学收好这 17 种工具 App,让你新学期学习更有效率
    Git文件常见下标符号说明
    JS模块化开发
    前端路由的实现方式
    单页应用和多页应用
    使用chrome远程调试设备及调试模拟器设备
    移动端实现弹出框渐显和渐隐效果
    前端实现手机相册或照相预览图片及压缩图片的方法
  • 原文地址:https://www.cnblogs.com/liyiyong/p/5261350.html
Copyright © 2011-2022 走看看