JavaScript 基础知识(三)

前面已经介绍HTML和CSS，这两个是网页结构和样式，而负责控制网页行为的是javascript。浏览器上直接可以解释执行，而独立运行就需要nodejs集成运行环境。

01 - JavaScript操作标签元素

前端已经讲了获取标签元素，接下来讲操作标签元素的属性。

属性的操作

首先获取的页面标签元素，然后就可以对页面标签元素的属性进行操作，属性的操作包括:

属性的读取
属性的设置

属性名在js中的写法：

html的属性和js里面属性大多数写法一样，但是“class” 属性写成 “className”
“style” 属性里面的属性，有横杠的改成驼峰式，比如：“font-size”，改成”style.fontSize”

示例代码：

<style>
    .sty01{
        font-size:20px;
        color:red;
    }
    .sty02{
        font-size:30px;
        color:pink;
        text-decoration:none;
    }

</style>

<script type="text/javascript">

    window.onload = function(){
        var oInput = document.getElementById('input1');
        var oA = document.getElementById('link1');
        // 读取属性值
        var sValue = oInput.value;
        var sType = oInput.type;
        var sName = oInput.name;
        var sLinks = oA.href;

        // 操作class属性,需要写成“className”
        oA.className = 'sty02';

        // 写(设置)属性
        oA.style.color = 'red';
        oA.style.fontSize = sValue;
    }

</script>

<input type="text" name="setsize" id="input1" value="20px">
<a href="#" id="link01" class="sty01">这是一个链接</a>

innerHTML属性

innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。

innerHTML可以读取或者设置标签包裹的内容

<script type="text/javascript">
    window.onload = function(){
        var oDiv = document.getElementById('div1');
        //读取
        var sTxt = oDiv.innerHTML;
        alert(sTxt);
        //写入
        oDiv.innerHTML = '<a href="https://www.baidu.com">测试标签<a/>';
    }
</script>


<div id="div1">这是一个div元素</div>

说明：

标签属性的获取和设置:

var 标签对象 = document.getElementById('id名称'); -> 获取标签对象
var 变量名 = 标签对象.属性名 -> 读取属性
标签对象.属性名 = 新属性值 -> 设置属性

02 - JavaScript数组及操作方法

数组对象的作用是：使用单独的变量名来存储一系列的值。

数组的介绍

数组就是一组数据的集合，javascript 中，数组里面的数据可以是不同类型的数据，好比 python 里面的列表。

数组的定义

// 实例化对象方式创建
var aList = new Array(1,2,3);

// 字面量方式创建，推荐使用
var aList2 = [1,2,3,'asd'];

上面这种是定义的时候就赋值，当然也可以创建一个空的数组，如：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
 <script>
  var nTest = new Array();
  nTest[0] = 'python'
  nTest[1] = 'java'
  nTest[2] = 'go'
  console.log(nTest)
 </script>

</body>


</html>

运行结果：

多维数组

多维数组指的是数组的成员也是数组，把这样的数组叫做多维数组。

var aList = [[1,2,3],['a','b','c']];

定义：

所有的JavaScript变量都是对象。数组元素是对象。函数是对象。

因此，你可以在数组中有不同的变量类型。

你可以在一个数组中包含对象元素、函数、数组：

myArray[0]=Date.now;
myArray[1]=myFunction;
myArray[2]=myCars;

在上面那个示例中，数组成员不一定就是数组，也有可能是其他对象。

数组的操作

1、获取数组的长度

var aList = [1,2,3,4];
alert(aList.length); // 弹出4

2、根据下标取值

var aList = [1,2,3,4];
alert(aList[0]); // 弹出1
3、 从数组最后添加和删除数据
var aList = [1,2,3,4];
aList.push(5);
alert(aList); //弹出1,2,3,4,5
aList.pop();
alert(aList); // 弹出1,2,3,4

4、根据下标添加和删除元素

arr.splice(start,num,element1,.....,elementN)

参数解析：

start：必需，开始删除的索引。
num：可选，删除数组元素的个数。
elementN：可选，在start索引位置要插入的新元素。

此方法会删除从start索引开始的num个元素，并将elementN参数插入到start索引位置。

var colors = ["red", "green", "blue"];
colors.splice(0,1);  //删除第一项
alert(colors);  //green,blue

colors.splice(1, 0, "yellow", "orange");  //从第一个索引位置插入两项数据
alert(colors);  //green,yellow,organge,blue

colors.splice(1, 1, "red", "purple");  //删除一项，插入两项数据
alert(colors);  //green,red,purple,orange,blue

说明：

数组的定义使用一对中括号
获取数组的长度使用length属性
从数组最后添加元素使用push方法
从数组最后删除元素使用pop方法
根据下标添加和删除元素使用splice方法

03 - JavaScript循环语句

循环可以将代码块执行指定的次数

循环语句的介绍

如果您希望一遍又一遍地运行相同的代码，并且每次的值都不同，那么使用循环是很方便的。我们可以这样输出数组的值：
一般写法：

<script>
  var cars = new Array('python','java','go','html','javascript','css');
  // nTest[0] = 'python'
  // nTest[1] = 'java'
  // nTest[2] = 'go'

document.write(cars[0] + "<br>"); 
document.write(cars[1] + "<br>"); 
document.write(cars[2] + "<br>"); 
document.write(cars[3] + "<br>"); 
document.write(cars[4] + "<br>"); 
document.write(cars[5] + "<br>");
console.log(cars)

 </script>

使用for循环：

<script>
  var cars = new Array('python','java','go','html','javascript','css');
  // nTest[0] = 'python'
  // nTest[1] = 'java'
  // nTest[2] = 'go'
  for (var i=0;i<cars.length;i++)
{ 
    document.write(cars[i] + "<br>");
}

 </script>

两种写法的运行结果：

循环语句就是让一部分代码重复执行，javascript中常用的循环语句有:

for
while
do-while

for循环

var array = [1, 4, 5];

for(var index = 0; index < array.length; index++){
    result = array[index];
    alert(result);
}

while循环

var array = [1, 4, 5];        
var index = 0;

while (index < array.length) {
    result = array[index];
    alert(result);
    index++;
}

说明:
当条件成立的时候, while语句会循环执行。

do...while循环

var array = [1, 4, 5];
var index = 0;

do {
    result = array[index];
    alert(result);
    index++;
} while (index < array.length);

说明:
当条件不成立的时候do语句也会执行一次。
备注：
在js中，循环的语句只有这三种：
1. for
2. while
3. do-while

04 - JavaScript字符串拼接

JavaScript 字符串用于存储和处理文本。

字符串拼接

字符串拼接使用: "+" 运算符

var iNum1 = 10;
var fNum2 = 11.1;
var sStr = 'abc';

result = iNum1 + fNum2;
alert(result); // 弹出21.1

result = fNum2 + sStr;
alert(result); // 弹出11.1abc

说明：

数字和字符串拼接会自动进行类型转换(隐士类型转换)，把数字类型转成字符串类型进行拼接

"+" 运算符能够实现字符串的拼接操作。

05 - JavaScript定时器

定时器就是在一段特定的时间后执行某段程序代码。

定时器的使用

js 定时器有两种创建方式：

setTimeout(func[, delay, param1, param2, ...]) ：以指定的时间间隔（以毫秒计）调用一次函数的定时器
setInterval(func[, delay, param1, param2, ...]) ：以指定的时间间隔（以毫秒计）重复调用一个函数的定时器

setTimeout函数的参数说明:

第一个参数 func , 表示定时器要执行的函数名
第二个参数 delay, 表示时间间隔，默认是0，单位是毫秒
第三个参数 param1, 表示定时器执行函数的第一个参数，一次类推传入多个执行函数对应的参数。

<script> 
    function hello(){ 
        alert('hello'); 
    } 

    // 执行一次函数的定时器
    setTimeout(hello, 500);
</script>

setInterval函数的参数说明:

第一个参数 func , 表示定时器要执行的函数名
第二个参数 delay, 表示时间间隔，默认是0，单位是毫秒
第三个参数 param1, 表示定时器执行函数的第一个参数，一次类推传入多个执行函数对应的参数。

<script> 
    function hello(){ 
        alert('hello'); 
    } 
    // 重复执行函数的定时器
    setInterval(hello, 1000);
</script>

定时器的清除

js 清除定时器分别是:

clearTimeout(timeoutID) 清除只执行一次的定时器(setTimeout函数)
clearInterval(timeoutID) 清除反复执行的定时器(setInterval函数)

clearTimeout函数的参数说明:

timeoutID 为调用 setTimeout 函数时所获得的返回值，使用该返回标识符作为参数，可以取消该 setTimeout 所设定的定时执行操作

<script>
    function hello(){
        alert('hello');

    }
    // 执行一次函数的定时器
    t1 = setTimeout(hello, 500);
    // 清除只执行一次的定时器
        clearTimeout(t1)
</script>

clearInterval函数的参数说明:

timeoutID 为调用 setInterval 函数时所获得的返回值，使用该返回标识符作为参数，可以取消该 setInterval 所设定的定时执行操作。

<script> 
    function hello(){ 
        alert('hello'); 
    } 
    // 重复执行函数的定时器
    var t1 = setInterval(hello, 1000);

    function stop(){
        // 清除反复执行的定时器
        clearInterval(t1); 
    }  

</script> 

<input type="button" value="停止" onclick="stop();">

说明：

定时器的创建

只执行一次函数的定时器, 对应的代码是setTimeout函数
反复执行函数的定时器, 对应的代码是setInterval函数

清除定时器

清除只执行一次函数的定时器, 对应的代码是clearTimeout函数
清除清除反复执行的定时器, 对应的代码是clearInterval函数

知识点回顾

本节介绍了javascript的标签属性的获取和设置、数组、js循环语句、字符串拼接和定时器的应用。

1、js属性操作可以分两种，一种是html的属性，一种是css的属性操作。

2、数组主要有两类，一维和多维，数组定义时就赋值，也可以定义一个空数组。
3、循环语句主要有三种，常用的是for循环，while和do...while的逻辑是相反的。
4、js字符串拼接通常用“+”符号来操作，并且程序会自动转换数据类型，这也叫隐式转换。
5、定时器用来指定程序在某个时间去执行某个程序，主要有两个：setTimeout和setInterval两种定时器，前者执行一次，后者重复执行，都是在设置好的间隔时间去触发。
6、设置了定时器，如果不想要了，当然也有清除定时器的方法，针对上面两种定时器设置，分别有对应两种清除定时器函数：clearTimeout和clearInterval。

工欲善其事，必先利其器！

posted @ 2023-02-05 22:53 全栈测试开发日记阅读(19) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

全栈测试开发日记

像蚂蚁一样工作，像蝴蝶一样生活

JavaScript 基础知识(三)

01 - JavaScript操作标签元素

02 - JavaScript数组及操作方法

03 - JavaScript循环语句

04 - JavaScript字符串拼接

05 - JavaScript定时器

公告