JavaScript——简介

最新推荐文章于 2022-04-24 22:52:33 发布

云祁

最新推荐文章于 2022-04-24 22:52:33 发布

阅读量1.1k

点赞数

文章标签： JavaScript

本文链接：https://blog.csdn.net/BeiisBei/article/details/102459174

版权

---- JavaScript 专栏收录该内容

14 篇文章 2 订阅

订阅专栏

文章目录

什么是JavaScript

JavaScript是一种基于对象和事件驱动的、并具有安全性能的脚本语言

JavaScript特点

向HTML页面中添加交互行为
脚本语言，语法和Java类似
解释性语言，边执行边解释

JavaScript组成

在这里插入图片描述

JavaScript的基本结构

<script type="text/javascript">
    <!—
          JavaScript 语句;
    —>
</script >

JavaScript的执行原理

在这里插入图片描述

网页中引用JavaScript的方式

使用 <script>标签
外部JS文件

<script src="export.js"  type="text/javascript"></script>

直接在HTML标签中

<input name="btn" type="button" value="弹出消息框"   
   onclick="javascript:alert('欢迎你');"/>

JavaScript核心语法

在这里插入图片描述

实例

1.实现按钮输出当前时间

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>从头开始学javascript</title>
  <script>
    function displayDate()
    {
      document.getElementById("demo").innerHTML=Date();
    }
  </script>
</head>
<body>
  <h1>这是一个显示日期的button按钮</h1>
  <p id="demo">在这里显示日期</p>
 <!--  这里注意函数要加（） -->
  <button type="button" οnclick="displayDate()">展示日期</button>
</body>
</html>

2.HTML 输出流，对事件的反应，改变 HTML 内容

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
	
<h1>我的第一段 JavaScript</h1>
<p id="demo">
JavaScript 能改变 HTML 元素的内容。
</p>
<script>
 
	// 文档输出流加不加标签都可以在这里区别是p可以换行
	document.write("<p>nihoa</p> ");
	document.write("nihao ");
	
	function myFunction()
	{
 
		window.alert('欢迎');//window.alert或者alert都可以
		x=document.getElementById("demo");  // 找到元素
		x.innerHTML="Hello JavaScript!";    // 改变内容
	}
</script>
//onclick是众多事件的一个，而myFunction是对他的反应
<button type="button" οnclick="myFunction()">点击这里</button>
	
</body>
</html>

3.改变 HTML 图像

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script>
		function changeImg()
		{
			element=document.getElementById('button');
			if (element.src.match('bulbon'))
			{
				element.src="pic_bulboff.gif";
			}
			else
			{
				element.src="pic_bulbon.gif";
			}
			 // element.src.match("bulbon") 的作用意思是：检索 <img id="myimage" οnclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180"> 里面 src 属性的值有没有包含 bulbon 这个字符串，如果存在字符串 bulbon，图片 src 更新为 bulboff.gif，若匹配不到 bulbon 字符串，src 则更新为 bulbon.gif
		}
	</script>
</head>
<body>
	<p>点击灯泡可以打开关闭灯</p>
	<img id="button" οnclick="changeImg()" src="pic_bulboff.gif" alt="" width="100" height="180">
</body>
</html>

值得一提的是简洁写法：

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

4.改变HTML的样式

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script>
		function change()
		{
			// 注意这里的document只能是小写不是大写
			x=document.getElementById('demo');
			x.style.color="#ff0000";
		}
	</script>
</head>
<body>
	<p id="demo">这是用于改变style的话</p>
	<button   οnclick="change()">改变颜色</button>
</body>
</html>

5.验证输入

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script>
		function myFunc()
		{
		
			var x=document.getElementById('demo').value;
			if(x==""||isNaN(x))
			{
				alert("不是数字");
			}
		}
	</script>
</head>
<body>
	<p >请输入一个数字</p>
	<input type="text" id="demo" >
	<button type="button"  οnclick="myFunc()">点击这里</button>
</body>
</html>

云祁

关注

0
点赞
踩
0

收藏

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

文章目录什么是JavaScriptJavaScript特点JavaScript组成JavaScript的基本结构JavaScript的执行原理网页中引用JavaScript的方式JavaScript核心语法实例1.实现按钮输出当前时间2.HTML 输出流，对事件的反应，改变 HTML 内容3.改变 HTML 图像4.改变HTML的样式5.验证输入什么是JavaScriptJavaScript...
复制链接

扫一扫

专栏目录