javaScript_(1)[概述,语法,函数,事件]

SDWESCES

已于 2022-03-14 16:37:00 修改

阅读量132

点赞数

分类专栏： html 文章标签： html javascript java

于 2021-09-06 20:42:41 首次发布

本文链接：https://blog.csdn.net/weixin_47484523/article/details/120143407

版权

html 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

本文介绍了JavaScript的历史，从LiveScript到JavaScript的转变，以及它作为脚本语言与Java的区别。接着讲解了JavaScript的基本语法，包括在HTML中的位置以及如何导入外部脚本。此外，还深入探讨了JavaScript中的函数使用，以及各种事件处理，如点击、聚焦等事件的触发。通过实例展示了如何在网页中实现动态效果。

摘要由CSDN通过智能技术生成

文章目录

html 结构内容超链接图片表单表格…
css 修饰文本背景盒子模型浮动定位…
javaScript 动态操作网页中标签和css
静态页面
动态页面–>页面上的数据动态加载

javaScript历史

原名: liveScript 是美国的网景公司开发的一种脚本语言

网景公司和sun公司合作改名为javaScript

脚本语言: 例如sql 不需要编译,由某种解释器解释执行
java编译执行
aa.java—>aa.class文件 — jvm

javaScript与java区别

相同点:都是面向对象
不同点: javaScript属于脚本语言运行在网页浏览器中
java是高级语言需要整体编译而后执行

javaScript概述

是一种直译式的脚本语言,用来为网页添加各式各样动态效果.
通常识嵌入在在html中运行.
具体作用:
1.响应网页中产生事件
2.进行客户端表单验证
3.动态改变标签样式

html:基本结构,内容
css:修饰样子
javaScript: 行为 动态操作

基本语法

脚本位置

① 写在head 里
② 也可以导入外部

	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 导入外部的js脚本文件 -->
		<script src="js/out.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//window.alert()
			alert("hello javaScript");//消息提示框
		</script>
	</head>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>js</title>
		<!--导入外部的js脚本文件-->
		<script src="js/out.js" type="text/javascript" charset="UTF-8"></script>
		<script type="text/javascript">
			//window.alert()
			alert("hello java Script"); //消息提示框
		</script>
	</head>
	<body>
		
	</body>
</html>

out.js

alert("来自外部js文件的脚本");

在这里插入图片描述

js函数

function test(){ 函数声明函数名称
console.log("函数被调用了”); 函数内容
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>js函数</title>
		<script type="text/javascript">
			//comsole.log("11111111")
			/*声明函数*/
			function test(){
				console.log("test()被调用了")
			}
			//调用函数
			test();
			function test(){
				console.log(a);
				console.log(b);
				console.log(c);
			}
			//test1("aaa","abc",true)
			function test2(a,b){
				return a+b;
			}
			//全局函数
			var a=10.5;
			var b="10";  //字符串
			var c="15a1";
			var d="a15a1";
			console.log(praseInt(a)); //浮点数 转为 整数 //10
			console.log(parseInt(b)+a); //
			console.log(parseInt(c)+a);
			console.log(parseInt(d)+a);
			//parseInt() 纯浮点数转为 整数   将字符串数字转为 整数  将字符串数字开头部分转为整数  字母开头返回NAN
			console.log(a+b*1);
			
			var x=10.5;
			var y="a10.8a1";
			console.log(parseFloat(x));
			console.log(parseFloat(y));
			
			//typeof(变量) 返回变量的数据类型
			console.log(typeof(a));
			console.log(typeof(b));
			console.log(typeof(true));
			//eval() 可运算某个字符串 可以把一段字符串当作js脚本运行
			/*var r="alert(2+3)";
			eval(r); */
			
			var="2+3*2"；
			console.log(eval(r));
		</script>
	</head>
	<body>
	</body>
</html>

事件

标签可以产生事件,事件会触发函数

	  鼠标左键单击事件 onclick 事件
	  鼠标左键双击事件 ondblclick 双击事件
	  输入框获得鼠标焦点时触发  onfocus 聚焦事件
	  输入框失去鼠标焦点时触发 onblur 失焦事件
	  鼠标移入到标签上触发  onmouseover 移入事件
	  鼠标移出标签触发 onmouseout 移出事件
	  键盘按下时触发 onkeydown
	  键盘抬起时触发 onkeyup
	  当网页加载后自动触发  onload
	  当输入框失去鼠标焦点 且 内容发生改变时触发.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			
			function test(){
				console.log("test被调用了");
			}
			
		</script>
	</head>
	<body onload="test()">
		<!--
		          标签可以产生事件 
				  事件会触发函数
				  鼠标左键单击事件 onclick 事件
				  鼠标左键双击事件 ondblclick 双击事件
				  输入框获得鼠标焦点时触发  onfocus 聚焦事件
				  输入框失去鼠标焦点时触发 onblur 失焦事件
				  鼠标移入到标签上触发  onmouseover 移入事件
				  鼠标移出标签触发 onmouseout 移出事件
				  键盘按下时触发 onkeydown
				  键盘抬起时触发 onkeyup
				  当网页加载后自动触发  onload
				  当输入框失去鼠标焦点 且 内容发生改变时触发.
		-->
		<input type="button" value="单击" οnclick="test"() />
		<div onclick="test()">div</div>
		
		<input type="button" value="双击" ondblclick="test()" />
		<br/>
		
		<input type="text" onfocus="test()" />
		<br/>
		<input type="text" onblur="test()" />
		
		<div style="background-color: aqua;width: 200px;height: 50px;"οnmοuseοver="test()" οnmοuseοut="test()"></div>
		</br>
		
		<input type="text" onkeydown="test()" />
		</br>
		<input type="text" onkeyup="test()" />
		</br>
		<input type="text" onchange="test()" />
	</body>
</html>

在这里插入图片描述

SDWESCES

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javaScript_(1)[概述,语法,函数,事件]

html 结构内容超链接图片表单表格…css 修饰文本背景盒子模型浮动定位…javaScript 动态操作网页中标签和css静态页面动态页面–>页面上的数据动态加载1.javaScript历史原名: liveScript 是美国的网景公司开发的一种脚本语言网景公司和sun公司合作改名为javaScript脚本语言: 例如sql 不需要编译,由某种解释器解释执行java编译执行aa.java—>aa.class文件 — jvmjav
复制链接

扫一扫

专栏目录