您的位置：首页 > 其它

文章标题

2017-07-22 17:10 197 查看

JavaScript的教程

1.JavaScript实现

HTML中的脚本必须位于

<script></script>

之间，

而脚本可放于HTML页面的

<body>

或

<head>

中

<script>
alert("My First JavaScript");
</script>

现在script标签中不用再写type=”text/javascript”,因为JavaScript是所有现代浏览器乙级HTML5中的默认脚本语言。

和中JavaScript函数的使用方法一样，将script标签套用进去即可，可通过button触发事件，例如：

<!DOCTYPE html>
<html>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="My First JavaScript Function";
}
</script>
</body>
</html>

JavaScript也可以写在外部，并将文件拓展名命名为.js,在script标签中用src调用

<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>

2.JavaScript的输出

①通过操作操作HTML元素来输出，例如可以通过指定的ID来访问HTML元素

<!DOCTYPE html>
<html>
<body>
<h1>我的第一张网页</h1>
<p id="demo">我的第一个段落</p>
<script>
document.getElementById("demo").innerHTML="我的第一段 JavaScript";
</script>
</body>
</html>

②写到文档输出，例如，

<script>
document.write("<p>我的第一段 JavaScript</p>");
</script>

但是，document.write()仅仅向文档输出写内容，如果在文档已完成加载后执行document.write,整个HTML页面将被覆盖

3.JavaScript语句

①JavaScript用分号分割JavaScript语句，这是可选的，也可以不带分号

②JavaScript会按照编写的顺序来执行每一条语句

③JavaScript语句通过代码块的形式进行组合

④JavaScript对大小写敏感

⑤JavaScript会忽略多余的空格

⑥JavaScript可在文本字符串中使用反斜杠对代码行进行换行，例如

document.write("Hello \
World!");**

**warning：**JavaScript 是脚本语言。浏览器会在读取代码时，逐行地执行脚本代码。而对于传统编程来说，会在执行前对所有代码进行编译。

4.JavaScript注释（与C++一样）

5.JavaScript变量

变量是存储信息的容器

JavaScript变量的注意事项

变量可以以字母，$和_字符开头，但是尽量以字母开头

变量对大小写敏感

JavaScript数据类型

JavaScript变量可以保存其他数据类型，比如文本值（name=“likai”）

JavaScript变量有很多种类型，需要注意的是当我们向变量分配文本值时，应该用双引号或单引号包围这个值

声明（创建）JavaScript变量

这部分与C++类似，需要注意的是，重新声明JavaScript变量，该变量的值不会丢失，例如，

var carname="Volvo";
var carname;

6.JavaScript数据类型

JavaScript拥有动态类型，相同的变量可作用于不同的类型：

JavaScript可以是引号中的任意文本，但不能匹配包围字符串的引号，例如，

var answer="Nice to meet you!";
var answer="He is called 'Bill'";
var answer='He is called "Bill"';

JavaScript数字，布尔略

JavaScript数组注意，声明JavaScript数组不需要写明几个，例如，cars后面不用写数组的大小

var cars=new Array();
cars[0]="Audi";
cars[1]="BMW";
cars[2]="Volvo";

当然下面两种方法也可以：

var cars=new Array("Audi","BMW","Volvo");

或

var cars=["Audi","BMW","Volvo"];

JavaScript对象

对象由花括号分隔，在括号内部，对象的属性以名称和值对的形式（name：value）来定义，属性间由逗号分隔，例如

var person={
firstname : "Bill",
lastname  : "Gates",
id        :  5566
};

两种寻址的方式：

name=person.lastname;
name=person["lastname"];

Undefined和Null

Undefined这个值表示变量不含有值

可以通过将变量的值设置为Null来清空变量

可用关键词“new”来声明其类型，例如，

var carname=new String

7.JavaScript对象

JavaScript中的几乎所有事物都是对象：字符串、数字、数组、日期、函数，等等。也可以自己创建对象，例如，创建person对象并赋值。

<!DOCTYPE html>
<html>
<body>

<script>
person=new Object();
person.firstname="Bill";
person.lastname="Gates";
person.age=56;
person.eyecolor="blue";
document.write(person.firstname + " is " + person.age + " years old.");
</script>

</body>
</html>

访问对象的属性：

对象名.对象属性

访问对象的方法：

对象名.对象方法()

8.JavaScript函数

函数是由时间驱动的或者当他被调用时执行的可重复使用的代码块

1. JavaScript函数语法

function functionname（参数）{
执行的代码
}

与C++和Java不同的是，声明函数时不用写明参数的类型，只写其名即可，例如，

<button onclick="myFunction('Bill Gates','CEO')">点击这里</button>
<script>
function myFunction(name,job)
{
alert("Welcome " + name + ", the " + job);
}
</script>

结果为Welcome Bill Gates, the CEO

2. 带有返回值的函数，return即可，

document.getElementById("demo").innerHTML=myFunction();

demo” 元素的 innerHTML 将成为 5，也就是函数 “myFunction()” 所返回的值。

您可以使返回值基于传递到函数中的参数。

3. 局部变量和全局变量以及JavaScript变量的生存期与C++类似，略

4. 如果把值赋给了未声明的变量，该变量将被自动作为全局变量声明

9.JavaScript 运算符(与C++类似)

10.JavaScript比较和逻辑运算符

比较和逻辑运算符用于测试true和false，内容与C++大致类似，在条件运算符处稍有不同，

语法：

variablename=(condition)?value1:value2

例子：

greeting=(visitor==”PRES”)?”Dear President “:”Dear “;

11.JavaScript条件判断语句（if…else和Switch）与C++一样

12.JavaScript循环（while循环和for循环）

for循环

for - 循环代码块一定的次数

for (语句 1; 语句 2; 语句 3)
{
被执行的代码块
}

for/in 语句循环遍历对象的属性

var person={fname:"John",lname:"Doe",age:25};
for (x in person)
{
txt=txt + person[x];
}

结果

JohnDoe25

3.while循环和do while循环（略）

13.JavaScript Break和Continue语句

break 语句用于跳出循环。

continue 用于跳过循环中的一个迭代。

JavaScript 标签

语法

break labelname;
continue labelname;

continue 语句（带有或不带标签引用）只能用在循环中。

break 语句（不带标签引用），只能用在循环或 switch 中。

通过标签引用，break 语句可用于跳出任何 JavaScript 代码块，例如

    cars=["BMW","Volvo","Saab","Ford"];
list:
{
document.write(cars[0] + "<br>");
document.write(cars[1] + "<br>");
document.write(cars[2] + "<br>");
break list;
document.write(cars[3] + "<br>");
document.write(cars[4] + "<br>");
document.write(cars[5] + "<br>");
}



14.JavaScript错误 - Throw、 Try和Catch
try语句测试代码块的错误

catch语句处理错误

throw语句创建自定义错误

try catch语句

try{
//在这里运行代码
}catch(err)
{
//在这里处理错误
}


throw语句

正确的技术术语是：创建或抛出异常

语法：

throw exception

例如：

<script>
function myFunction()
{
try
{
var x=document.getElementById("demo").value;
if(x=="")    throw "empty";
if(isNaN(x)) throw "not a number";
if(x>10)     throw "too high";
if(x<5)      throw "too low";
}
catch(err)
{
var y=document.getElementById("mess");
y.innerHTML="Error: " + err + ".";
}
}
</script>
<h1>My First JavaScript</h1>
<p>Please input a number between 5 and 10:</p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">Test Input</button>
<p id="mess"></p>


15.JavaScript 表单验证
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。

JavaScript 表单验证

JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。

被 JavaScript 验证的这些典型的表单数据有：

1. 用户是否已填写表单中的必填项目？

2. 用户输入的邮件地址是否合法？

3. 用户是否已输入合法的日期？

4. 用户是否在数据域 (numeric field) 中输入了文本？


                                        
                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理  
                    
                    
                    
                        
                         标签：



            
                相关文章推荐
                
                
                    
                                                                        在文章中主标题和副标题的格式问题
                                                文章标题
                                                文章标题
                                                文章标题
                                                文章标题C/C++输入过程中检测回车符作为程序输入结束的若干问题
                                                文章标题
                                                文章标题
                                                【文章】我是文章标题
                                                文章标题
                                                文章标题
                                                文章标题
                                                文章标题
                                                文章标题
                                                文章标题测试
                                                文章标题
                                                文章标题
                                                文章标题
                                                文章标题
                                                文章标题


        
            
            
            
                
                    新的分享
                    
                        
                                                        一次教科书级别的Redis高可用架构设计实践 - Redis
                                                        曾光：北京这次的毒株不像国内流行类型
                                                        从PRD文档到产品上线，有哪些问题需要解决？
                                                        vue3自定义指令的使用
                                                        Oracle SQL性能优化最常用的40条建议 - ORACLE
                                                        程序员翻车常见反应，你中枪了吗？ - 职场生涯
                                                        新鲜开源：基于Prometheus的企业监控平台设计与实现 - 运维
                                                        嵌入式软件开发之程序架构设计-任务调度
                                                        【Java面试】请简单说一下你对受检异常和非受检异常的理解
                                                        奇安信更新招股书：第一季亏损过5亿，齐向东持股38%
                                                        艾瑞咨询：2020年中国后智能厨房案例研究报告
                                                        艾瑞咨询：2020年中国人工智能+物流发展研究报告
                                                    
                    
                
            

            
                
                    章节导航