HTML--JavaScript--流程控制，函数，对象

这好像没什么特别的，记录一下常见的流程结构体：

if 条件判断：

javascript 复制代码

if (条件)
{
	...;
}
else if (条件)
{
	...;
}
else
{
	...;
}

switch 选择结构：

选择分支，满足那个case就执行那个case，如果都不满足，就使用default下的语句块。

每个case后面都有break，以免重复执行

javascript 复制代码

switch (判断值)
{
	case 取值1：
		....;
		break;
	case 取值2：
		...;
		break;
	...
	case 取值n:
		...;
		break;
	default:
		...;
}

while 循环结构：

javascript 复制代码

while (条件)
{
	//当条件为true时，循环执行
}

do while 循环结构：

javascript 复制代码

do
{
	...
} while (条件)
// 作用：首先执行一遍结构体，再判断条件是否为真，为真则继续循环，为假则停止循环

for 循环结构：

javascript 复制代码

for (初始化表达式; 条件表达式 ; 循环后操作)
{
	....
}

for (var x=0;x<10;x++)
{
	...
}

函数：

javascript 复制代码

function 函数名(参数1，...,参数n)
{
	函数结构体
}

// 调用函数
函数名 (参数...);

// 带返回值的函数
function 函数名(参数1，...,参数n)
{
	函数结构体;
	return 值;
}

// 调用含返回值的函数
var 变量 = 函数名 (参数...);

//在HTML的超链接中调用函数
<a herf="javascript:函数名(参数)">链接名</a>

范例：下面的代码函数定义了一个参数x,默认值是1

我们在HTML 超链接中调用的时候，如果传入新的x的值，就会返回新的值

不传入x的话，就用默认的值1

html 复制代码

<!DOCTYPE html>
<html>
<head> 
    <meta charset="utf-8"/>
    <title></title>
    <script>
        function mycase(x=1)
        {
            return x;
        }
    </script>
</head>
<body>
    <a href="javascript:mycase(x='我爱你')">你好呀！</a><br/>
    <a href="javascript:mycase()">hello</a>
</body>
</html>

在事件中调用,如下例子，生成一个叫做你好的按钮，点击按钮显示文字在页面上：

html 复制代码

<!DOCTYPE html>
<html>
<head> 
    <meta charset="utf-8"/>
    <title></title>
    <script>
        function mycase(x=1)
        {
            document.write(x)
        }
    </script>
</head>
<body>
    <input type="button" onclick="mycase('我爱你')" value="你好"/>
</body>
</html>

操作字符串对象：

javascript 复制代码

// 定义字符串
var mystr = "Ward Liu"
// 获取字符串长度：(空格也会被当成一个字符)
mystr.length
// 字符串转换为小写:
mystr.toLowerCase()
// 字符串转换为大写：
mystr.toUpperCase()
// 获取字符串指定位置字符,就是把字符串认为是一个单字符的列表，然后索引从左到右从0开始，按索引抓取指定位置的字符
mystr.charAt(x)
// 截取字符串,抓取开始位置到结束位置-1的值
// 比如 mystr.substring(0,2) 在这里结果就是 "Wa"
mystr.substring(start,end)
// 替换字符串中第一个出现的指定字符或字符串到目标字符/串 
mystr.replace("原字符/串" "目标字符/串")
// 搭配正则表达式进行字符或字符串替换（会替换所有匹配的字符或字符串）
mystr.replace(/字符/g,"目标字符/串")
// 字符串分割，按指定字符分割，分割完以后会生成一个列表，按索引取值（与python一样的用法）
mystr.split("指定字符")
// 技巧:分割每一个字符
mystr.split("")
// 检索指定字符串位置，它会返回按单字符排序，第一次出现的位置
// 比如 mystr.indexOf("Liu") 这里返回的 5，因为 Liu 里的L最开始出现在字符串索引为5的位置
mystr.indexOf("字符/串")
// 最后一次出现的位置
mystr.lastIndexOf("字符/串")
// Ps: 如果没有匹配到，返回的值为  -1

数组对象

javascript 复制代码

// 定义数组，数组基本上用法也和python一样
// 方式1
var 数组名 = new Array(元素1,元素2,...,元素n)
// 方式2
var 数组名 = [元素1，...，元素n]
// 获取数组长度
数组名.length()
// 数组截取切片   范围 [start,end)  从start开始，不含end
数组名.slice(start,end)
// 在数组头部添加新元素
数组名.unshift(新元素1,...,新元素n)
// 在数组尾部添加新元素
数组名.push(新元素1，...，新元素n)
// 删除数组中的第一个元素
数组名.shift()
// 删除数组最后一个元素
数组名.pop()
// 数组排序,默认从小到大
数组名.sort()
// 颠倒数组顺序
数组名.reverse()
// 将元素连成字符串
数组名.join("连接符")

时间对象

javascript 复制代码

// 获取日期
var x = new Date()；
// 结果： Tue Jan 16 2024 23:07:22 GMT+0800 (中国标准时间) 
// 进一步处理
// 获取年份，取值为四位数字
x.getFullYear()
// 获取月份 （0-11分别对应一月到十二月）
x.getMonth()
// 获取日 ， 1-31
x.getDate()
// 获取周几 0-6  ,0是周天，1-6是周一到周六
x.getDays()
// 小时，分钟，秒
x.getHours()
x.getMinutes()
x.getSeconds()
// 设定年月日
x.setFullYear(年，月，日)
// 设定月日
x.setMonth(月，日）
// 设定日
x.setDate(日)
// 设定 时分秒毫秒
x.setHours(hour,min,sec,millisec)
// 设定分，秒，毫秒
x.setMinutes(分，秒，毫秒)
// 设定秒，毫秒(毫秒取值 0-999)
x.setSeconds(秒，毫秒）

数学对象 Math

javascript 复制代码

// 圆周率 π  3.141592653589793
Math.PI
// 取一串数字最大最小值(不能接数组)
Math.max(1,5,3,8)
Math.min(1,5,3,8)
//	向下取整,x为数字
Math.floor(x)
// 向上取整
Math.ceil(x)
// 生成随机数(这个随机数是一个 大于0小于1的小数)
Math.random()