JavaScript教程及简介

最新推荐文章于 2024-07-11 21:45:00 发布

林钟二五

最新推荐文章于 2024-07-11 21:45:00 发布

阅读量182

点赞数

分类专栏： JavaWeb

本文链接：https://blog.csdn.net/weixin_44561640/article/details/97555196

版权

JavaWeb 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

一、案例初步了解

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>教程</title>
		<script>
			function displayDate(){
				document.getElementById("demo").innerHTML=Date();
			}
		</script>
	</head>
	<body>
		<h1>我的第一个JavaScript程序</h1>
		<p id="demo">这是一个段落</p>
		<button type="button" onclick="displayDate()">显示日期</button>	
	</body>
</html>

点击“显示日期”按钮就会出现当前日期

二、为什么学JavaScript?

JavaScript web是开发人员必须学习的3门语言中的一门：

1.HTML定义了网页的内容

2.CSS描述了网页的布局

3.JavaScript 控制网页的行为，所有现代的HTML页面都使用JavaScript

三、JavaScript简介

JavaScript是互联网上最流行的脚本语言，这门语言可用于HTML和web,更可广泛用于服务器、pc、笔记本电脑、平板电脑和智能手机等设备。

四、JavaScript是脚本语言

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

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

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

主要内容

1.JavaScript：直接写入HTML输出流

<body>
	<p>
		JavaScript能够直接写入html输出流中:
	</p>
		<script>
				document.write("<h1>这是一个标题</h1>");
				document.write("<p>这是一个段落。</p>");
		</script>
	<p>
您只能在 HTML 输出流中使用 <strong>document.write</strong>。
如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。
    </p>
	</body>

2.JavaScript：对事件的反应

<body>
	
	<h1>我的第一个 JavaScript</h1>
		<p>
			JavaScript 能够对事件作出反应。比如对按钮的点击：
		</p>
		<button type="button" onclick="alert('欢迎!')">点我!</button>
	
	</body>

3.JavaScript：改变 HTML 内容

	<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>

document.getElementById("some id")。这个方法是 HTML DOM 中定义的。

DOM (Document Object Model)（文档对象模型）是用于访问 HTML 元素的正式 W3C 标准。

4.JavaScript：改变 HTML 图像

<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>

三目运算符实现：

<script>
function changeImage(){
	var s = document.getElementById('myimage');
	s.src = s.src.match('bulboff')?"/images/pic_bulbon.gif":"/images/pic_bulboff.gif";
}
</script>
<img id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180">
<p>点击灯泡就可以打开或关闭这盏灯</p>

相当于按一下图片发生触发事件，会从一个图片切换成另一个图片

5.JavaScript：改变 HTML 样式

<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>

6.JavaScript：验证输入

<body>
	
	<h1>我的第一段 JavaScript</h1>
	<p>请输入数字。如果输入值不是数字，浏览器会弹出提示框。</p>
	<input id="demo" type="text">
<script>
		function myFunction()
		{
			var x=document.getElementById("demo").value;
		if(x==""||isNaN(x))
		{
			alert("不是数字");
		}
		}
</script>
	<button type="button" onclick="myFunction()">点击这里</button>
	
</body>

以上只是普通的验证，如果要在生产环境中使用，需要严格判断，如果输入的空格，或者连续空格 isNaN 是判别不出来的。可以添加正则来判断

<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>

林钟二五

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript教程及简介

一、案例初步了解<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>教程</title> <script> function displayDate(){ document.getElementById("demo...
复制链接

扫一扫