js的基本使用

最新推荐文章于 2024-01-04 17:17:42 发布

i s s a

最新推荐文章于 2024-01-04 17:17:42 发布

阅读量527

点赞数

分类专栏：笔记文章标签： javascript 前端 servlet

本文链接：https://blog.csdn.net/m0_62806610/article/details/126166555

版权

笔记专栏收录该内容

36 篇文章 0 订阅

订阅专栏

1.使用方式

引用位置，js的引用位置和css的一样要在HTML中进行，但又有些许不同，例如：

<!DOCTYPE html>
<html>
    <head>
     <link href="text.css"><!-- 这里是css引用的位置 -->
    </head>
    <body>
    <!--可以写在这里面，即写即用，比外联的执行要快 -->
        <script>
        function show(){
        }
        </script>
    </body>
    <script herf="text.js"></script><!--这里是js外部引用的位置 -->
    <!--在这里引用是为了在html页面加载后，js写的功能才能被调用，否则
    就先加载js，后加载html的话，js的函数会找不到目标，同时如果有多个
    js的话，要考虑它们的渲染顺序 -->
</html>

2.基本语法

2.1 基本类型：
常用基本类型
如果我们想看一个变量的数据类型，可以使用typeof 去查看。

2.2 声明变量：
声明的关键字常用的有三个 let,var,const。

var相当于全局变量，存在变量提升，相当于在window上声明。
何为提升变量，就是变量的声明(注意不包含变量初始化）会被提升（置顶）到声明所在的上下文，也就是说，在变量的作用域内，不管变量在何处声明，都会被提升到作用域的顶部，但是变量初始化的顺序不变。

var s='变量1';
(function show(){
var s='变量2';
/*就是s会先声明为undefined进行创建,再进行初始*/
     ......
})()

let声明的变量，不存在提升变量，在函数体内的改变不会影响全局的let，let会进行预处理，所以let声明变量要初始化，否则会报错。

let s='变量1';
function show(){
let s='变量2';
//此处的s变量的值改变不会影响上面的s，同时let支持变量名重复。
}

const声明的变量是常量，和java中的常量差不多，在同一作用域或块中，不允许将已有的 var 或 let 变量重新声明或重新赋值给 const，不允许将已有的 const 变量重新声明或赋值。

2.3 函数

函数在js中一般用function来声明，可以隐式也可以显式声明。

//这为显式的，有函数名的
function show(){
}
//这是隐式的，无函数名的。
window.onload=function(){
 }

函数一般有两种使用形式。对于一个button来说，id=“btn”。

<button id="btn" onclick="show()"></button>
//第一种
btn.onclick=function(){
}
//第二种，对于先定义好一个函数
function show(){
}

函数类一些常用的方法,获取dom节点，处理dom节点的

function show(){
//获取id="btn"的dom节点
//除了用id,还可以用name去获取一组name值相同的元素。
let btn=document.getElementById("btn");
//用来给id="btn"的dom点元素里面的进行操作，赋值
btn.innerHTML='';

}

3.前端交互

当我们想要实现动态的网页的话，就需要进行响应操作，这里ajax比较方便，ajax有两种，一种式jQuery的ajax,使用简单，但需要导入jQuery包，另一种就是原生的ajax。

function show(){
//$代表jQuery
 $.ajax({
        type: "post",//请求类型，有post和get两种
        url: "/add",//后端地址
        data:peo,//传输的数据
        dataType: "json",//从后端返回的数据类型
        success(data){//括号里的data是从后端返回来的数据，请求成功后的，在里面进行操作
        //jQuery的ajax会自动的将JSON转化成需要的
            document.getElementById('menuBody').innerHTML = '';
            people=data;
            setPeople(people, (p - 1) * 10, p - 1);
            selectAll();
        },
        error(){
           alert("添加失败");
        }
    })
}

function show2(){
//创建请求对象并判断是哪种浏览器的类型
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : ActiveXObject("microsoft.XMLHttp")
        xhr.open("get",url,true);//请求类型，地址，和异步
        xhr.send();//发送请求，如果是post请求需要设置请求头
        xhr.onreadysattechange = () =>{//这里是检测响应状态的
            if(xhr.readystate == 4){
                if(xhr.status == 200){
                    var data = xhr.responseTEXT;//获取返回的数据，如果是JSON类型的
                    //就进行转换
                    data=JSON.parse(data);
                    return data;
                }
            }
        }    
}

以上就是关于js的一些基础用法。js还有很多的用法，js也可以用来做动画效果，还能实现很多的交互功能。

i s s a

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
js的基本使用

当我们想要实现动态的网页的话，就需要进行响应操作，这里ajax比较方便，ajax有两种，一种式jQuery的ajax,使用简单，但需要导入jQuery包，另一种就是原生的ajax。以上就是关于js的一些基础用法。js还有很多的用法，js也可以用来做动画效果，还能实现很多的交互功能。如果我们想看一个变量的数据类型，可以使用typeof 去查看。声明的关键字常用的有三个 let,var,const。...
复制链接

扫一扫