Java开发工程师应该掌握的JS语法
Posted @阿证1024
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Java开发工程师应该掌握的JS语法相关的知识，希望对你有一定的参考价值。
1. 方法/函数
js中函数的语法：
// 函数的命名规则是小驼峰，首字母小写，碰到新的单词首字母大写
function 函数名(参数1, 参数2, 参数3.....)
函数体;
函数的几种形式：
- 无参无返回值
function warn()
alert("无参无返回值")
- 无参有返回值
function getRes()
return "无参有返回值"; // 使用return关键字返回需要返回的内容, 这里返回一个字符串
- 有参无返回值
function getRes(a, b)
alert("a + b = " + (a + b))
- 有参有返回值
function getRes(a, b)
return a + b
注意：在传参的过程中我们可能会传入多于或少于参数列表的参数
// 传入参数少于参数列表
<script>
function add(a, b)
alert(a) // 此时a的值为1
alert(b) // 此时b为undefined
add(1)
</script>
// 传入参数多于参数列表, js中程序并不会报错
<script>
function add(a, b)
alert(a) // 此时a的值为1
alert(b) // 此时b的值为2
add(1, 2, 3)
</script>
js中的内置函数：
- alert() 无返回值
- prompt() 有返回值，返回输入框中输入的内容
- document.write() 无返回值
- console.log() 无返回值
- Number() parseInt() parseFloat() 有返回值，返回转换后的结果
- confirm() 有返回值，返回true/false，点击确定按钮返回true，点击取消按钮返回false
2. 面向对象
在js中对象的类型是object，在声明对象的时候可以直接创建对象。
- 对象的创建方法1：
<script>
// 使用new创建一个对象
var person = new Object();
// 对象的属性
person.name = "张三";
person.age = 20;
// 对象的方法
person.eat = function () // 对象的方法对应一个匿名函数, 其实这个函数的函数名就是eat
alert("今天我吃饭了")
// 查看对象的属性值
console.log(person.name)
console.log(person.age)
// 调用对象的方法
person.eat()
</script>
- 对象的创建方法2：
<script>
// 直接初始化一个对象
var person = "name": "张三", "age": 20, "eat": function () alert("今天我吃饭了")
// 查看对象的属性
console.log(person.name)
// 调用对象的方法
person.eat()
</script>
3. 数组
数组就是将一组数据同时存放在一个容器中，此容器称为数组，类似于超市的储物柜一样。
语法：
// 第一种创建数组的方式
var arr1 = new Array();
// var arr1 = new Array(1, 2, 3, 4, "hello"); 创建一个数组并添加元素
// var arr1 = new Array(2); 此时的2不再是数组中的元素，当只有一个数字时，代表此时创建的数组的长度。如果是字符串，则还是作为数组中的元素。
// 第二种创建数组的方式
var arr2 = [1, 2, 3, "hello", 2.123];
数组的属性及方法：
<script>
var arr1 = [1, 2, 3, 4, "hello", 2.333];
console.log(arr1.length) // 打印数组的长度
console.log(arr1[1]) // 通过下标访问数组中的元素, 下标从0开始
// 遍历数组
for(var i = 0; i < arr1.length; i++)
console.log(arr1[i])
arr1.push(100); // 往数组中追加一个元素, 返回添加元素后数组的长度
console.log(arr1.toString()) // 将数组转为字符串
console.log(arr1.join("-")) // 使用'-'符号将数组中的元素连接成字符串
console.log(arr1.reverse()) // 将数组中的元素反转
</script>
4. 字符串string的常用方法
<script>
var str = "Hello,World,你好,世界";
console.log(str.length) // 字符串的长度, 字符的个数
console.log(str.indexOf("el")) // 返回特定的字符串的位置, 下标从0开始, 如果找不到返回-1
console.log(str.split(",")) // 将字符串以特定的字符串分割成数组
console.log(str.substr(4)) // 从指定的下标位置开始, 获取到最后
console.log(str.substrint(1, 4)) // 获取从指定索引位置开始到指定的索引位置结束
console.log(str.toUpperCase()) // 全部转为大写
console.log(str.toLowerCase()) // 全部转为小写
console.log(str.replaceAll("lo", "x")) // 全部替换成另一个字符串
</script>
5. DOM对象
- （1）document.getElementById(“id”) 通过id获取指定标签
- （2）document.getElementsByClassName(“c1”) 通过类名查找标签，返回结果是一个标签集合
Demo1：通过id查找标签
<!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>
<div id="d1" class="c1">
hello this is MengMa
<span>Hello World!</span>
</div>
</body>
<script text="text/javascript">
// 通过id获取标签
var d = document.getElementById("d1");
console.log([d]);
console.log(d.className); // 获取类名
console.log(d.innerHTML); // 获取指定标签里面的所有内容, 包括标签
console.log(d.innerText); // 只获取指定标签中的文本内容
d.className = "cls";
d.innerHTML = "<h1>Hello World</h1>";
d.innerText = "蒙码科技";
d.style.background = "red";
// d.hidden = true;
d.style.display = "none";
</script>
</html>
注意： document.getElementById(id) 可以直接换成 id
document.getElementById("d1").innerHTML 等价于 d1.innerHTML
练习1：屏幕变色
<!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>
<style>
body
background: red;
</style>
<script>
// 屏幕变色
var colorArr = ["green", "red", "blue", "yellow", "black"];
var num = 0;
function changeColor()
var bd = document.getElementById("bd");
bd.style.background = colorArr[num++];
if(num > colorArr.length - 1)
num = 0;
// 待窗口加载完成后开始执行函数体
window.onload = function()
setInterval(function() changeColor() , 500);
</script>
</head>
<body id="bd">
</body>
</html>
Demo2：通过类名查找标签
<!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>
<script type="text/javascript">
//找到所有的类名相同的标签
var divs = document.getElementsByClassName("d1");
console.log(divs);
divs[1].style.background = "red";
</script>
</head>
<body>
<body>
<div class="d1">11111111</div>
<div class="d1">22222</div>
<div class="d1">333333</div>
</body>
</body>
</html>
以上是关于Java开发工程师应该掌握的JS语法的主要内容，如果未能解决你的问题，请参考以下文章