JavaScript省流版

最新推荐文章于 2024-10-02 05:39:15 发布

振鹏Dong

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量115

点赞数 1

分类专栏： Java全栈开发文章标签： javascript 学习

本文链接：https://blog.csdn.net/qq_74092815/article/details/130329037

版权

Java全栈开发专栏收录该内容

3 篇文章 0 订阅

订阅专栏

【本人学习总结、相对基础】

JavaScript是一门脚本语言（Java是编译语言）

引入JS的方式有三种即1、行内 2、内联 3、外链；引入的写法与CSS的使用很类似。

JavaScript的执行原理是：

Java的数据类型大体分为简单数据类型和复杂数据类型两类。

其中，简单数据类型特殊的有 undefined、null、NaN

要对以上进行区分

NaN 意思是not a number

undefined 是定义了但是没有赋值

null 为空

我们可以通过 typerof 变量名 ------>得到对应的数据类型

数据类型之间的转化，与Java的大体类似。

比如说方法toString(),

Number(参数); ------>转化为数值类型

parseInt(); ------->截取字符串类型的数值部分，从不能转化的部分截掉

在JavaScript中，可以使用多种方法来生成数组。其中最常见的方法是使用数组字面量（[]）或Array构造函数。例如，使用数组字面量创建一个包含数字的数组可以像这样：

let numbers = [1, 2, 3, 4, 5];

而使用Array构造函数创建一个相同的数组可以像这样：

let numbers = new Array(1, 2, 3, 4, 5);

除此之外，还有其他方法可以生成数组，例如使用Array.from()方法从类似数组的对象中创建数组，或者使用Array.of()方法创建具有指定数量元素的数组。

流程控制与Java相同

浏览器的断点功能要学会使用【浏览器开发者工具---->源代码----->设置断点 ----->刷新页面----->逐过程调试】

表单验证，下面实现最基本。

<script>   function checkForm(){
   
   var userName = document.getElementById("userName").value;
   var email =document.getElementById("email").value;                       
if(userName==""){                         
    alert("请填写用户名!");
    return false;                       
}if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(email)){                         
    alert("邮箱格式不正确！");                         
    return false;}                       

return true;

}
 </script><form action="#" onsubmit="return checkForm()">
 用户名:<input type="text" id="userName"></input><br/>
   email:<input type="text" id="email"></input><br/>     
<input type="submit" value="提交"></form>

在JavaScript中，使用表单验证来确保用户输入的数据符合特定的格式和要求。一种常见的方法是使用表单事件监听器来捕获表单提交事件，并在提交之前对输入数据进行验证。可以使用正则表达式来检查输入数据是否符合特定的格式，比如电子邮件地址、电话号码等。还可以使用条件语句来检查输入数据是否符合特定的要求，比如是否为必填字段、是否超过最大长度、是否不为空等。

在验证失败时，可以向用户显示错误消息，帮助用户更好地理解输入数据的错误。

通过这些方法，可以实现表单验证来提高用户输入数据的准确性和可靠性。

JavaScript中对于DOM操作：

实现图片轮播

可以使用JavaScript中的定时器和DOM操作。首先，通过DOM操作获取需要轮播的图片元素。

然后，使用定时器来控制图片的切换，每隔一定的时间就切换到下一张图片。

这样就可以实现简单的图片轮播效果了。

<script>function init(){   
//每隔多长时间执行一下js脚本或者js函数
   setInterval("changeImg()",3000) 
} 
var i=1; 
function changeImg(){
   i++;   
var img = document.getElementById("image"); 
  img.src="img/"+i+".jpg"; // 这里的i是利用图片的名字规律   
if(i==3){i=0;} } 
</script> <body onload="init()"><img src="img/1.jpg" alt="" id="image" /></body>

实现广告的定时显示

在JavaScript中，我们可以使用计时器函数来实现广告图片的定时显示。

具体来说，我们可以使用“setTimeout()”函数来实现图片的加载。

<script> function init(){ 
  setTimeout("showImg()",3000);//过多长时间以后执行一段脚本或函数    
 } 
function showImg(){   
document.getElementById("myImg").style.display = "block";   
setTimeout("hiddenImg()",3000); } 
function hiddenImg(){   
document.getElementById("myImg").style.display = "none"; 
} 
</script> <body onload="init()"><img src="img/1.jpg" id="myImg" style="display: none;" alt="" />   </body>

隔行变色

JavaScript中可以通过DOM操作来实现表格隔行变色。

具体实现方法是，首先获取表格对象，然后获取表格中所有的行，遍历每一行，对于奇数行和偶数行分别设置不同的背景颜色。

可以通过CSS样式来定义这些颜色，然后使用JavaScript来动态地为表格中的行添加对应的样式。

例如，可以使用以下代码实现表格隔行变色：

// 获取表格对象 
var table = document.getElementById("myTable"); 
// 获取表格中的所有行 
var rows = table.getElementsByTagName("tr"); // 通过标签名 返回一个数组
 // 遍历每一行，为奇数行和偶数行分别设置不同的背景颜色 
for (var i = 0; i < rows.length; i++) {   
if (i % 2 == 0) {     
rows[i].style.backgroundColor = "#f2f2f2"; // 偶数行背景颜色   
} else {     
rows[i].style.backgroundColor = "#ffffff"; // 奇数行背景颜色   
  }
}

全选全不选

JavaScript可以通过操作DOM元素来实现全选和全不选的功能。

我们可以通过获取到所有的复选框元素，然后通过循环遍历设置它们的checked属性来实现全选和全不选的功能。

// 获取全选按钮和所有复选框元素 
var checkAll = document.getElementById("checkAll"); 
var checkboxes = document.querySelectorAll("input[type='checkbox']"); 
// 给全选按钮添加点击事件 
checkAll.addEventListener("click", function() {   
// 遍历所有复选框元素，设置它们的checked属性 
for(var i=0;i<chkboxes.length;i++){   
chkboxes[i].checked = chkAll.checked; 
} 
}
);

二级联动：

两个下拉框之间的关联关系，当第一个下拉框选择某个选项时，第二个下拉框会发生相应的变化。

同时，我们需要注意在生成第二个下拉框选项时，要清空原有的选项，避免重复添加。

<script>
   var cities = new Array(3);    
    cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市");
    cities[1] = new Array("长沙市","岳阳市","株洲市","汴州市");    
    cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市");
    cities[3] = new Array("郑州市","洛阳市","开封市","安阳市");
        function changePro(value){
              document.getElementById("now").length = 1;
   for (let index = 0; index < cities.length; index++) {                    
if(index == value){
                          
for(let i = 0;i<cities[index].length;i++){                                
var option = document.createElement("option");                               
 var cityName = document.createTextNode(cities[index][i]);                        
  option.appendChild(cityName);                                
  document.getElementById("now").appendChild(option);   // DOM    
 }                 
 }                 
    }     
 }</script> 
<body>   <select name="" id="pro" onchange="changePro(this.value)">
     <option>--请选择--</option>
     <option value="0">湖北</option> 
     <option value="1">湖南</option> 
     <option value="2">河北</option> 
     <option value="3">河南</option> 
</select>    
     <select name="" id="now">    <option>--请选择--</option>  </select></body>

总结点击事件

在以上的案例中，已经使用到的

onclick // 鼠标单机（ondblclick）双击

onload // 页面加载时间，所有的其他操作可以放在这个绑定的函数里去

onmouseover // 鼠标在这个组件上

onmouseout // 鼠标移开

onsubmit // 表单提交事件通过返回值，判断是否会提交

onchange // 当用户改变内容时，可以使用这个事件（如二级联动部分）