【JavaScript学习整理】js基础

　　HTML,CSS属于标记语言, JavaScript是基于客户端的脚本语言。

• 变量:
  • 语法  var 变量名 = value
  • var是系统内部关键字,用来声明变量
  • 变量名规则:  1.不能以数字开头  2. 变量名只能包含数字 字母 下划线
• 传值:
  • 赋值传值: var m=3    var n=m
  • 引用传值: var m = {name: "aa", age:24}  var n = m
• 流程控制语句
  • 逻辑语句:  if(条件){ } else if(条件){ } else { }
  • switch语句: switch(变量){ case value1: break; case value2: break; default: break}
• 循环语句:
  • 三要素: 1.循环变量的初始化   2.循环条件的判断  3.循环变量的改变
  • for(var i=1;I<10;i++){ }
  • while(var i < 10){ }
  • do{ }while(i<10)
• 函数function
  • 语法: function 函数名(参数){ 函数体; }
  • 函数的位置: 可以先定义再调用, 也可以先调用再定义
• 数组: 
  • var array = [1,2,3,4]
  • 数组下标从0开始记录,数组下标的最大值, 数组个数-1
• 系统内部函数
  • parseint 取整
  • string对象
    • indexOf()  定位字符串中某一个指定字符首次出现的位置
    • match() 查找字符串中特定的字符,如果有就返回这个字符,没找到返回 -1
  • math函数
    • abs(x) 返回数的绝对值
    • max(x,y) 返回两数最大值
    • min(x, y) 返回两数最小值
    • random() 返回 0-1之间的随机数
  • Date对象
    • var n1 = new Date() 创建当前时间日期对象
• 对象
  • 类中的具体实例 var obj = { name: "张三", age:20, fun:function ab()}
  • 属性: name age
  • 方法: fun
  • 获取对象的方法: id: document.getElementById("id")
• 事件: 用户的动作
  • onclick点击事件
  • onmouseover 鼠标放上
  • onmouseout  鼠标离开
  • onmousedown 鼠标按下
  • onmousemove 鼠标移动
  • ondblclick 双击事件
  • onmouseup 鼠标抬起
• 表单事件
  • onfocus 获得焦点
  • onblur 失去焦点
  • onsubmit 提交事件
  • onchange 当发生改变
  • onreset 重置事件
• 键盘事件
  • onkeyup: 键盘抬起
  • onkeydown: 键盘按下
  • onkeypress: 键盘按一次
• 窗口事件
  • onload事件, 页面加载完成后立刻执行的事件
• document
  • document.creatElement("标签名")
  • document.body.appendChild(对象)
• Window
  • alert() 弹出一个窗口
  • prompt() 弹出一个可以输入的窗口
  • confirm 弹出可以选择的窗口
  • window.open(链接, URL, 设置)
  • window.close
• 定时器
  • 一次性定时器: window.setTimeout(方法, 时间t), 在t秒后执行以下, 毫秒为单位
  • 反复性定时器: window.setInterval(方法, 时间t), 每过t秒执行一下,毫秒为单位
  • 清除定时器: window.clearTimeout(定时器名)
• 图片切换案例

<script type="text/javascript">
        window.onload = init;
        var dingshiqi;
        var i = 1;
        function init() {
            dingshiqi = window.setInterval("change()",1000);
            var li = document.getElementById("l"+i);
            li.style.background = "red";
        }
        //切换图片
        function change() {
            i++;
            if (i > 6){
                i=1;
            }
            var obj = document.getElementById("d1");
            //修改img src属性
            obj.src = "../static/img/scrollimages/dd_scroll_"+i+".jpg";
            //修改li的背景颜色
            change_li();
            var li = document.getElementById("l"+i);
            li.style.background = "red";
        }
        //停止滑动
        function change_stop() {
            window.clearInterval(dingshiqi);
        }
        //开始滑动
        function change_start() {
            dingshiqi = window.setInterval("change()",1000);
        }
        //li切换图片
        function img_change(n, m) {
            var obj = document.getElementById("d1");
            obj.src = "../static/img/scrollimages/dd_scroll_" + n + ".jpg";
            change_li();
            m.style.background = "red";
            change_stop();
        }
        //鼠标离开li
        function img_start(n) {
            change_start();
            i=n;
        }
        //改变所有标签的背景颜色
        function change_li() {
            for (var j=1;j<=6;j++){
                var obj1 = document.getElementById("l"+j);
                obj1.style.background = "white";
            }
        }
    </script>