Javascript介绍（图文教程）

JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。

.join() sort.() Array.from() 介绍和使用

join() 把数组中的所有元素转换为一个字符串
sort() 数组排序
Array.from() 将类数组对象或可迭代对象转化为数组。 尝试一下>>

<script>
// join() 把数组中的所有元素转换为一个字符串：
var arr = ["Banana", "Orange", "Apple", "Mango"];
console.log("arr",arr)
console.log("arr.join()",arr.join())
console.log('arr.join("")',arr.join(""))
console.log('arr.join("|")',arr.join("|"))


// sort() 数组排序
console.log("arr.sort()",arr.sort());
var arr=[0,5,3,10,2,7,9]
console.log("arr",arr)
console.log("arr.sort()",arr.sort());


// Array.from() 将类数组对象或可迭代对象转化为数组。

// 参数为数组,返回与原数组一样的数组
console.log(Array.from([1, 2])); // [1, 2] 
// 参数含空位
console.log(Array.from([1, , 3])); // [1, undefined, 3]

setTimeout和setInterval 介绍和使用

setTimeout和setInterval是JavaScript中的两个函数，用于在指定的时间之后执行一段代码或者每隔一段时间执行一段代码。
尝试一下>>

setTimeout函数用于在指定的延迟后执行一次指定的函数。它接受两个参数：要执行的函数和延迟的毫秒数。

setTimeout(function(){
    console.log("Hello, world!");
}, 2000);  // 2秒后输出 "Hello, world!"

setInterval函数用于每隔指定的时间重复执行指定的函数。它也接受两个参数：要执行的函数和时间间隔的毫秒数。可以使用clearInterval函数停止setInterval的执行。

var count = 0;
var intervalId = setInterval(function(){
    count++;
    console.log("Count: " + count);
    if (count === 5) {
        clearInterval(intervalId);  // 当 count 等于5时停止执行
    }
}, 1000);  // 每隔1秒输出一次 count 的值，直到 count 等于5

异步执行一个函数

异步执行一个函数
尝试一下>>

//异步执行一个函数

//函数asyncRun，用于异步执行func函数
function asyncRun(func){
    //判断Promise是否可用
    if(typeof Promise!=='undefined'){
        //如果可用，则使用Promise.resolve().then执行func函数
        Promise.resolve().then(func);
    //判断MutationObserver是否可用
    }else if(typeof MutationObserver!=='undefined'){
        //如果可用，则创建一个MutationObserver实例，并使用实例的observe方法观察文本节点，并设置文本节点的内容
        var ob=new MutationObserver(func); 
        var textNode=document.createTextNode('0');
        ob.observe(textNode,{characterData:true});
        textNode.data='1';
    //如果都不可用，则使用setTimeout执行func函数
    }else{
        setTimeout(func);
    }
}

asyncRun(function(){
    console.log('1');
})
asyncRun(function(){
    console.log('2');
})
asyncRun(function(){
    console.log('3');
})

基础知识

在javascript里输入不同数字转换结果

刷新当前页面和跳转到指定网址

刷新本页：window.location.reload()
跳转网页：window.location.href = "https://www.xiyueta.com"
新的窗口：window.open(url, windowName, windowFeatures)
- `windowName`：可选参数，表示新窗口或标签页的名称。如果省略或设置为`""`，则浏览器会自动为该窗口分配一个名称。
- `windowFeatures`：可选参数，表示新窗口或标签页的特性，如"width=400,height=300,location=yes,scrollbars=yes,status=yes,resizable=yes,modal=yes"等。
尝试一下>>

弹出提示确认删除

js按钮确认删除提示
尝试一下>>

第一种方法(a标签直接加)：<br>
<a href="?act=del" onclick="if(confirm('确认删除？')==false)return false;">删除</a>


<br><br><br>

<br>第二种方法(a标签调用js)：<br>
<a href="?act=del" onclick="javascript:return del();">删除</a>
<script> 
function del() { 
    var msg = "您真的确定要删除吗？";
    if (confirm(msg)==true){
        return true;
    }else{
        return false;
    }
}
</script>


<br><br><br>

<br>第三种方法(button)：<br>
<input type="button" style="" value="删除数据" onclick="if(confirm('确认？')==false)return false;location.href='?act=del2'"  />


<br><br><br>

<br>第四种方法(a标签加动作)：<br>
<a onclick="if(confirm('确认删除？')==false)return false;location.href='?act=del3'">删除</a>

<br><br><br>

<br>第五种方法(form加动作)：<br>
<form action="?act=delete" method="post" accept-charset="UTF-8" onsubmit="if(confirm('您确定要删除吗？')==false)return false">
<input type="hidden" name="userid" value="286">
form表单删除提示
<input type="submit" value="确认删除" name="q"/>
</form>  
 

<br><br><br>

<br>第六种方法(form调js动作)：<br>
<form action="?act=delete" method="post" accept-charset="UTF-8" onsubmit="return formSubmit()">
<input type="hidden" name="userid" value="286">
form表单删除提示
<input type="submit" value="确认删除" name="q"/>
</form>  
<script>
function formSubmit(){
    if (confirm("您确定要删除吗？")==true){
        return true;
    }else{
        return false;
    }
    
}
</script>

字符串转成数字

1.转换函数
js提供了parseInt()和parseFloat()两个转换函数。前者把值转换成整数，后者把值转换成浮点数。只有对String类型调用这些方法，这两个函数才能正确运行；对其他类型返回的都是NaN(Not a Number)

parseInt("1234blue"); //returns 1234
parseInt("0xA"); //returns 10
parseInt("22.5"); //returns 22
parseInt("blue"); //returns NaN
        

返回上一页

window.history.back()方法或者window.history.go(-1)来返回上一页。

<a onclick="window.history.back()">返回上一页</a> <br>  
<a href="javascript:window.history.go(-1)">返回上一页</a>  
        

表单相关

点击后让submit类型按钮不可再点击，毕免重复点击

//点击后让submit类型按钮不可再点击，毕免重复点击
//表单提交
$('form').submit(function(event) {
    $('input[type=submit]').prop('disabled', true);//停止重复提交了
})



        

打开当前页面

打开当前页面

<input name="button322" type="button" onclick="window.location='javascript:window.print()'" value="打印此页" id="tjx" style="border-radius:3px;cursor:pointer; box-shadow: 0px 3px 5px #DDD;">