JavaScript 基础概要

最新推荐文章于 2023-03-16 17:06:59 发布

Turing·

最新推荐文章于 2023-03-16 17:06:59 发布

阅读量389

点赞数 2

分类专栏： web

本文链接：https://blog.csdn.net/qq_41835813/article/details/88903239

版权

web 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

一个简单的Jsp程序

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第一次</title>
	</head>
	<script>
		function displayDate(){
			document.getElementById("demo").innerHTML=Date();
	}
	</script>
	<body>
	<p id="demo">猜猜这里是什么</p>
	<button type="button" onclick="displayDate()">点点看</button>
	</body>
</html>

为什么要学习JavaScript

HTML定义了网页的内容
CSS描述了网页的布局
JavaScript实现网页的行为

JavaScript简介

JavaScript是互联网上最流行的脚本语言，这门语言可用于HTML和web，广泛用于服务器,Pc,笔记本电脑等设备

JavaScript是脚本语言，轻量级编程语言，可插入HTML页面的编程代码。

对事件的反应

alert()弹出对话框

改变HTML内容 x=document.getElementById("demo") 查找元素

x.innerHTML="内容" 改变内容

x.style.color="#ff0000" 改变样式

在 <head> 或者 <body> 的JavaScript

您可以在 HTML 文档中放入不限数量的脚本。

脚本可位于 HTML 的 <body> 或 <head> 部分中，或者同时存在于两个部分中。

通常的做法是把函数放入 <head> 部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。

JavaScript 显示数据

使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。

JavaScript 变量

在编程语言中，变量用于存储数据值。

JavaScript 使用关键字 var 来定义变量 var x, length

关键字：对大小写敏感

abstract	else	instanceof	super
boolean	enum	int	switch
break	export	interface	synchronized
byte	extends	let	this
case	false	long	throw
catch	final	native	throws
char	finally	new	transient
class	float	null	true
const	for	package	try
continue	function	private	typeof
debugger	goto	protected	var
default	if	public	void
delete	implements	return	volatile
do	import	short	while
double	in	static	with

JavaScript 数组

var cars=new Array("Saab","Volvo","BMW");var cars = ["Saab","Volvo","BMW"];

JavaScript HTML DOM

通过HTML DOM 可访问JavaScript HTML 文档的所有元素

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

JavaScript能够改变页面中所有的HTML元素
JavaScript能够改变页面中所有的HTML属性
JavaScript能够对页面中所有的CSS样式做出改变
JavaScript能够对页面中所有的事件做出反应

查找HTML元素

通过id找到HTML元素

<p id="demo">这是一个段落</p>
function displayDate(){
	document.getElementById("demo").innerHTML=要替换的内容;
}

通过签名找到HTML元素
通过类名找到HTML元素

JavaScript字符串

转义字符\在反斜杠之后使用引号
length计算字符串长度
indexOf查找字符串
match 查找特定字符串与之匹配
replace替换内容
toUpperCase() toLowerCase()大小写转换
字符串使用split()函数转为数组括号里可以是任何东西

特殊字符

\'	单引号
\"	双引号
\\	斜杆
\n	换行
\r	回车
\t	tab
\b	空格
\f	换页

字符串属性和方法

属性:

length
prototype 原型
constructor 构造函数

方法:

charAt() 返回在指定位置的字符
charCodeAt() 返回在指定位置的Unicode编码
concat() 连接俩个或更多的字符串，并返回新的字符串
fromCharCode() 将Unicode编码转为字符
indexOf() 返回某个指定的字符串值在字符串中首次出现的位置
includes() 查找字符串中是否包含指定字符串
lastIndexOf() 从后往前搜索字符串，并从起始位置0开始计算返回字符串最后出现的位置
match() 查找到一个或多个正则表达式的匹配
pepate() 复制字符串指定次数，连在一起返回
replace() 在字符串中查找匹配的子串，并替换与正则表达式匹配的子串
search() 查找与正则表达式相匹配的值
slice() 提取字符串片段，返回提取部分
split() 把字符串分割为字符串数组
startsWith() 查看字符串是否以指定的字符串开头
substr() 从起始索引号提取字符串中指定书目字符
substring() 提取俩个指定索引号之间的字符
toLowerCase() 大改小
toUpperCase() 小改大
valueOf() 返回字符串对象的原始值
tostring() 返回一个字符串
http://www.runoob.com/jsref/jsref-obj-string.html具体实现

Date（日期）对象

getFullYear() 获得年份
toUTCString() 将当前日期转为字符串
getDay() 用数组来显示日期
Display a clock 主要用到setTimeout("方法",时间--毫秒)

Math(算术)对象

round() 四舍五入
random() 返回0-1的随机数
max() 返回给定数中的最大值
min() 返回最小值

Window浏览器对象模型

可以计算尺寸

window.innerHeight - 浏览器窗口的内部高度(包括滚动条)
window.innerWidth - 浏览器窗口的内部宽度(包括滚动条)

2.其他方法

window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸

Window Screen

screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度

Window Location

location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口（80 或 443）
location.protocol 返回所使用的 web 协议（http:// 或 https://）

JavaScript 弹窗

警告框：alert()
确认框:confirm() 返回true 和false
确认框：prompt() var person=prompt("请输入你的名字","默认名字");

JavaScript 计时事件

setInterval() - 间隔指定的毫秒数不停地执行指定的代码。 setInterval(function(){alert("Hello")},3000);

var myVar=setInterval(function(){myTimer()},1000);   //调用函数
function myTimer(){
	var d=new Date();
	var t=d.toLocaleTimeString();   //显示时间
	document.getElementById("demo").innerHTML=t;

clearInterval() 方法用于停止 setInterval() 方法执行的函数代码。
setTimeout() - 在指定的毫秒数后执行指定代码。（⏲单位都是毫秒） setTimeout(function(){alert("Hello")},3000);

clearTimeout() 方法用于停止执行setTimeout()方法的函数代码。

<button onclick="myFunction()">点我</button>
<button onclick="myStopFunction()">停止弹框</button>
<script>
var myVar;
function myFunction(){
	myVar=setTimeout(function(){alert("Hello")},3000);
}
function myStopFunction(){
	clearTimeout(myVar);
}

Turing·

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 基础概要

一个简单的Jsp程序<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>第一次</title> </head> <script> function displayDate(){ document.getEl...
复制链接

扫一扫