【一起来烧脑】一步学会JavaScript体系

[外链图片转存失败(img-b0GOhxRY-1563571645197)(https://upload-images.jianshu.io/upload_images/11158618-ba249b916a32ba91.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

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)     // 返回 0

Number(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()

方法用于改变正则表达式

[外链图片转存失败(img-snFmFmjC-1563571645201)(https://upload-images.jianshu.io/upload_images/11158618-57f0c6d938d05f92.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

[外链图片转存失败(img-qc0xe3fS-1563571645203)(https://upload-images.jianshu.io/upload_images/11158618-6efc97dfbf74b945.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

浏览器对象模型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);

      }

   }

}

请点赞！因为你们的赞同/鼓励是我写作的最大动力！

欢迎关注达叔小生的简书！

这是一个有质量，有态度的博客

[外链图片转存失败(img-50oKRuXx-1563571645207)(https://upload-images.jianshu.io/upload_images/11158618-9ab0d3fef85d80ce?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]