前端基础3——JavaScript基础用法-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端基础3——JavaScript基础用法。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、基本使用

JavaScript（简称JS）：是一种轻量级客户端脚本语言，通常被直接嵌入HTML 页面，在浏览器上执行。

JavaScript作用：改变页面中的HTML元素、属性、样式、事件。

1.1 内部方式

内嵌样式，在body标签中使用。

1.在body标签中写js脚本。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js测试</title>
</head>
<body>
<script>
    alert("你好，qingjun");
</script>
</body>
</html>

2.查看效果。
前端基础3——JavaScript基础用法,python开发,前端,javascript,开发语言,运维开发

1.2 外部导入方式

在head标签中使用。

1.编写js脚本main.js，统一存放在js目录下。

alert("你好，卿君");

2.html模板引用js文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js测试</title>
    <script type="text/javascript" src="js/main.js"></script>   ##引用js文件。
</head>
<body>
</body>
</html>

3.查看效果。
前端基础3——JavaScript基础用法,python开发,前端,javascript,开发语言,运维开发

1.3 css标签调用js脚本（触发事件）

事件：指的是当HTML中发生某些事件时所调用的方法（处理程序）。

例如点击按钮，点击后做相应操作，例如弹出一句话。

1.可以使用css中的一个标签直接调用js脚本。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js测试</title>
</head>
<body>

<button type="button" onclick="alert('欢迎来到中国')">提交</button>   ## onclick标签直接调用js脚本。

</body>
</html>

2.查看效果。
前端基础3——JavaScript基础用法,python开发,前端,javascript,开发语言,运维开发

二、Windows对象

Window 对象表示浏览器中打开的窗口。

2.1 对象属性

window对象属性	描述
document	每个载入浏览器的 HTML 文档都会成为 Document 对象
innerheight	返回窗口的文档显示区的高度
innerwidth	返回窗口的文档显示区的宽度
location Location	对象包含有关当前 URL 的信息
Navigator Navigator	对象包含有关浏览器的信息
Screen Screen	对象包含有关客户端显示屏幕的信息
history History	对象包含用户（在浏览器窗口中）访问过的 URL
window window	包含对窗口自身的引用

1.基本使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>控制开关</title>
</head>
<body>
<script type="text/javascript">
    window.document.write("输出内容");
    console.log(window.innerWidth,window.innerHeight,"输出内容");   //浏览器做适配时可以使用。
    console.log(window.Navigator);
</script>
</body>
</html>

前端基础3——JavaScript基础用法,python开发,前端,javascript,开发语言,运维开发

2.刷新按钮。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>控制开关</title>
</head>
<body>
<button type="button" onclick="location.reload()">刷新当前页面</button>
<button type="button" onclick="location.href=location.href">重新请求当前页面</button>
<button type="button" onclick="location.href='http://www.baidu.com'">请求别的页面</button>
</body>
</html>

前端基础3——JavaScript基础用法,python开发,前端,javascript,开发语言,运维开发

2.2 对象方法

window对象方法	描述
alert()	显示带有一段消息和一个确认按钮的警告框
confirm()	显示带有一段消息以及确认按钮和取消按钮的对话框
setInterval()	按照指定的周期（以毫秒计）来调用函数或计算表达式
clearInterval()	取消由 setInterval() 设置的 timeout
setTimeout()	在指定的毫秒数后调用函数或计算表达式。（类似于休眠）
clearTimeout()	取消由 setTimeout() 方法设置的 timeout
typeof()	查看数据类型

1.点击一次，刷新一次当前系统时间。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>控制开关</title>
</head>
<body>
<button type="button" onclick="refresh()">点击查看当前时间</button>
<script type="text/javascript">
    function refresh() {
        date = new Date()
        alert("当前时间为："+date)
        console.log(date)
    }
</script>    
</body>
</html>

前端基础3——JavaScript基础用法,python开发,前端,javascript,开发语言,运维开发
2.点击开始，时间自动走。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>控制开关</title>
</head>
<body>

<div id="demo">
    <p>当前时间</p>
</div>
<button type="button" onclick="startRefresh()">开始</button>
<button type="button" onclick="stopRefresh()">停止</button>

<script type="text/javascript">
    function refresh() {
        x = document.getElementById('demo');
        y = x.getElementsByTagName("p");
        y[0].innerHTML = new Date() // 获取当前时间
    }

    // 点击开始，调用refresh()函数，1000毫秒进行周期性计数走动。
    function startRefresh() {
        interval = setInterval("refresh()", 1000);
    }
    // 停止
    function stopRefresh() {
        console.log(interval);
        clearInterval(interval)
    }
</script>
</body>
</html>

前端基础3——JavaScript基础用法,python开发,前端,javascript,开发语言,运维开发

三、数据类型

在JS中，数据类型有：字符串、数组、布尔、数组、对象、Null、Undefined。

3.1 字符串处理

1.字符串处理方法。

<script type="text/javascript">
    var s = "hello world";
    s.length; // 字符串长度
    s[4] //根据索引获取值
    s.replace('h','H'); //替换某个字符
    s.split("分隔符") //分隔为数组
    s.match("w") //找到返回匹配的字符，否则返回null
    console.log(s.match("w"));  //将内容打印在控制台。
    console.log(s.length);
    console.log(s);
    console.log(s.replace('o','M'));
    console.log(s.split("o"))
</script>

前端基础3——JavaScript基础用法,python开发,前端,javascript,开发语言,运维开发
2.字符拼接+。

3.2 数组处理

1.数组处理，相当于python中的列表，是一个序列的数据结构。

###############################################################
//定义数组。
var computer = new Array();     //定义空数组。
var computer = ["主机","显示器","键盘","鼠标"]    //定义有值的数组。
###############################################################
//向数组添加元素。
computer[0]="主机";     //通过索引下标获取数组中的有序元素。
computer[1]="显示器";
computer[2]="键盘";
computer.push("网线");   //追加元素。
###############################################################
console.log(computer[3]);   //根据下标获取元素并打印到控制台。

2.查看效果。
前端基础3——JavaScript基础用法,python开发,前端,javascript,开发语言,运维开发

3.3 对象处理

1.对象处理，相当于python中的字典，是一个具有映射关系的数据结构，用于存储有一定关系的元素。字典中的key不允许重复。

格式：d = {'key1':value1, 'key2':value2, 'key3':value3}
###############################################################
var user = {
	name:"卿君",
	sex: "男",
	age:"26"
};
console.log(user.name);   //根据key查看value值，方式一。
console.log(user['age']);   //根据key查看value值，方式二。
user.height = "180cm"      //增加一对key-value。
user['height'] = "182cm";    //根据key修改value值。
console.log(user.height);

2.查看效果。
前端基础3——JavaScript基础用法,python开发,前端,javascript,开发语言,运维开发

四、流程控制

4.1 操作符

操作符：一个特定的符号，用它与其他数据类型连接起来组成一个表达式。常用于条件判断，根据表达式返回True/False采取动作。

类型	操作符
比较操作符	== 等于 != 不等于 > 大于 < 小于 >= 大于等于 <= 小于等于
算术操作符	+ 加法 - 减法 * 乘法 / 除法 % 取余 ++ 自增，自动+1 – 自减，自动-1
逻辑操作符	&& 与 \|\| 或 !() 结果取反
赋值运算符	= 赋值 += 加法赋值 -= 减法赋值 *= 乘法赋值 /= 除法赋值 %= 取余赋值

4.2 if判断语句

if条件判断：判定给定的条件是否满足（True或False），根据判断的结果决定执行的语句。

//语法。
if (表达式) {
	<代码块>
} else if (表达式) {
	<代码块>
} else {
	<代码块>
}

1.控制开关。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>控制开关</title>
</head>
<body>
<img id="dengpao" src="img/off.png" alt=""><br>
<button type="button" onclick="main('on')">开灯</button>
<button type="button" onclick="main('off')">关灯</button>
<script type="text/javascript">
    function main(status) {
        x = document.getElementById('dengpao');
        console.log(x);
        if (status == 'on') {
            x.src = "img/on.png";
        } else if (status == 'off') {
            x.src = "img/off.png";
    }
}
</script>
</body>
</html>

2.查看效果。
前端基础3——JavaScript基础用法,python开发,前端,javascript,开发语言,运维开发

4.3 for循环语句

for循环：一般用于遍历数据类型的元素进行处理，例如字符串、数组、对象。

//语法。
for (<变量> in <序列>) {
	<代码块>
}

1.遍历数组，通过索引获取元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>控制开关</title>
</head>
<body>
<script type="text/javascript">
    var computer = ["主机","显示器","键盘","鼠标"];
    for(i in computer) {
        // console.log(i)   //获取元素索引。
        console.log(i,computer[i]) // 使用索引获取值
    }
</script>
</body>
</html>

前端基础3——JavaScript基础用法,python开发,前端,javascript,开发语言,运维开发
2.遍历数组，通过匿名函数返回元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>控制开关</title>
</head>
<body>
<script type="text/javascript">
    var computer = ["主机","显示器","键盘","鼠标"];
    computer.forEach(function(e) {
        console.log(e)
    })
</script>
</body>
</html>

前端基础3——JavaScript基础用法,python开发,前端,javascript,开发语言,运维开发
3.遍历对象。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>控制开关</title>
</head>
<body>
<script type="text/javascript">
    var user1 = {name:"卿君",sex:"男",age:"26"};   
    for(let a in user1) {                        //方式一。
        console.log(a+"："+user1[a])
    }
    var user2 = {name:"柏木",sex:"男",age:"28"};
    Object.keys(user2).forEach(function (k) {    //方式二，使用内置对象遍历。
        console.log(k + "——" + user2[k])
    })
</script>
</body>
</html>

前端基础3——JavaScript基础用法,python开发,前端,javascript,开发语言,运维开发

4.4 continue与break语句

continue 当满足条件时，跳出本次循环。

break 当满足条件时，跳出所有循环。

注意：只有在循环语句中才有效。

1.示例代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>控制开关</title>
</head>
<body>
<script type="text/javascript">
    var computer = ["主机","显示器","键盘","鼠标"];
    //不打印第三个元素
    for(i in computer) {
        if (i == "2") {
        continue
    } else {
        console.log(computer[i])
        }
    }
    //不打印第第二个以后的元素
    for(i in computer) {
        if (i == "2") {
        break
    } else {
        console.log(computer[i])
        }
    }
</script>
</body>
</html>

2.查看效果。
前端基础3——JavaScript基础用法,python开发,前端,javascript,开发语言,运维开发

4.5 函数定义与调用

函数：是指一段可以直接被另一段程序或代码引用的程序或代码。

在编写代码时，常将一些常用的功能模块编写成函数，放在函数库中供公共使用，可减少重复编写程序段和简化代码结构。

//语法：
function 函数名称(参数1, 参数2, ...) {
	<代码块>
return <表达式>
}

1.定义函数hello，在按钮中引用函数，点击按钮执行hello函数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>控制开关</title>
</head>
<body>
<button type="button" onclick="hello()">按钮</button>
<script type="text/javascript">
    function hello() {
        alert("hello world")
    }
</script>
</body>
</html>

前端基础3——JavaScript基础用法,python开发,前端,javascript,开发语言,运维开发
2.传参用法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>控制开关</title>
</head>
<body>
<button type="button" onclick="hello('卿君','26')">按钮</button>
<script type="text/javascript">
    function hello(name,age) {
        alert("你好,我是"+name+", 今年"+age+"岁。")
        console.log(hello)
    }
</script>
</body>
</html>

前端基础3——JavaScript基础用法,python开发,前端,javascript,开发语言,运维开发

五、选择器

查找元素方法：

通过id（常用）

通过类名

通过标签名

5.1 通过id获取元素

1.示例代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js测试</title>
</head>
<body>
<button type="button" id="qingjun">查看内容</button>
<script>
    var x = document.getElementById("qingjun"); //获取id为qingjun的元素
    x.onclick = function () {                  //绑定“查看内容”事件
        alert('好好学习')
    }
</script>
</body>
</html>

2.查看效果。
前端基础3——JavaScript基础用法,python开发,前端,javascript,开发语言,运维开发

5.2 通过标签名获取元素

1.示例代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js测试</title>
</head>
<body>
<div id="main">
    <p>Hello world！1</p>
    <p>Hello world！2</p>
    <p>Hello world！3</p>
</div>
<script type="text/javascript">
    var x = document.getElementById("main");  //document表示当前页面，获取id为main的元素，返回的是一个集合。
    var y = x.getElementsByTagName("p"); // 获取集合中的p标签，通过下标获取。
    document.write("div中的第二段文本是：" + y[1].innerHTML); //向当前文档写入内容
</script>
</body>
</html>

2.查看效果。
前端基础3——JavaScript基础用法,python开发,前端,javascript,开发语言,运维开发

六、JS操作HTML

6.1 插入内容

1.向id=bb的标签写入内容。

<p id="bb"></p>
<script type="text/javascript">
    var x = document.getElementById('bb');  //获取id为main的元素
    x.innerHTML="Hello"   //插入内容Hello。
</script>

2.查看结果。
前端基础3——JavaScript基础用法,python开发,前端,javascript,开发语言,运维开发

6.2 修改标签属性

1.修改显示图片，修改之前。

<img src="img/3.jpg" alt="" id="aa">

前端基础3——JavaScript基础用法,python开发,前端,javascript,开发语言,运维开发
2.修改之后。

<img src="img/3.jpg" alt="" id="aa">
<script type="text/javascript">
    var x = document.getElementById('aa');
    x.src="img/4.jpg"
</script>

前端基础3——JavaScript基础用法,python开发,前端,javascript,开发语言,运维开发

6.3 改变标签样式

1.修改id=bb标签的颜色。

<p id="bb"></p>
<script type="text/javascript">
    var x = document.getElementById('bb');
    x.innerHTML="Hello"   //先插入内容。
    x.style.color="blue"  //在修改字体颜色
</script>

2.查看结果。
前端基础3——JavaScript基础用法,python开发,前端,javascript,开发语言,运维开发

6.4 获取输入的值

比如提交一个数据框里的内容，点击提交按钮，可以获取到刚刚输入的值供其他功能使用。

1.获取输入框里的内容。

请输入您的姓名: <input type="text" id="cc"><br>
<button type="button" name="text" onclick="main1()">提交</button>  //店家提交按钮执行main1函数。

<script type="text/javascript">
    function main1() {
        var y =  document.getElementById("cc");
        alert(y.value)
    }
</script>

前端基础3——JavaScript基础用法,python开发,前端,javascript,开发语言,运维开发
2.修改其他标签的内容。

#############################################################
<p id="bb"></p>
请输入您的姓名: <input type="text" id="cc"><br>
<button type="button" name="text" onclick="main1()">提交</button>
#############################################################
<script type="text/javascript">
    var x = document.getElementById('bb');    //获取id=bb标签的元素。
    x.innerHTML="Hello"    //向元素插入HTML内容
    function main1() {
        var y =  document.getElementById("cc");
        var s = document.getElementById("bb");
        s.innerHTML = y.value   //设置s元素的内容是id=c的input值

    }

前端基础3——JavaScript基础用法,python开发,前端,javascript,开发语言,运维开发

6.5 添加标签元素

1.向div中添加一个p标签，并追加标签内容。

<div id="main">
    <p>张三，Java开发</p>
    <p>李四，大数据工程师</p>
    <p>王五，k8s运维</p>
</div>

<script type="text/javascript">
    var x = document.getElementById("main"); //获取id为main的元素
    var y = x.getElementsByTagName("p"); // 返回的是一个集合，下标获取
    var p = document.createElement("p"); //创建p标签
    var t = document.createTextNode("卿君，渗透测试"); //创建添加的文本
    p.appendChild(t); //向创建的p标签追加文本
    var e = document.getElementById("main"); //获取添加的标签父元素
    e.appendChild(p) //向父元素添加新创建的p标签
</script>

2.查看效果。
前端基础3——JavaScript基础用法,python开发,前端,javascript,开发语言,运维开发

6.6 删除元素

1.删除id=main标签的元素。

<div id="main">
    <p>张三，Java开发</p>
    <p>李四，大数据工程师</p>
    <p>王五，k8s运维</p>
</div>

<script type="text/javascript">
    var x = document.getElementById("main"); //获取id为main的元素
    var y = x.getElementsByTagName("p"); // 返回的是一个集合，下标获取
    var p = document.createElement("p"); //创建p标签
    var t = document.createTextNode("卿君，渗透测试"); //创建添加的文本
    p.appendChild(t); //向创建的p标签追加文本
    var e = document.getElementById("main"); //获取添加的标签父元素
    e.remove()   //删除id=main标签的所有元素。
</script>

2.查看效果。
前端基础3——JavaScript基础用法,python开发,前端,javascript,开发语言,运维开发文章来源地址https://www.toymoban.com/news/detail-690390.html