Javascript 函数笔记/练习

gjl_

已于 2023-10-19 11:48:49 修改

阅读量181

点赞数

文章标签： javascript 笔记开发语言

于 2023-10-19 11:25:27 首次发布

本文链接：https://blog.csdn.net/weixin_51559599/article/details/133922907

版权

函数

function

又称方法 (method)

自定义函数

是一段预定义好的并且可以反复使用的代码块

定义

<script>
	function print_name(){
		document.write("name")
	}
</script>

函数调用

直接调用

单独开辟一块内存空间，私有，其中定义的变量等外部无法访问

<script>
	function print_name(){
		document.write("name");
	}
	print_name()
</script>

点击事件(button)调用

<body>
    <input type="button" onclick="print_name()" value="按钮1">
    <!-- 或 -->
    <input type="button" onclick="print_name();" value="按钮1">
    <!-- 或 -->
    <input type="button" onclick="return print_name();" value="按钮2">
</body>
<script>
	function print_name(){
		console.log("张三");
	}
</script>

定义参数与返回值

<script>
	function add(参数){
	    return 返回值;
	}
</script>

如

<script>
	function add(x,y){
	    var sum=x+y;
	    return sum;
		// 返回值
	}
	console.log(add(3,5));
    //输出函数的返回值 8
</script>

变量的作用域

函数作用域

function{} 花括号内定义

只能在当前函数内访问
全局作用域

function{} 外定义

一经定义，在代码的任何部分都可以访问 (包括函数内)
```
<script>
	n = 5;
	function test(){
		document.write(n);
	}
	test()
</script>
```
当某函数内定义了已经存在的全局变量时，在该函数内再次定义此变量，函数内定义变量语句后的代码块以函数内定义的变量为准
```
<script>
	n = 5;
	function test(){
		document.write(n+"<br />");
		n = 8;
		document.write(n);
	}
	test()
</script>
```

常用内置函数

屏幕输出

document.write() 在页面输出相关字符串，也可以输出 html标签，可以直接渲染
```
<script>
    document.write("<p style='color: blue;'>asdda</p>")
</script>
```

控制台输出

console.log() 可以在控制台输出相关内容

控制台输出

<script>
	console.log("输出一条日志");
	console.info("输出一条信息");
	console.warn("输出一条警告");
	console.error("输出一条错误");
</script>

弹窗

alert() 弹窗函数

<script>
    alert("这是一个弹框");
</script>

确认框弹窗

confirm() 确认框

返回 true 或 false

<script>
    var test=confirm("油饼食不食");
    console.log(test);
</script>

点击取消返回 false

输入框弹窗

prompt() 弹出输入框

<script>
    var test=prompt("请输入密码")
    console.log(test);
</script>

代码执行

代码执行函数

eval()

将括号中的字符串当作JavaScript代码执行(须符合JavaScript语法)

<script>
    var s = "document.write('输出字符串')";
    document.write(s);
    console.log(typeof(s));
    //此时s为字符串类型
	document.write('<br/>')
    eval(s);
    //将变量 s 中的字符串当作JavaScript代码执行(须符合JavaScript语法)
</script>

字符串截取函数

substr(x,y)

x 代表字母偏移量(第一个字符从0开始)
y 代表取几个字母

<script>
    var s = "doxument.write('123456')"
    var test = s.substr(1,3);
    console.log(test);
    //输出 oxu
</script>

substring(x,y)

x代表起始偏移量

y代表结束偏移量

结果不包括结束的字符(左闭右开)

<script>
    var s = "doxument.write('123456')"
    var test = s.substring(1,3);
    console.log(test);
    // 输出ox
    // 截取范围 [1,3)
</script>

计算和练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>输出1-10间的偶数</title>
	</head>
	<body>
		x:
		<input type="text" id="x">
		<br>
		y:
		<input type="text" id="y">
		<br>
		<input type="button" onclick="add()" value="计算和">
		<script>
			function add(x,y){
				x=document.getElementById("x");
				y=document.getElementById("y");
				sum=Number(x.value)+Number(y.value);
				document.write(sum);
			}
		</script>
	</body>
</html>