javascript基础-1-优快云博客

本文链接：https://blog.youkuaiyun.com/zqm_1994/article/details/131802791

一、什么是javascript

JavaScript 是一个面向对象的脚本语言，目前互联网上较流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

二、javascript作用

1.直接写入html输出流，使用document.write();

<script>
   document.write("<h1>这是一个标题</h1>");
   document.write("<p>这是一个段落。</p>");
</script>

2.对事件的反应

<input type="button" value="测试事件反应" onclick="alert('事件反应！');"/>

3.改变html内容

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>test</title> 
</head>
<body>
<h1>我的第一段 JavaScript</h1>
<p id="demo">JavaScript 能改变 HTML 元素的内容。</p>
<script>
function myFunction(){
	x=document.getElementById("demo");  // 找到元素
	x.innerHTML="Hello JavaScript!";    // 改变内容
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>
</body>
</html>

4.改变html图像

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>wangxing</title> 
</head>
<body>
<script>
function changeImage(){
	element=document.getElementById('myimage')
	if (element.src.match("bulbon")){
		element.src="/images/pic_bulboff.gif";
	}
	else{
		element.src="/images/pic_bulbon.gif";
	}
}
</script>
<img id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180">
<p>点击灯泡就可以打开或关闭这盏灯</p>
</body>
</html>

5.改变html样式

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>wangxing</title> 
</head>
<body>
<h1>我的第一段 JavaScript</h1>
<p id="demo">JavaScript 能改变 HTML 元素的样式。</p>
<script>
function myFunction(){
	x=document.getElementById("demo") // 找到元素
	x.style.color="#ff0000";          // 改变样式
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>
</body>
</html>

6.验证输入

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>wangxing</title> 
</head>
<body>
<h1>我的第一段 JavaScript</h1>
<p>请输入数字。如果输入值不是数字，浏览器会弹出提示框。</p>
<input id="demo" type="text">
<script>
function myFunction(){
	var x=document.getElementById("demo").value;
	if(isNaN(x)||x.replace(/(^\s*)|(\s*$)/g,"")==""){
		alert("不是数字");
	}
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>	
</body>
</html>

三、javascript输出显示设置

1.document.write()；方法将内容写到 HTML 文档中

2.window.alert()；弹出警告框

3.使用 innerHTML 写入到 HTML 元素。

4.使用 console.log() 写入到浏览器的控制台。

四、变量

a.声明（创建） JavaScript 变量

在 JavaScript 中创建变量通常称为"声明"变量。我们使用 var 关键词来声明变量。变量声明之后，该变量是空的（它没有值）。也可以在声明变量时对其赋值。

如需向变量赋值，请使用等号。

b.一条语句，多个变量

我们也可以在一条语句中声明很多变量。该语句以 var 开头，并使用逗号分隔变量即可。

var lastname="Doe", age=30, job="carpenter";