【一起来烧脑】一步学会JavaScript体系
标题图
JavaScript 是一种轻量级的编程语言
可插入 HTML 页面的编程代码
JavaScript的用法，输出，语句，注解，变量，数据类型，函数，运算符，比较，条件语句，循环，Break，错误，类型转换，表单验证。
<script>alert("My first JavaScript");</script><head><script>function myFunction(){document.getElementById("demo").innerHTML="My First JavaScript Function";}</script></head><button type="button" onclick="myFunction()">click</button><!DOCTYPE html><html><body><script src="myScript.js"></script></body></html>输出
window.alert()
弹出警告框
document.write()
将内容写到HTML文档中
innerHTML写入到HTML元素
console.log()写到控制台
document.getElementById("myDIV").innerHTML="wiki";单行注释以//开头
多行注释以/开始，以/结束
变量：
一般是以字母开头，以$和_开头，对大小写敏感
数据类型：
数字，字符串，布尔，数组，对象，空，未定义，
JavaScript 函数
function functionName(){是要执行的代码}JavaScript 运算符
运算符“=”用于赋值。
运算符“+”用于加值。
比较运算符
比较运算符在逻辑语句中使用，以测定变量或者值能否相等。
JavaScript 条件语句
if 语句
if…else 语句
if…else if….else 语句
switch 语句
JavaScript 循环
for
for/in
while
do/while
Break
break语句用于跳出循环。
for (i=0;i<10;i++){ if (i==3) { break; } x=x + "The number is " + i + "<br>";}continue语句
continue 用于跳过循环中的一个迭代假如出现了指定的条件，而后继续循环中的下一个迭代。
label:语句错误
try 语句测试代码块的错误。
catch 语句解决错误。
throw 语句创立自己设置错误。
throw exception
异常可以是：
JavaScript 字符串、数字、逻辑值或者对象
类型转换：
数据类型：string、number、boolean、object、function
3种对象类型：Object、Date、Array
2种不包含任何数值的数据类型：null、undefined
typeof操作符
查看JavaScript变量的数据类型
constructor 属性返回
所有 JavaScript 变量的构造函数
String()toString() Date()String(new Date())obj = new Date()obj.toString()Number(false) // 返回 0Number(true) // 返回 1表单验证
function validateForm(){ var x=document.forms["myForm"]["fname"].value; if (x==null || x=="") { alert("姓为必填项"); return false; } }function validateForm(){ var x=document.forms["myForm"]["email"].value; var atpos=x.indexOf("@"); var dotpos=x.lastIndexOf("."); if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length){ alert("不是一个有效的 e-mail 地址"); return false; } }文档对象模型
var x=document.getElementById("name");var y=x.getElementsByTagName("p");var x=document.getElementsByClassName("name");<!DOCTYPE html><html><body><script>document.write(Date());</script></body></html><script>document.getElementById("p1").innerHTML="";</script><script>document.getElementById("image").src=".jpg";</script>document.getElementById(id).style.property=new style<script>document.getElementById("p2").style.color="pink";document.getElementById("p2").style.fontFamily="微软雅黑";document.getElementById("p2").style.fontSize="30px";</script><h1 onclick="this.innerHTML='wiki'">请点击该文本</h1><button onclick="displayDate()">点击这里</button><script>document.getElementById("myBtn").onclick=function(){displayDate()};</script>onload 和 onunload 事件会在客户进入或者离开页面时被触发onchange 事件常结合对输入字段的验证来使用onmouseover 和 onmouseout 事件onmousedown、onmouseup 以及 onclick 事件DOM 节点
<div id="div1"><p id="p1">This is a paragraph.</p><p id="p2">This is another paragraph</p></div><script>//这段代码创立新的<p> 元素var para=document.createElement("p");//这段代码创立了一个文本节点var node=document.createTextNode("This is a new paragraph");//向<p>元素追加这个文本节点para.appendChild(node);//这段代码中找到一个已有的元素var element=document.getElementById("div1");element.appendChild(para);</script>//含有拥有两个子节点（两个 <p> 元素）的 <div> 元素<div id="div1"><p id="p1">This is a paragraph.</p><p id="p2">This is another paragraph</p></div><script>//找到 id="div1" 的元素var parent=document.getElementById("div1");//找到 id="p1" 的 <p> 元素var child=document.getElementById("p1");//从父元素中删除子元素parent.removeChild(child);</script>对象
JavaScript对象是拥有属性和方法的数据
在JavaScript几乎所有的事物都是对象
几乎所有事务都是对象：字符串、数字、数组、日期、函数，等等
数字
JavaScript数字均为64位
constructor
返回对创立此对象的 Number 函数的引用
MAX_VALUE
可表示的最大的数
MIN_VALUE
可表示的最小的数
NaN
非数字值
字符串
在字符串中查找字符串
indexOf()
来定位字符串中某一个指定的字符初次出现的位置
内容匹配
match()函数用来查找字符串中特定的字符
返回这个字符
替换内容
replace() 方法在字符串中用某些字符替换另少量字符
toUpperCase() 或者者toLowerCase()
charAt() 返回在指定位置的字符
charCodeAt() 返回在指定的位置的字符的 Unicode 编码
concat() 连接字符串
fixed() 以打字机文本显示字符串
fontcolor() 使用指定的颜色来显示字符串
fontsize() 使用指定的尺寸来显示字符串
fromCharCode() 从字符编码创立一个字符串
indexOf() 检索字符串
italics() 使用斜体显示字符串
lastIndexOf() 从后向前搜索字符串
link() 将字符串显示为链接
match() 找到一个或者多个正则表达式的匹配
search() 检索与正则表达式相匹配的值
slice() 提取字符串的片断，并在新的字符串中返回被提取的部分
strike() 使用删除线来显示字符串
substring() 提取字符串中两个指定的索引号之间的字符
sup() 把字符串显示为上标
toLocaleLowerCase() 把字符串转换为小写
toLocaleUpperCase() 把字符串转换为大写
toString() 返回字符串
valueOf() 返回某个字符串对象的原始值
日期
new Date() // 当前日期和时间new Date(milliseconds) //返回从 1970 年 1 月 1 日至今的毫秒数new Date(dateString)new Date(year, month, day, hours, minutes, seconds, milliseconds)ate() 返回当日的日期和时间定义数组
join()
把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔
pop()
删除并返回数组的最后一个元素
push()
向数组的末尾增加一个或者更多元素，并返回新的长度
reverse()
颠倒数组中元素的顺序
shift()
删除并返回数组的第一个元素
slice()
从某个已有的数组返回选定的元素
sort()
对数组的元素进行排序
splice()
删除元素，并向数组增加新元素
toSource()
返回该对象的源代码
toString()
把数组转换为字符串，并返回结果
unshift()
向数组的开头增加一个或者更多元素，并返回新的长度
valueOf()
返回数组对象的原始值
创立Boolean对象
假如逻辑对象无初始值或者者其值为 0、-0、null、””、false、undefined 或者者 NaN，那么对象的值为 false
正则表达式
text()方法
test() 方法检索字符串中的指定值
exec() 方法检索字符串中的指定值
返回值是被找到的值
假如没有发现匹配，则返回 null。
compile()
方法用于改变 正则表达式
image.png
image.png
浏览器对象模型BOM
window.document.getElementById("header");//与此相同document.getElementById("header");window.innerHeight – 浏览器窗口的内部高度(包括滚动条)
window.innerWidth – 浏览器窗口的内部宽度(包括滚动条)
document.documentElement.clientHeight
document.documentElement.clientWidth
document.body.clientHeight
document.body.clientWidth
window.screen 对象包含有关客户屏幕的信息
window.location 对象用于取得当前页面的地址 (URL)，并把浏览器重定向到新的页面
window.history 对象包含浏览器的历史
window.navigator 对象包含有关访问者浏览器的信息
三种消息框：警告框、确认框、提醒框
alert("警告提醒文本")confirm("确认提醒文本")prompt("提醒文本","默认值")setTimeout()
clearTimeout()
var myVar; function myFunction(){ myVar=setTimeout(function(){alert("Hello")},5000);} function myStopFunction(){ clearTimeout(myVar);}什么是cookie？
Cookie是少量数据，存储在电脑的文本文件上
document.cookie 属性来创立 、读取、及删除 cookie
读取cookie
实例：
var x = document.cookie;function checkCookie(){ var username=getCookie("username"); if (username!="") { alert("Welcome again " + username); } else { username = prompt("Please enter your name:",""); if (username!="" && username!=null) { setCookie("username",username,365); } }}请点赞！由于你们的赞同/鼓励是我写作的最大动力！
欢迎关注达叔小生的简书！
这是一个有质量，有态度的博客
博客 上一篇 目录 下一篇
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 【一起来烧脑】一步学会JavaScript体系
