JavaScript

最新推荐文章于 2022-05-30 14:42:33 发布

「已注销」

最新推荐文章于 2022-05-30 14:42:33 发布

阅读量2.9k

点赞数 3

分类专栏： JavaScript 文章标签： JavaScript

本文链接：https://blog.csdn.net/wu_wxc/article/details/50933373

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

转载请标明出处：http://blog.csdn.net/wu_wxc/article/details/50933373
本文出自【吴孝城的CSDN博客】

现在基本上所有浏览器都支持javascript

它是一种轻量级的编程语言，可以给网页添加各种动态效果，使网页更加美观

可放在<head></head>和body></body>，一般放在<head></head>中

放在<head></head>中浏览器解析head时就会执行

放在<body></body>中页面读取到该语句时就会执行

javascript是一种区分大小写的编程语言

javascript的注释有

//单选注释
/*多选注释*/

使用javascript我们可以使用<script></script>在Html页面中插入javascript代码

<script type="text/javascript">这里是javascript内容</script>

type="text/javascript"是告诉浏览器，<script>中的文本内容(text)是javascript语言
也可以使用外部文件来引用，当用外部文件写js时，js文件不需要添加script标签

<script src="myjs.js"></script>

javascript中每个语句用";"分隔开，";"可以不写，建议写上

变量：

声明变量用关键字：var

如：

var myVar;
var myVar="javascript";
var myNum=6;
var myChar="name", age="20";
var arr=[1, 2, 3, 4];
var arr=["wu", "xiao", "cheng"];
var arr=new Array("wu", "xiao", "cheng");

var arr=new Array();
arr[0]=20;
arr[1]="Hello World"'

当声明一个变量，但没有赋值时，其值为“undefined”

如：

var str;

当然，变量可以不声明，直接使用，但这样做并不规范，建议声明后再使用

变量名的命名：

必须以字母、下划线(_)或美元符($)开始，可以使用多个字母、数字、下划线(_)或美元符($)

但不能使用javascript关键词和javascript保留字

当声明多个变量时，用","隔开

局部变量和成员变量

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
	<script>
		var n=1;	//全局变量，任何地方都可用
		m=2;		//全局变量，任何地方都可用
		function fun(){
			var x = 1;		//局部变量，当前函数可用
			y = 2;			//全局变量，任何地方都可用，但要调用本函数才会成为全局变量
		}
		fun();
		alert(x)
	</script>
	</body>
</html>

函数：

javascript中定义函数的方法：

function 函数名(){
	函数代码;
}

function是定义函数的关键字

函数名为给该函数起的名字

()括号里可以传递参数，也可以不传递参数，参数可以传递任意多个，当有多个参数时，用","分隔开

函数代码是要完成特定功能的代码

函数的调用：

函数定义好后要调用才会执行

调用方法：<script>标签内调用，Html文件内调用

在<script>中调用

<script>
	function demo(){
		代码内容;
	}
	demo();		//调用函数
</script>

在html中调用

<script>
	function demo(){
		代码内容;
	}
</script>
//这里使用按钮来调用函数
<input type="button" οnclick="demo()" value="按钮">

输出：

可以使用document.write()向Html直接输出内容，输出多项内容用"+"连接

如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript">
			var mystr="world"
			document.write("Hello"+"<br/>"+mystr);
		</script>
	</head>
	<body>
	</body>
</html>

确定：

function con(){
	var showMessage=confirm("点击确定还是取消？");
	if(showMessage==true){
		document.write("你点击了确定");
	}else{
		document.write("你点击了取消");
	}
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript">
			function con(){
				var showMessage=confirm("点击确定还是取消？");
				if(showMessage==true){
					document.write("你点击了确定");
				}else{
					document.write("你点击了取消");
				}
			}
		</script>
	</head>
	<body>
	<input type="button" onClick="con()" value="按钮" />
	</body>
</html>

点击按钮后会在页面打印出相应的内容

提问：

带文本输入框的消息对话框

prompt(str1,str2);

str1为提示的内容，不可修改

str2为输入框中提示的内容，可修改

function pro(){
	var showMessage=prompt("显示内容","输入内容");
	if(showMessage>100){
		document.write("你输入的内容大于100");
	}else{
		document.write("你输入的内容小于100");
	}
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript">
			function pro(){
				var showMessage=prompt("显示内容","输入内容");
				if(showMessage>100){
					document.write("你输入的内容大于100");
				}else{
					document.write("你输入的内容小于100");
				}
			}
		</script>
	</head>
	<body>
	<input type="button" onClick="pro()" value="按钮" />
	</body>
</html>

警告：
alert(字符串或变量);

如

alert("Hello World");

异常处理：

如下，

<script>
	function demo(){
		alert(message)
	}
	demo();
</script>

message是没有声明的，所以运行该函数时会有错误，但没胡任何提示，这时可以用try catch来捕获异常

function demo(){
	try{
		//执行的语句
		alert(message);
	}catch(err){
		//对错误的处理，弹出提示
		alert(err)
	}
}
demo();

也可以用throw来捕获异常，它可以用来自定义一个错误，可以与try，catch一起使用

throw的使用

throw "输出的内容";

Javascript-DOM

DOM是文档对象模型(Document Object Model)

当页面加载时，用来访问和处理Html文档的标准方法，DOM以树结构呈现html文档中的元素属性等

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 Html

JavaScript 能够改变页面中的所有 HTML 元素

JavaScript 能够改变页面中的所有 HTML 属性

JavaScript 能够改变页面中的所有 CSS 样式

JavaScript 能够对页面中的所有事件做出反应

DOM操作Html

document.write();

要注意的是不要在加载完文档后用例document.write();，这样会覆盖掉该文档

寻找元素：
通过ID找到Html元素

<p id="pid">原来内容</p>
<script>
	function demo(){
		var n=document.getElementById("pid").innerHTML="新内容";
	}
</script>
<button οnclick="demo()">按钮</button>

通过标签名找到Html元素，当有多个同样的标签名时，只会执行第一个

<script>
	function demo(){
			document.getElementsByTagName("button");
			alert("通过标签名找到")
	}
</script>
<button οnclick="demo()">按钮</button>

attribute，用来获得标签的属性值

<a id="aid" href="http://www.google.com">谷歌</a>
<button οnclick="demo()">下次点击"谷歌时将跳转到www.wuxiaocheng.cn"</button>
<script>
	function demo(){
		document.getElementById("aid").href="http://www.wuxiaocheng.cn";
	}
</script>

DOM操作CSS：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style >
			.c{
				background: red;
			}
		</style>
	</head>
	<body>
	<div id="divid" class="c">Html</div>
	<button οnclick="demo()">按钮</button>
		<script>
			function demo(){
				/* 通过ID用javascript修改CSS样式*/
				document.getElementById("divid").style.background="blue";
			}
		</script>
	</body>
</html>

「已注销」

关注

3
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
JavaScript

现在基本上所有浏览器都支持javascript它是一种轻量级的编程语言，可以给网页添加各种动态效果，使网页更加美观可放在和body>和，一般放在中放在中浏览器解析head时应付执行放在中页面读取到该语句时应付执行javascript是一种区分大小写的编程语言javascript的注释有//单选注释/*多选注释*/使用javascript我们可以使用在Html页面中
复制链接

扫一扫