[外链图片转存失败(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)]

【一起来烧脑】一步学会JavaScript体系的更多相关文章

  1. 【一起来烧脑】一步学会HTML体系

    [外链图片转存失败(img-zk4xNuy1-1563431241992)(https://upload-images.jianshu.io/upload_images/11158618-4e9cac ...

  2. 【一起来烧脑】一步学会CSS3体系

    [外链图片转存失败(img-yfi1VPyy-1563434266398)(https://upload-images.jianshu.io/upload_images/11158618-fc8784 ...

  3. Java基础:三步学会Java Socket编程

    Java基础:三步学会Java Socket编程 http://tech.163.com 2006-04-10 09:17:18 来源: java-cn 网友评论11 条 论坛        第一步 ...

  4. tortoisegit 7步 学会git分支

    tortoisegit 7步 学会git分支 做自己的产品,分支还是很重要的.例如,我发布了一个app,但是有bug,又想做新功能,怎么办呢?如果只在一个git上开发的话,bug会越来越多,原来bug ...

  5. 【一起来烧脑】一步学会TypeScript入门

    [外链图片转存失败(img-rmJXMGFs-1563388353181)(https://upload-images.jianshu.io/upload_images/11158618-dd813e ...

  6. 【一起来烧脑】一步学会AngularJS系统

    AngularJS是一个JavaScript框架 一个用JavaScript编写的库 [外链图片转存失败(img-JUTh171K-1563341248796)(https://upload-imag ...

  7. 【一起来烧脑】一步学会Vue.js系统

    Vuejs是一个构建数据驱动的web界面的库,通过api实现响应的数据绑定和组合的视图组件,Vue.js的核心是一个响应的数据绑定系统,它让数据与DOM保持同步非常简单,一旦创建了绑定,DOM 将与数 ...

  8. 干货分享:让你分分钟学会 javascript 闭包

    闭包,是 javascript 中重要的一个概念,对于初学者来讲,闭包是一个特别抽象的概念,特别是ECMA规范给的定义,如果没有实战经验,你很难从定义去理解它.因此,本文不会对闭包的概念进行大篇幅描述 ...

  9. 干货分享:让你分分钟学会 javascript 闭包(转)

    闭包,是javascript中独有的一个概念,对于初学者来讲,闭包是一个特别抽象的概念,特别是ECMA规范给的定义,如果没有实战经验,你很难从定义去理解它.因此,本文不会对闭包的概念进行大篇幅描述,直 ...

随机推荐

  1. 【UVA1505】 Flood-it!(IDA*)

    题目链接 IDA*,估价函数为当前除了左上角的连通块以外颜色的种类数,因为每次最多消去一个颜色. 维护位于当前连通块的边缘但颜色不同的点,每次从这些点拓展就行. #include <cstdio ...

  2. 【洛谷 P3193】 [HNOI2008]GT考试(KMP,dp,矩阵乘法)

    题目链接 \(f[i][j]\)表示准考证号到第\(i\)位,不吉利数字匹配到第\(j\)位的方案数. 答案显然是\(\sum_{i=0}^{m-1}f[n][i]\) \(f[i][j]=\sum_ ...

  3. 【转载】C#中string类使用Substring方法截取字符串

    在C#的字符串操作过程中,截取字符串是一种常见的字符串操作,可使用string类的Substring方法来完成字符串的截取操作,该方法支持设定截取的开始位置以及截取的字符串长度等参数,Substrin ...

  4. a标签中target属性为“_blank”时存在安全问题

    今天看到一个比较有意思的洞,虽然不够严重,但是却普遍存在各大src中 熟悉js的朋友都应该知道当我们在调用window下的open方法创建一个新窗口的同时,我们可以获得一个创建窗口的opener句柄, ...

  5. python进程不能并行的原因,进程阻塞

    上图红色框的写法进程会阻塞,并不能实现多进程.这种写法不需要调用start方法也会执行. 注意:正常写法是上图红框下面的代码,即可实现多进程.

  6. MySQL DataType--日期格式

    在MySQL中,无论是字符串转换为时间还是时间转换为字符串,都需要使用到时间格式: %a 缩写星期名 %b 缩写月名 %c 月,数值 %D 带有英文前缀的月中的天 %d 月的天,数值(00-31) % ...

  7. MySQL DataType--隐式类型转换

    隐式类型转换 在官方文档中对隐式类型转换规则有如下描述: 1. If one or both arguments are NULL, the result of the comparison is N ...

  8. 【MySql】Explain笔记

    Explain -- 使用 Explain + SQL 分析执行计划: id:表示此表的执行优先级 id相同,表的执行顺序依次从上往下:                id不同,并且递增,id值越大执 ...

  9. 二维码内嵌LOGO

    package Test; import java.awt.BasicStroke; import java.awt.Graphics; import java.awt.Graphics2D; imp ...

  10. SpringBoot -生成Entity和Dto互转的双向枚举类 -使用注解@Mapper(componentModel = "spring")

    1.导入pom文件 ,版本号自定 <!--mapStruct依赖--> <dependency> <groupId>org.mapstruct</groupI ...