javaScript基础案例

最新推荐文章于 2023-11-01 11:22:19 发布

最蓝的海

最新推荐文章于 2023-11-01 11:22:19 发布

阅读量750

点赞数 4

分类专栏： javaScript 文章标签： javascript js function w3c

本文链接：https://blog.csdn.net/u011740475/article/details/38444935

版权

javaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

JavaScript 是一种轻量级的编程语言。

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

javascript可以向HTML中输入内容

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script>
document.write("使用javascript向HTML中写入文本信息！");
</script>
<title>向HTML写入</title>
</head>

<body>
</body>
</html>

同时可以使用javascript响应某些事件

<pre name="code" class="html" style="line-height: 18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<input type = "button" οnclick="alert('弹窗测试！')" value = "按钮"></input>
</body>
</html>

javaScript还可以修改HTML中的文本和文本样式

<pre name="code" class="html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
	function changeText(){
		x = document.getElementById("demo");
		x.innerHTML = "修改内容";
	}
	function change2(){
		y = document.getElementsByTagName("p");
		y.item(0).innerHTML = "第一个p标签";
		y.item(1).innerHTML = "第二个p标签";
	}
	function changecss(){
		z = document.getElementById("demo");
		z.style.color = "#000000";
	}
</script>
<style type="text/css">
#demo{color:#900};
</style>
<title>修改HTML内容</title>
</head>
<body>
<p id="demo">测试能否修改HTML内容</p>
<p>测试p标签</p>
<input type="button" value="按钮1" οnclick="changeText()" />
<input type="button" value="按钮2" οnclick="change2()" />
<input type="button" value="按钮3" οnclick="changecss()" />
</body>
</html>

如需从 JavaScript 访问某个 HTML 元素，您可以使用 document.getElementById(id) 方法。

相应的HTML标签需要使用id属性标识。

如果向HTML中写入的文本较长，可以使用反斜杠对文本进行换行。

例如：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>测试文档</title>
<script type="text/javascript">
	document.write("Hello \
		world");
</script>
</head>
<body>

</body>
</html>

JavaScript对大小写敏感，即y和Y是不同的变量。在书写JavaScript代码时一定要注意这一点。

JavaScript变量声明统一使用var进行声明。

例如：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>测试文档</title>
</head>
<body>
<p id="demo"></p>
<script type="text/javascript">
var text = "声明字符串变量！";
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>

变量申明也可以多条同时声明，变量之间用“，”隔开

var name="Gates",
age=56,
job="CEO";

JavaScript支持多种数据类型，包括：字符串、数字、数组、布尔型、NULL和Undifined

JavaScript只支持一种数字类型，可以是整数，也可以是小数。

JavaScript支持函数的定义，函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

函数就是包围在花括号之间的代码块，前面使用function关键字定义。

function functionname()
{
这里是要执行的代码
}

函数定义时同时可以传递参数，多个参数之间使用“，”分隔。

function myFunction(var1,var2)
{
这里是要执行的代码
}

函数调用时，直接调用函数名即可。

例如：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>测试文档</title>
<script type="text/javascript">
	function test(name,age){
		alert("姓名："+name+"   年龄:"+age);
	}
</script>
</head>
<body>
<input type="button" value="弹窗测试" onclick = "test('小明',12)"/>
</body>
</html>

对于带返回值的函数，我们可以通过return关键字返回指定的值

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>测试文档</title>
<script type="text/javascript">
	function test(){
		var a = 5;
		return a;
	}
	var myvar = test();
	document.write(myvar);
</script>
</head>
<body>
</body>
</html>

JavaScript支持多种运算符，假定y=5

运算符	描述	例子	结果
+	加	x=y+2	x=7
-	减	x=y-2	x=3
*	乘	x=y*2	x=10
/	除	x=y/2	x=2.5
%	求余数 (保留整数)	x=y%2	x=1
++	累加	x=++y	x=6
--	递减	x=--y	x=4

再看赋值运算符，x = 10,y=5

运算符	例子	等价于	结果
=	x=y		x=5
+=	x+=y	x=x+y	x=15
-=	x-=y	x=x-y	x=5
*=	x*=y	x=x*y	x=50
/=	x/=y	x=x/y	x=2
%=	x%=y	x=x%y	x=0

比较运算符，给定x=5

运算符	描述	例子
==	等于	x==8 为 false
===	全等（值和类型）	x===5 为 true；x==="5" 为 false
!=	不等于	x!=8 为 true
>	大于	x>8 为 false
<	小于	x<8 为 true
>=	大于或等于	x>=8 为 false
<=	小于或等于	x<=8 为 true