JS 教程
1简介 1、JavaScript 是脚本语言
1.1轻量级的编程语言
1.2可插入 HTML 页面的编程代码
1.3可由所有的现代浏览器执行 2、您将学到什么
2.1JavaScript：写入 HTML 输出
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph</p>");
2.2JavaScript：对事件作出反应
<button type="button" onclick="alert('Welcome!')">点击这里</button>
2.3JavaScript：改变 HTML 内容
x=document.getElementById("demo") //查找元素
x.innerHTML="Hello JavaScript"; //改变内容
2.4JavaScript：改变 HTML 图像
2.5JavaScript：改变 HTML 样式
x=document.getElementById("demo") //找到元素
x.style.color="#ff0000"; //改变样式
2.6JavaScript：验证输入
if isNaN(x) {alert("Not Numeric")}; 2实现 1、<script> 标签
1.1<script> 和 </script> 会告诉 JavaScript 在何处开始和结束。
<script>
alert("My First JavaScript");
</script> 2、JavaScript 函数和事件
2.1通常，我们需要在某个事件发生时执行代码，比如当用户点击按钮时。
如果我们把 JavaScript 代码放入函数中，就可以在事件发生时调用该函数。
2.2<head> 或 <body> 中的 JavaScript 3、外部的 JavaScript
3.1外部 JavaScript 文件的文件扩展名是 .js。
<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html> 3输出 1、操作 HTML 元素
1.1如需从 JavaScript 访问某个 HTML 元素，您可以使用 document.getElementById(id) 方法。
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p id="demo">My First Paragraph</p>
<script>
document.getElementById("demo").innerHTML="My First JavaScript";
</script>
</body>
</html> 2、写到文档输出
2.1下面的例子直接把 <p> 元素写到 HTML 文档输出中：
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<script>
document.write("<p>My First JavaScript</p>");
</script>
</body>
</html> 4语句 1、JavaScript 语句
1.1JavaScript 语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。
document.getElementById("demo").innerHTML="Hello World";
1.2分号用于分隔 JavaScript 语句。 2、JavaScript 代码
2.1JavaScript 代码（或者只有 JavaScript）是 JavaScript 语句的序列。
document.getElementById("demo").innerHTML="Hello World";
document.getElementById("myDIV").innerHTML="How are you?"; 3、JavaScript 代码块
3.1JavaScript 语句通过代码块的形式进行组合。
3.2块由左花括号开始，由右花括号结束。
3.3块的作用是使语句序列一起执行。
function myFunction()
{
document.getElementById("demo").innerHTML="Hello World";
document.getElementById("myDIV").innerHTML="How are you?";
} 4、JavaScript 对大小写敏感。 5、空格
5.1JavaScript 会忽略多余的空格。 6、对代码行进行折行
6.1您可以在文本字符串中使用反斜杠对代码行进行换行。
document.write("Hello \
World!"); 5注释 1、JavaScript 注释
1.1我们可以添加注释来对 JavaScript 进行解释，或者提高代码的可读性。
1.2单行注释以 // 开头。
// 输出标题：
document.getElementById("myH1").innerHTML="Welcome to my Homepage";
// 输出段落：
document.getElementById("myP").innerHTML="This is my first paragraph."; 2、JavaScript 多行注释
2.1多行注释以 /* 开始，以 */ 结尾。
/*
下面的这些代码会输出
一个标题和一个段落
并将代表主页的开始
*/
document.getElementById("myH1").innerHTML="Welcome to my Homepage";
document.getElementById("myP").innerHTML="This is my first paragraph."; 3、使用注释来阻止执行
//document.getElementById("myH1").innerHTML="Welcome to my Homepage";
document.getElementById("myP").innerHTML="This is my first paragraph."; /*
document.getElementById("myH1").innerHTML="Welcome to my Homepage";
document.getElementById("myP").innerHTML="This is my first paragraph.";
*/ 4、在行末使用注释
var x=5; // 声明 x 并把 5 赋值给它
var y=x+2; // 声明 y 并把 x+2 赋值给它 6变量 1、变量是存储信息的容器。
var x=2;
var y=3;
var z=x+y; 2、JavaScript 变量
2.1变量可以使用短名称（比如 x 和 y），也可以使用描述性更好的名称（比如 age, sum, totalvolume）。
2.2变量必须以字母开头
2.3变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
2.4变量名称对大小写敏感（y 和 Y 是不同的变量） 3、JavaScript 数据类型
3.1当您向变量分配文本值时，应该用双引号或单引号包围这个值。
3.2当您向变量赋的值是数值时，不要使用引号。如果您用引号包围数值，该值会被作为文本来处理。
var pi=3.14;
var name="Bill Gates";
var answer='Yes I am!'; 4、声明（创建） JavaScript 变量
var carname="Volvo"; 5、一条语句，多个变量
var name="Gates", age=56, job="CEO"; 6、Value = undefined
6.1在计算机程序中，经常会声明无值的变量。未使用值来声明的变量，其值实际上是 undefined。 7、重新声明 JavaScript 变量
如果重新声明 JavaScript 变量，该变量的值不会丢失：
var carname="Volvo";
var carname; 8、JavaScript 算数
y=5;
x=y+2; 7数据类型 1、JavaScript 拥有动态类型
1.1这意味着相同的变量可用作不同的类型：
var x // x 为 undefined
var x = 6; // x 为数字
var x = "Bill"; // x 为字符串 2、JavaScript 字符串
2.1字符串是存储字符（比如 "Bill Gates"）的变量。
2.2字符串可以是引号中的任意文本。您可以使用单引号或双引号：
var carname="Bill Gates";
var carname='Bill Gates'; 3、JavaScript 数字
3.1JavaScript 只有一种数字类型。
var x1=34.00; //使用小数点来写
var x2=34; //不使用小数点来写
var y=123e5; //
var z=123e-5; // 0.00123 4、JavaScript 布尔
4.1布尔（逻辑）只能有两个值：true 或 false。
var x=true
var y=false 5、JavaScript 数组
var cars=new Array("Audi","BMW","Volvo"); 6、JavaScript 对象
6.1对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：
var person={firstname:"Bill", lastname:"Gates", id:5566}; 7、Undefined 和 Null
7.1Undefined 这个值表示变量不含有值。
7.2可以通过将变量的值设置为 null 来清空变量。
cars=null;
person=null; 8、声明变量类型
8.1当您声明新变量时，可以使用关键词 "new" 来声明其类型：
var carname=new String;
var x= new Number;
var y= new Boolean;
var cars= new Array;
var person= new Object; 8对象 1、属性和方法
1.1属性是与对象相关的值。
1.2方法是能够在对象上执行的动作。 2、JavaScript 中的对象
2.1在 JavaScript 中，对象是数据（变量），拥有属性和方法。 3、创建 JavaScript 对象
3.1JavaScript 中的几乎所有事务都是对象：字符串、数字、数组、日期、函数，等等。 4、访问对象的属性
objectName.propertyName 5、访问对象的方法
objectName.methodName() 9函数
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。 1、JavaScript 函数语法
1.1函数就是包裹在花括号中的代码块，前面使用了关键词 function：
function functionname()
{
这里是要执行的代码
} 2、调用带参数的函数
myFunction(argument1,argument2) 3、带有返回值的函数
function myFunction()
{
var x=5;
return x;
} 4、局部 JavaScript 变量
4.1在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。 5、全局 JavaScript 变量
5.1在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。 6、JavaScript 变量的生存期
6.1JavaScript 变量的生命期从它们被声明的时间开始。
6.2局部变量会在函数运行以后被删除。
6.3全局变量会在页面关闭后被删除。 7、向未声明的 JavaScript 变量来分配值
7.1如果您把值赋给尚未声明的变量，该变量将被自动作为全局变量声明。
carname="Volvo"; 10运算符 1、运算符 = 用于赋值。
运算符 + 用于加值。
y=5;
z=2;
x=y+z; 2、JavaScript 算术运算符
2.1算术运算符用于执行变量与/或值之间的算术运算。
运算符描述例子结果+加x=y+2x=7-减x=y-2x=3*乘x=y*2x=10/除x=y/2x=2.5%求余数 (保留整数)x=y%2x=1++累加x=++yx=6--递减x=--yx=4 3、JavaScript 赋值运算符
3.1赋值运算符用于给 JavaScript 变量赋值。
运算符例子等价于结果=x=y x=5+=x+=yx=x+yx=15-=x-=yx=x-yx=5*=x*=yx=x*yx=50/=x/=yx=x/yx=2%=x%=yx=x%yx=0 4、用于字符串的 + 运算符
4.1+ 运算符用于把文本值或字符串变量加起来（连接起来）。
txt1="What a very";
txt2="nice day";
txt3=txt1+txt2; 5、对字符串和数字进行加法运算
x=5+5;
document.write(x); x="5"+"5";
document.write(x); x=5+"5";
document.write(x); x="5"+5;
document.write(x);
如果把数字与字符串相加，结果将成为字符串。 11比较 1、比较运算符
1.1比较运算符在逻辑语句中使用，以测定变量或值是否相等。
运算符描述例子==等于x==8 为 false===全等（值和类型）x===5 为 true；x==="5" 为 false!=不等于x!=8 为 true>大于x>8 为 false<小于x<8 为 true>=大于或等于x>=8 为 false<=小于或等于x<=8 为 true 2、如何使用
2.1可以在条件语句中使用比较运算符对值进行比较，然后根据结果来采取行动：
if (age<18) document.write("Too young"); 3、逻辑运算符
3.1逻辑运算符用于测定变量或值之间的逻辑。
运算符描述例子&&and(x < 10 && y > 1) 为 true||or(x==5 || y==5) 为 false!not!(x==y) 为 true 4、条件运算符
variablename=(condition)?value1:value2 12If...Else 语句 1、条件语句
1.1通常在写代码时，您总是需要为不同的决定来执行不同的动作。
1.2在 JavaScript 中，我们可使用以下条件语句：
if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
if...else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
if...else if....else 语句 - 使用该语句来选择多个代码块之一来执行
switch 语句 - 使用该语句来选择多个代码块之一来执行 2、If 语句
2.1只有当指定条件为 true 时，该语句才会执行代码。
if (条件)
{
只有当条件为 true 时执行的代码
} 3、If...else 语句
3.1请使用 if....else 语句在条件为 true 时执行代码，在条件为 false 时执行其他代码。
if (条件)
{
当条件为 true 时执行的代码
}
else
{
当条件不为 true 时执行的代码
} 4、If...else if...else 语句
4.1使用 if....else if...else 语句来选择多个代码块之一来执行。
if (条件 1)
{
当条件 1 为 true 时执行的代码
}
else if (条件 2)
{
当条件 2 为 true 时执行的代码
}
else
{
当条件 1 和 条件 2 都不为 true 时执行的代码
} 13Switch 语句 1、JavaScript Switch 语句
1.1请使用 switch 语句来选择要执行的多个代码块之一。
switch(n)
{
case 1:
执行代码块 1
break;
case 2:
执行代码块 2
break;
default:
n 与 case 1 和 case 2 不同时执行的代码
} 2、default 关键词
2.1请使用 default 关键词来规定匹配不存在时做的事情：
var day=new Date().getDay();
switch (day)
{
case 6:
x="Today it's Saturday";
break;
case 0:
x="Today it's Sunday";
break;
default:
x="Looking forward to the Weekend";
} 14For 1、JavaScript 循环
1.1如果您希望一遍又一遍地运行相同的代码，并且每次的值都不同，那么使用循环是很方便的。
for (var i=0;i<cars.length;i++)
{
document.write(cars[i] + "<br>");
} 2、不同类型的循环
2.1JavaScript 支持不同类型的循环：
for - 循环代码块一定的次数
for/in - 循环遍历对象的属性
while - 当指定的条件为 true 时循环指定的代码块
do/while - 同样当指定的条件为 true 时循环指定的代码块 3、For 循环
3.1for 循环是您在希望创建循环时常会用到的工具。
for (语句 1; 语句 2; 语句 3)
{
被执行的代码块
}
语句 1 在循环（代码块）开始前执行
语句 2 定义运行循环（代码块）的条件
语句 3 在循环（代码块）已被执行之后执行 4、语句 1
4.1通常我们会使用语句 1 初始化循环中所用的变量 (var i=0)。 5、语句 2
5.1通常语句 2 用于评估初始变量的条件。
5.2如果语句 2 返回 true，则循环再次开始，如果返回 false，则循环将结束。 6、语句 3
6.1通常语句 3 会增加初始变量的值。 7、For/In 循环
7.1JavaScript for/in 语句循环遍历对象的属性：
var person={fname:"John",lname:"Doe",age:25}; for (x in person)
{
txt=txt + person[x];
} 15While 1、while 循环
1.1While 循环会在指定条件为真时循环执行代码块。
while (条件)
{
需要执行的代码
} 2、do/while 循环
2.1do/while 循环是 while 循环的变体。该循环会执行一次代码块，在检查条件是否为真之前，然后如果条件为真的话，就会重复这个循环。
do
{
需要执行的代码
}
while (条件); 16Break 1、Break 语句
1.1break 语句可用于跳出循环。
1.2break 语句跳出循环后，会继续执行该循环之后的代码（如果有的话）：
for (i=0;i<10;i++)
{
if (i==3)
{
break;
}
x=x + "The number is " + i + "<br>";
} 2、Continue 语句
2.1continue 语句中断循环中的迭代，如果出现了指定的条件，然后继续循环中的下一个迭代。
for (i=0;i<=10;i++)
{
if (i==3) continue;
x=x + "The number is " + i + "<br>";
} 17错误
try 语句测试代码块的错误。
catch 语句处理错误。
throw 语句创建自定义错误。 1、错误一定会发生
1.1当 JavaScript 引擎执行 JavaScript 代码时，会发生各种错误。 2、JavaScript 抛出错误
2.1当错误发生时，当事情出问题时，JavaScript 引擎通常会停止，并生成一个错误消息。 3、JavaScript 测试和捕捉
3.1try 语句允许我们定义在执行时进行错误测试的代码块。
3.2catch 语句允许我们定义当 try 代码块发生错误时，所执行的代码块。
3.3JavaScript 语句 try 和 catch 是成对出现的。
try
{
//在这里运行代码
}
catch(err)
{
//在这里处理错误
} 4、Throw 语句
4.1throw 语句允许我们创建自定义错误。
4.2正确的技术术语是：创建或抛出异常（exception）。
throw exception 18验证 1、JavaScript 表单验证
1.1JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。
1.2被 JavaScript 验证的这些典型的表单数据有：
用户是否已填写表单中的必填项目？
用户输入的邮件地址是否合法？
用户是否已输入合法的日期？
用户是否在数据域 (numeric field) 中输入了文本？ 2、必填（或必选）项目
2.1下面的函数用来检查用户是否已填写表单中的必填（或必选）项目。
function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
{alert(alerttxt);return false}
else {return true}
}
} 3、E-mail 验证
3.1下面的函数检查输入的数据是否符合电子邮件地址的基本语法。
function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if (apos<1||dotpos-apos<2)
{alert(alerttxt);return false}
else {return true}
}
}
JS 教程的更多相关文章
- Node.js 教程 01 - 简介、安装及配置
系列目录: Node.js 教程 01 - 简介.安装及配置 Node.js 教程 02 - 经典的Hello World Node.js 教程 03 - 创建HTTP服务器 Node.js 教程 0 ...
- Node.js 教程 04 - 模块系统
前言: Node.js的模块系统类似于C/C++的文件引用,可以声明对象,也可以定义类 创建对象. 大家这么理解,就简单了. 定义: 为了让Node.js的文件可以相互调用,Node.js提供了一个简 ...
- Node.js教程系列~目录
Node.js这个东西在近几年火起来了,而且会一直火下去,无论在infoq还是在cnblogs,csdn上,都可以到处看到它的样子,它主推的应该就是异步式I/O 吧,是的,设计的很完美,很吸引人,虽然 ...
- js基础到精通全面教程--JS教程
适合阅读范围:对JavaScript一无所知-离精通只差一步之遥的人 基础知识:HTML JavaScript就这么回事1:基础知识 1 创建脚本块 1: <script language=”J ...
- MVVM开源框架Knot.js 教程2 - 大幅改变前端框架开发体验的Debugger
Knotjs教程系列 1.CBS初步 2.Knot.js Debugger(本文) ....持续增加中 Knot.js 教程2 - 改变前端框架开发体验的Debugger Debugger只是一个方便 ...
- dot.js教程文档api
dot.js是一个短小精悍的js模板引擎,压缩版仅有4K大小,最近使用dot的时候整理出这个dot.js教程文档,其实称不上什么教程,只是对dot.js的介绍和实例,希望能帮助到一部分需要的人. 使用 ...
- riot.js教程【三】访问DOM元素、使用jquery、mount输入参数、riotjs标签的生命周期
前文回顾 riot.js教程[二]组件撰写准则.预处理器.标签样式和装配方法 riot.js教程[一]简介 访问DOM元素 你可以通过this.refs对象访问dom元素 而且还有大量的属性简写方式可 ...
- riot.js教程【四】Mixins、HTML内嵌表达式
前文回顾 riot.js教程[三]访问DOM元素.使用jquery.mount输入参数.riotjs标签的生命周期: riot.js教程[二]组件撰写准则.预处理器.标签样式和装配方法: riot.j ...
- riot.js教程【五】标签嵌套、命名元素、事件、标签条件
前文回顾 riot.js教程[四]Mixins.HTML内嵌表达式 riot.js教程[三]访问DOM元素.使用jquery.mount输入参数.riotjs标签的生命周期: riot.js教程[二] ...
- riot.js教程【六】循环、HTML元素标签
前文回顾 riot.js教程[五]标签嵌套.命名元素.事件.标签条件 riot.js教程[四]Mixins.HTML内嵌表达式 riot.js教程[三]访问DOM元素.使用jquery.mount输入 ...
随机推荐
- Java : java.util.ConcurrentModificationException
在删除 List 元素的时候,要用 Iterator,不要直接遍历 List,否则会出现 Fatal Exception: java.util.ConcurrentModificationExcept ...
- css效果小计
在工作学习中总能发现一些新鲜的页面效果可以用不同的css完成,在这里将遇到的一些css做下记录,以便日后翻阅,如果其中的写法不对,或者有更优写法欢迎留言,不胜感激 1.关于用一个div做出双边框(由于 ...
- SparkSQL中的自定义函数UDF
在Spark中,也支持Hive中的自定义函数.自定义函数大致可以分为三种: UDF(User-Defined-Function),即最基本的自定义函数,类似to_char,to_date等 UDAF( ...
- pycharm连接数据库出现时区jdbc问题
unrecognized or represents more than one time zone. You must configure either the server or JDBC dri ...
- eNSP 模拟器添加loopback本地回环口
eNSP只能模拟华为的设备,通常情况下数据通信的传递范围仅限于eNSP中的设备之间. 有时我们在学习更多技术,比如希望将eNSP跟VMware Workstation里的虚拟机互通,或者想让eNSP里 ...
- VUE 项目dependency was not found: * !!vue-style-loader!css-loader? 解决方案
用npm run dev 运行vue项目时,出现以下错误: ERROR Failed to compile with errors :: This dependency was not found: ...
- request.getSession(true/false)的区别
javax.servlet.http.HttpServletRequest接口有两个方法:getSession(boolean)和getSession(). 具体什么区别,跟踪源码分析下,先摆出结论: ...
- java ListNode链表数据结构
class ListNode{ int val; ListNode next; } 该节点的值 val. 下一个节点 next
- 剑指offer——面试题32.1：分行从上到下打印二叉树
void BFSLayer(BinaryTreeNode* pRoot) { if(pRoot==nullptr) return; queue<BinaryTreeNode*> pNode ...
- Mac 10.12安装SVN工具SmartSVM 7.6
说明:SVN工具没有最好的,只有用的最顺手的. 下载: (链接: https://pan.baidu.com/s/1dFGqEsT 密码: uyjx)