Day03-jS

2019-08-12 14:04:30 发布 491 浏览

页面报错/反馈

已收藏点赞

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));

案例：求偶数和

html>
    head>
        meta charset="UTF-8">
        title>title>
        script>
        //  document.write("哈喽");
            var num =0;
            for (var a =0;a100;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的开发步骤

确定事件

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

选择器：

    元素选择器: 元素的名称{}

•   类选择器:  . 加类名{}
•   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代码就不会生效。
内部引入 ：
直接在文件中任何位置：

表单中常用的事件：

onfocus: 获取焦点事件

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

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

onmouseenter:  鼠标移入

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

checkbox.checked 选中状态

DOM的文档操作:

添加节点: appendChild

创建节点: document.createElement

创建文本节点: document.createTextNode()

点击事件

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>

#案例一，校验#

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>&lt

登录查看全部

参与评论