JavaScript详解

最新推荐文章于 2021-11-05 14:06:08 发布

柠七99

最新推荐文章于 2021-11-05 14:06:08 发布

阅读量137

点赞数 1

分类专栏： javaWeb 文章标签： javascript

本文链接：https://blog.csdn.net/m0_46657493/article/details/115437801

版权

javaWeb 专栏收录该内容

24 篇文章 1 订阅

订阅专栏

javascript:控制页面的行为

一、变量

javascript是一个弱类型语言（变量只有在运行时才会加载，类型可以在运行时变化，代码完成之后不会进行类型检查）

利用var x;定义一个全局变量
利用let x;定义一个局部变量

二、数据类型

（1）数值

（2）字符串:可以使用单引号和双引号
（3）boolean
（4）数组： var x = new Array();var x =[1,2,3];
（5）json对象 ：{key1:value1,key2;value2}
（6）undefined :未定义 var x;
（7）null 特殊类型，表示为空，var x = null
（8）function：函数对象 var x = function();function x(){}
定义好函数之后就可以执行x()

【注】(4)-(8)均是特殊类型，是javascript中的对象

三、类型的使用

（1）数组：

定义： var x = new Array();
x = [];
添加元素：x.push(元素)
遍历： for(let i in x) i = 数组索引
for(let e of x) e = 数组重每个元素 e=x[i]
for(int i = 0; i <x.length ;i++){}

（2）json

定义：let x ={};
添加键值对：x.键 =值； x.id=1 -->x={id:1}
x[‘键’]=值 x[‘id’]=1 键可以使用变量
遍历：for(let k in x){} 键=k,值=x[k]

（3）函数：

定义 let x = function();function x(){}
方法参数：可以使用以上任意类型 x = function(y){}
函数也可以作为方法参数
返回值：可有可无

注意：

=== 严格比较，值和类型都判断
!== 严格意义上的不等

if(x) //x可以是任意类型，但是x不为undefined/null/0

特殊：
console.log 在开发者工具控制台打印日志
JavaScript内置对象：
Window document (默认页面初始化就有的对象，已经携带属性)

例如：
1. window.location.herf="跳转的路径"；//当前页面会跳转到指定路径（动态改地址）
2. document.getElementByld("dom元素的id")//获取某个dom元素
//类似jquery框架重：$("#某个dom元素的id")返回jquery的dom对象
3. document.getElementByld("#xxx").innerHTML="..."；//dom元素标签内容改了（动态改内容）
例如：<p id="xxx"></p> 调用上面方法hi后变为 <p id="xxx">...</p>

DOM元素事件：
html和javascript(js)结合使用：dom元素都是基于事件驱动
常见事件：

onload：body标签使用，文档架子啊完执行事件函数
onclick:鼠标点击事件，dom元素都有的事件
onchange:input标签，select都可以使用，改变内容时执行函数
onfocus：获取焦点时执行
onblur：失去焦点时执行
< input type=“text” οnfοcus=“函数名()”/>
onsubmit：表单元素绑定事件
< form οnsubmit=“函数名()”>…< /form>

常见的js框架：
纯js框架：提供封装好的js函数，更加方便的写js功能
如：jquery,vuejs
ui框架：提供js,css,font引入框架，js执行页面元素的样式处理，使用美观页面控件
如bootstrap,vuejs ui插件

模拟用户登录：

//login.ok.json
{
    "ok": true
}

//login.error.json
{
  "ok": false,
  "code": "LOG001",
  "msg": "用户名密码错误"
}

//articleList.ok.json
{
  "success": true,
  "data": [{
    "id": 1,
    "title": "文章1"
  },
    {
      "id": 2,
      "title": "文章2"
    }]
}

//login.js
function login(form) {
    //校验用户名和密码，如果校验不通过，提示并不提交
    if (form.oninvalid) {
        //alert("空");
        return false;
    }
    $.ajax({
        //模拟用户登录
        //登录成功
        //url:"../data/login.ok.json", //静态json文件模拟后端的servlet返回
        //登录失败
        url:"../data/login.error.json",
        type:"POST",
        success:function (r) {  //r={ok:true}
            if (r.ok){
                //登录操作，用户名密码校验通过
                alert("登录成功，跳转页面")
                $("#login_error").hide();
            } else {
                //alert("错误码："+r.code + "\n错误消息：" + r.msg);
                $("#login_error").html(r.msg);
                $("#login_error").show(); //显示
            }
        }
    })
    return false;
    //原生的ajax请求
//     //通过，发起ajax请求 表单提交
//     var xhr = new XMLHttpRequest();
//
//     xhr.onload = function () {
//         // 输出接收到的文字数据
//         alert(xhr.responseText)
//         //document.getElementById("demo").innerHTML=xhr.responseText;
//
//     }
//
//     xhr.onerror = function () {
//         alert("请求出错")
//         //document.getElementById("demo").innerHTML="请求出错";
//     }
//
// // 发送异步 GET 请求
//     //但三个参数async表示是否发起异步请求
//     xhr.open("GET", "../data/login.ok.json", true);
//     xhr.send();
//    return false; //默认不提交表单事件  自己发起一个ajax请求
}

//main.js
$(function () {
    $.ajax({
        url:"../data/articleList.ok.json",
        type:"GET",
        success: function (r) { //响应回调  r为响应体数据
            if(r.ok){//r={ok:true, data: [{id: 1, title: xxx}]}
                let content =   '<ul>';
                //根据响应数据拼接文章字符串
                for(let a of r.data){
                    content +=      '<li>';
                    content +=          a.title;
                    content +=      '</li>';
                }
                content +=      '</ul>';
                $("#article_list").html(content);
                //$("#article_list").html(content);
            }
        }
    })
})

<!--login.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>

    <script type="text/javascript" src="http://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script type="text/javascript" src="../js/login.js"></script>

</head>
<body>
    <h3>用户登录</h3>
    <!--绑定函数-->
    <form onsubmit="return login(this)">
        <!--required  表示必填的字段-->
        用户名：<input type="text" name="username" required><br>
        密 码：<input type="password" name="password" required><br>
        <!--display:none  开始不显示-->
        <p id="login_error" style="color: brown;display:none"></p>
        <input type="submit" value="登录">
        <input type="reset" value="重置">
    </form>
</body>
</html>

<!--main.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人博客首页</title>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script type="text/javascript" src="../js/main.js"></script>
</head>
<body>
<div id="article_list"></div>
</body>
</html>

柠七99

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JavaScript详解

javascript:控制页面的行为一、变量javascript是一个弱类型语言（变量只有在运行时才会加载，类型可以在运行时变化，代码完成之后不会进行类型检查）利用var x;定义一个全局变量利用let x;定义一个局部变量二、数据类型（1）数值（2）字符串:可以使用单引号和双引号（3）boolean（4）数组： var x = new Array();var x =[1,2,3];（5）json对象：{key1:value1,key2;value2}（6）undefined :未
复制链接

扫一扫