一个简单的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); }