美文网首页技术干货
Web前端开发----JS

Web前端开发----JS

作者: 560b7bb7b879 | 来源:发表于2018-07-18 15:23 被阅读1次

    JavaScript 是世界上最流行的编程语言。

    这门语言可用于 HTML 和 web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

    JavaScript 是脚本语言

    JavaScript 是一种轻量级的编程语言。

    JavaScript 是可插入 HTML 页面的编程代码。

    JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。

    JavaScript 很容易学习。

    JavaScript:写入 HTML 输出

    JavaScript:对事件作出反应

    Button:按钮的意思

    Onclick事件:

    Alter函数:弹出对话框

    JavaScript:改变 HTML 内容

    使用 JavaScript 来处理 HTML 内容是非常强大的功能

    您会经常看到 document.getElementByID("some id")。这个方法是 HTML DOM 中定义的。

    DOM(文档对象模型)是用以访问 HTML 元素的正式 W3C 标准。

    JavaScript:改变 HTML 样式

    改变 HTML 元素的样式,属于改变 HTML 属性的变种。

    HTML 中的脚本必须位于  与  标签之间。

    脚本可被放置在 HTML 页面的  和  部分中。

    标签

    如需在 HTML 页面中插入 JavaScript,请使用  标签。

     和  会告诉 JavaScript 在何处开始和结束。

     和  之间的代码行包含了 JavaScript:

    您无需理解上面的代码。只需明白,浏览器会解释并执行位于  和  之间的 JavaScript。

    那些老旧的实例可能会在  标签中使用 type="text/javascript"。现在已经不必这样做了。JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。

    在  或 中引用脚本文件都是可以的。实际运行效果与您在 标签中编写脚本完全一致。

    JavaScript 通常用于操作 HTML 元素。

    操作 HTML 元素

    如需从 JavaScript 访问某个 HTML 元素,您可以使用 document.getElementById(id) 方法。

    请使用 "id" 属性来标识 HTML 元素:

    JavaScript 语句

    JavaScript 语句

    JavaScript 语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。

    下面的 JavaScript 语句向 id="demo" 的 HTML 元素输出文本 "Hello World":

    document.getElementById("demo").innerHTML="Hello World";

    分号 ;

    分号用于分隔 JavaScript 语句。

    通常我们在每条可执行的语句结尾添加分号。

    使用分号的另一用处是在一行中编写多条语句

    JavaScript 代码块

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

    块由左花括号开始,由右花括号结束。

    块的作用是使语句序列一起执行。

    JavaScript 函数是将语句组合在块中的典型例子。

    下面的例子将运行可操作两个 HTML 元素的函数:

    function myFunction()

    {

    document.getElementById("demo").innerHTML="Hello World";

    document.getElementById("myDIV").innerHTML="How are you?";

    }

    JavaScript 对大小写敏感

    空格

    JavaScript 会忽略多余的空格。您可以向脚本添加空格,来提高其可读性。

    对代码行进行折行

    您可以在文本字符串中使用反斜杠对代码行进行换行。下面的例子会正确地显示:

    document.write("Hello \

    World!");

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

    变量是存储信息的容器。

    JavaScript 变量

    与代数一样,JavaScript 变量可用于存放值(比如 x=2)和表达式(比如 z=x+y)。

    变量可以使用短名称(比如 x 和 y),也可以使用描述性更好的名称(比如 age, sum, totalvolume)。

    · 变量必须以字母开头

    · 变量也能以 $ 和 _ 符号开头(不过我们不推荐这么做)

    · 变量名称对大小写敏感(y 和 Y 是不同的变量)

    提示:JavaScript 语句和 JavaScript 变量都对大小写敏感。

    JavaScript 数据类型

    JavaScript 变量还能保存其他数据类型,比如文本值 (name="Bill Gates")。

    在 JavaScript 中,类似 "Bill Gates" 这样一条文本被称为字符串。

    JavaScript 变量有很多种类型,但是现在,我们只关注数字和字符串。

    当您向变量分配文本值时,应该用双引号或单引号包围这个值。

    当您向变量赋的值是数值时,不要使用引号。如果您用引号包围数值,该值会被作为文本来处理。

    例子

    var pi=3.14;

    var name="Bill Gates";

    var answer='Yes I am!';

    声明(创建) JavaScript 变量

    在 JavaScript 中创建变量通常称为“声明”变量。

    我们使用 var 关键词来声明变量:

    var carname;

    变量声明之后,该变量是空的(它没有值)。

    如需向变量赋值,请使用等号:

    carname="Volvo";

    不过,您也可以在声明变量时对其赋值:

    var carname="Volvo";

    您可以在一条语句中声明很多变量。该语句以 var 开头,并使用逗号分隔变量即可:

    var name="Gates", age=56, job="CEO";

    JavaScript 数据类型

    字符串、数字、布尔、数组、对象、Null、Undefined

    JavaScript 拥有动态类型

    JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型:

    实例

    var x                // x 为 undefined

    var x = 6;           // x 为数字

    var x = "Bill";      // x 为字符串

    JavaScript 字符串

    字符串是存储字符(比如 "Bill Gates")的变量。

    字符串可以是引号中的任意文本。您可以使用单引号或双引号:

    实例

    var carname="Bill Gates";

    var carname='Bill Gates';

    您可以在字符串中使用引号,只要不匹配包围字符串的引号即可:

    实例

    var answer="Nice to meet you!";

    var answer="He is called 'Bill'";

    var answer='He is called "Bill"';

    JavaScript 数字

    JavaScript 只有一种数字类型。数字可以带小数点,也可以不带:

    实例

    var x1=34.00;      //使用小数点来写

    var x2=34;         //不使用小数点来写

    JavaScript 布尔

    布尔(逻辑)只能有两个值:true 或 false。

    var x=true

    var y=false

    布尔常用在条件测试中

    JavaScript 数组

    下面的代码创建名为 cars 的数组:

    var cars=new Array();

    cars[0]="Audi";

    cars[1]="BMW";

    cars[2]="Volvo";

    或者 (condensed array):

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

    JavaScript 对象

    对象由花括号分隔。在括号内部,对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔:

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

    Undefined 和 Null

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

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

    声明变量类型

    当您声明新变量时,可以使用关键词 "new" 来声明其类型:

    var carname=new String;

    var x=      new Number;

    var y=      new Boolean;

    var cars=   new Array;

    var person= new Object;

    JavaScript 变量均为对象。当您声明一个变量时,就创建了一个新的对象。

    JavaScript 对象

    JavaScript 中的所有事物都是对象:字符串、数字、数组、日期,等等。

    在 JavaScript 中,对象是拥有属性和方法的数据。

    属性和方法

    属性是与对象相关的值。

    方法是能够在对象上执行的动作。

    举例:汽车就是现实生活中的对象。

    汽车的属性:

    car.name=Fiat

    car.model=500

    car.weight=850kg

    car.color=white

    汽车的方法:

    car.start()

    car.drive()

    car.brake()

    汽车的属性包括名称、型号、重量、颜色等。

    所有汽车都有这些属性,但是每款车的属性都不尽相同。

    汽车的方法可以是启动、驾驶、刹车等。

    所有汽车都拥有这些方法,但是它们被执行的时间都不尽相同。

    JavaScript 中的对象

    在 JavaScript 中,对象是数据(变量),拥有属性和方法。

    当您像这样声明一个 JavaScript 变量时:

    var txt = "Hello";

    您实际上已经创建了一个 JavaScript 字符串对象。字符串对象拥有内建的属性 length。对于上面的字符串来说,length 的值是 5。字符串对象同时拥有若干个内建的方法。

    属性:

    txt.length=5

    方法:

    txt.indexOf()

    txt.replace()

    txt.search()

    提示:在面向对象的语言中,属性和方法常被称为对象的成员。

    本例创建名为 "person" 的对象,并为其添加了四个属性:

    访问对象的属性

    访问对象属性的语法是:

    objectName.propertyName

    本例使用 String 对象的 length 属性来查找字符串的长度:

    var message="Hello World!";

    var x=message.length;

    在以上代码执行后,x 的值是:12

    访问对象的方法

    您可以通过下面的语法调用方法:

    objectName.methodName()

    这个例子使用 String 对象的 toUpperCase() 方法来把文本转换为大写:

    var message="Hello world!";

    var x=message.toUpperCase();

    在以上代码执行后,x 的值是:

    HELLO WORLD!

    JavaScript 函数

    函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

    JavaScript 函数语法

    函数就是包裹在花括号中的代码块,前面使用了关键词 function:

    function functionname()

    {

    这里是要执行的代码

    }

    当调用该函数时,会执行函数内的代码。

    可以在某事件发生时直接调用函数(比如当用户点击按钮时),并且可由 JavaScript 在任何位置进行调用。

    提示:JavaScript 对大小写敏感。关键词 function 必须是小写的,并且必须以与函数名称相同的大小写来调用函数。

    运行的结果

    调用带参数的函数

    在调用函数时,您可以向其传递值,这些值被称为参数。

    这些参数可以在函数中使用。

    您可以发送任意多的参数,由逗号 (,) 分隔:

    myFunction(argument1,argument2)

    当您声明函数时,请把参数作为变量来声明:

    function myFunction(var1,var2)

    {

    这里是要执行的代码

    }

    变量和参数必须以一致的顺序出现。第一个变量就是第一个被传递的参数的给定的值,以此类推。

    -----------------------------------------------------------------------------------------

    两次的对比

    带有返回值的函数

    有时,我们会希望函数将值返回调用它的地方。

    通过使用 return 语句就可以实现。

    在使用 return 语句时,函数会停止执行,并返回指定的值。

    语法

    function myFunction()

    {

    var x=5;return x;

    }

    上面的函数会返回值 5。

    注释:整个 JavaScript 并不会停止执行,仅仅是函数。JavaScript 将继续执行代码,从调用函数的地方。

    函数调用将被返回值取代:

    var myVar=myFunction();

    myVar 变量的值是 5,也就是函数 "myFunction()" 所返回的值。

    即使不把它保存为变量,您也可以使用返回值:

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

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

    局部 JavaScript 变量

    在 JavaScript 函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它。(该变量的作用域是局部的)。

    您可以在不同的函数中使用名称相同的局部变量,因为只有声明过该变量的函数才能识别出该变量。

    只要函数运行完毕,本地变量就会被删除。

    全局 JavaScript 变量

    在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它。

    JavaScript 变量的生存期

    JavaScript 变量的生命期从它们被声明的时间开始。

    局部变量会在函数运行以后被删除。

    全局变量会在页面关闭后被删除。

    JavaScript 运算符

    运算符 = 用于赋值。

    运算符 + 用于加值。

    运算符 = 用于给 JavaScript 变量赋值。

    算术运算符 + 用于把值加起来。

    JavaScript 比较和逻辑运算符

    比较和逻辑运算符用于测试 true 或 false

    比较运算符

    比较运算符在逻辑语句中使用,以测定变量或值是否相等。

    给定 x=5,下面的表格解释了比较运算符:

    感谢阅读

    喜欢看小编文章的点个订阅或者喜欢!小编每天都会跟大家分享文章,也会给大家提供web前端学习资料。

    相关文章

      网友评论

        本文标题:Web前端开发----JS

        本文链接:https://www.haomeiwen.com/subject/hvhnpftx.html