欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Day03-jS

程序员文章站 2022-07-11 19:16:31
javaScript概述 什么是javaScript:javaScript是一种直译式脚本语言。直接解释执行的语言。 什么是脚本语言? . java源代码 >编译成.class文件 >java虚拟机中才能执行 . 脚本语言:源码 >解释执行 . js由我们的浏览器解释执行 HTML:决定了页面的框架 ......

javascript概述

什么是javascript:javascript是一种直译式脚本语言。直接解释执行的语言。 什么是脚本语言? . java源代码--->编译成.class文件 --->java虚拟机中才能执行 . 脚本语言:源码 ---->解释执行 . js由我们的浏览器解释执行

html:决定了页面的框架

css:用来美化我们的页面

js:提供用户的交互,是灵魂

js的组成:

ecmascript : 核心部分 ,定义js的语法规范

dom: document object model 文档对象模型 , 主要是用来管理页面的

bom : browser object model 浏览器对象模型, 前进,后退,页面刷新, 地址栏, 历史记录, 屏幕宽高

js的语法

变量弱类型:var i = true

区分大小写 , 语句结束之后的分号 可以有,也可以没有

要求写在script标签内

js的数据类型

  • 基本数据类型

    • string
    • number
    • boolean
    • undefine
    • null
  • 引用数据类型

    • 对象, 内置对象
  • 类型转换

    • js内部自动转换

js的运算符和语句

  • 运算符和java一样

    • "===" 全等号: 值和类型都必须相等

    • == 值相等就可以了

    • 语句和java大致一样

    • js中无逻辑单与和逻辑单或,函数不支持重载

    • null 属于object类型。

    • nan 不是一个数字,但是属于number类型。

      var aa ="哈喽";
      alert(typeof(aa)); //这样赋值的就是string类型
       var v = new string();//直接new出来的就是object类型
       alert(typeof(v));  
  • 案例:求偶数和
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
        //  document.write("哈喽");
            var num =0;
            for (var a =0;a<=100;a++) {
                if (a%2==0) {
                    num+= a;
                }
            }
            alert(num);
            document.write(num)
        </script>
    </head>
    <body>
    </body>
</html>

js的输出

  • alert() 直接弹框
  • document.write() 向页面输出
  • console.log()向控制台输出
  • innerhtml:向页面输出,可以改变内容

js声明变量和函数

var 变量的名称 = 变量的值

    var 函数的名称 = function(){
•   }
•   function 函数的名称(){
•   }

js的开发步骤

1. 确定事件
2. 通常事件都会出发一个函数
3. 函数里面通常都会去操作页面元素,做一些交互动作,弹框。修改页面,动态添加一些东西

选择器:

    元素选择器: 元素的名称{}
•   类选择器:  . 加类名{}
•   id选择器:  #id选择器{}
•   后代选择器:  选择器1 选择器2
•   子元素选择器: 选择器1 > 选择器2 
•   选择器分组: 选择器1,选择器2,选择器3{}
•   属性选择器: 选择器[属性的名称='属性的值']
•   伪类选择器:选择器分组: 选择器1,选择器2,选择器3{}
属性选择器: 选择器[属性的名称='属性的值']
伪类选择器:

浮动:

  • 适应于div块 左右排版

    float 属性: left right

清除浮动:

clear 属性: both left right

盒子模型: 上右下左 padding 10px 20px 30px 40px 顺时针的方向

内边距: 控制的盒子内距离
边框: 盒子的边框
外边距: 控制盒子与盒子之间的距离
绝对定位:  position : absolute; top:   left

定时器

  • setinterval("test()",3000) 每隔多少毫秒执行一次函数 循环函数
  • settimeout("test()",3000) 多少毫秒之后执行一次函数 一次性函数
  • timerid 上面定时器调用之后
  • clearinterval() 清除循环函数定时器
  • cleartimeout() 清除一次性定时器 。一般不用

切换图片

img.src = "图片路径"

事件:文档加载完成的事件 onload事件

显示广告 ,隐藏广告 :调用display的功能。

var img =document.getelementbyid("id");

img.style.display = "block";

img.style.display = "none"

引入外部js文件

<script src="js文件的路径"  type="text/javascript"/>
//需要注意的是:当从外部引入后 script中再写js代码就不会生效。
内部引入 :
直接在文件中任何位置:<script>在这里写js</script>

表单中常用的事件:

onfocus: 获取焦点事件
onblur : 失去焦点的事件
onkeyup: 按键抬起的事件
onclick:  单击事件
ondblclick:  双击事件 

表格隔行换色,鼠标移入和移除要变色:

onmouseenter:  鼠标移入
onmouseout:  鼠标移出
onload:  文档加载完成事件
onsubmit:  提交
onchange:   下拉列表内容改变

checkbox.checked 选中状态

dom的文档操作:

添加节点: appendchild
创建节点: document.createelement
创建文本节点: document.createtextnode()

点击事件

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            // 可以传参数
            function fun1 (x) {
            alert("我被单击了!!"+x);
            }
            function fun2 () {
                alert("我被单机了!!哈哈哈");
            }
            function fun3 () {
                alert("我被双击了!!哈哈哈");
            }
        </script>
    </head>
    <body>
        <input type="button" value="点击" name="按钮" onclick="fun1(100),fun2()" />
        <input type="button" value="双击" ondblclick="fun3()" />
    </body>
</html>
 

#案例一 ,校验#

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="../css/01.css" />
        <script>
            /*
            1.确定事件:表单提交事件  onsubmit事件
            2.事件所要触发的函数: checkform
            3. 函数中要执行一些程序
                 1. 函数中再创建一个方法统一判断用户名,密码,确认密码 是否为空,直接  调用这个函数。
            */
            function checkform(){
                //校验用户名是否为空
             var v1 = checkformisnull("username","用户名");
                //校验密码是否为空
             var v2 =checkformisnull("pwd","密码");
                //校验确认密码是否为空
             var v3 =checkformisnull("repwd","确认密码");
                 if(v2 && v3 ){
                    //获取密码的值
                    var pas = document.getelementbyid("pwd").value;
                    //获取确认密码的值
                    var repas = document.getelementbyid("repwd").value;
                    //判断是否一致
                    if(pas != repas){
                        alert("两次密码输入不一致!!");
                        return false;
                     }
                   }
             var v4 = document.getelementbyid("email").value;
                  if(/^([a-za-z]|[0-9])(\w|\-)+@[a-za-z0-9]+\.([a-za-z]{2,4})$/.test(v4)){
                    alert("邮箱验证通过");
                  }else{
                    alert("邮箱验证错误");
                    return false;
                  }
                //要验证的四个有一个不对就错 。
                return  v1 && v2 && v3 && v4;
            }
            function checkformisnull(id,msg){
                //验证用户名,密码,确认密码 是否为空
                var ele =document.getelementbyid(id);
                var val = ele.value;
                if(val == ""){ //此处不能写null 。
                    alert(msg+"不能为空!!!");
                    return false;
                }
                return true;
            }
        </script>
    </head>
    <body>
        <div id="divformid">
            <form onsubmit="return checkform()" action="#" method="get">
                <table  width="500">
                    <tr>
                        <td colspan="3">
                            <font color="#3164af" size="5">会员注册</font> user register
                        </td>
                    </tr>
                    <tr>
                        <td align="right">用户名</td>
                        <td colspan="2"><input type="text" id="username" name="username" size="50"/> </td>
                    </tr>
                    <tr>
                        <td align="right">密码</td>
                        <td colspan="2"><input type="password" id="pwd" name="pwd" size="50"/> </td>
                    </tr>
                    <tr>
                        <td align="right">确认密码</td>
                        <td colspan="2"><input type="password" id="repwd" name="repwd" size="50"/> </td>
                    </tr>
                  <tr>
                        <td align="right">email</td>
                        <td colspan="2"><input type="text" id="email" name="email" size="50"/> </td>
                    </tr>
                    <tr>
                        <td align="right">姓名</td>
                        <td colspan="2"><input name="text" id="name" name="name" size="50"/> </td>
                    </tr>
                    <tr>
                        <td align="right">性别</td>
                        <td colspan="2">
                            <input type="radio" name="sex" value="man" checked="checked" />男
                            <input type="radio" name="sex" value="woman" />女
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td colspan="2">
                            <input type="image" src="/day03/img/submit.jpg"  /> 
                        </td>
                    </tr>
                </table>
            </form>
        </div>
    </body>
</html>

#案例二,隐藏广告 #

<!doctype html>
<html>
    <head>
    <!--页面刚加载完成后,先隐藏图片属性,两秒后显示,过两秒后再消失。-->
        <meta charset="utf-8">
        <title></title>
        <style>
            .hmig{
                display: none;
            }
            .sowimg{
                display: block;
            }
        </style>
        <script>
            function showimg(){
                //1.选中广告的这个图片
                var obj = document.getelementbyid("pac");
                //2.修改class的值。切换为块,显示状态
                obj.classname="sowimg";
                //2秒后隐藏起来
                settimeout("hiddimg()",2000);
            }
            function hiddimg(){
                var obj = document.getelementbyid("pac");
                //2.修改class的值,使其切换成none值
                obj.classname="hmig";
            }
        </script>
    </head>
    <body onload="settimeout('showimg()',2000)">
        //选择一张图片作为广告。
        <img src="../img/3.jpg" id="pac" class="hmig" width="100%"/>
    </body>
</html>

#案例三,轮播图#

 
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            var count =1;
            function changeimg (){
                //获取img元素
                var img =document.getelementbyid("lbt");
                //修改src的属性
                img.src ="/day03/img/"+(++count)+ ".jpg";
                //当count = 3时 归零
                if(count ==3){
                    count =0;
                }
            }
        </script>
    </head>
    <body onload="setinterval('changeimg()',2000)">
        <img id="lbt" src="../../img/1.jpg" width="100%"/>
    </body>
</html>
 

推荐阅读