JavaScript学习笔记

柔情只为你懂 2022-08-27 10:55 148阅读 0赞

# 一、JavaScript简介 #

JavaScript 是脚本语言

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

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

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

JavaScript 很容易学习。

JavaScript：写入 HTML 输出

提示：您只能在 HTML 输出中使用 document.write。如果您在文档加载后使用该方法，会覆盖整个文档。

JavaScript：对事件作出反应

<button type="button" οnclick="alert('Welcome!')">点击这里</button>
    JavaScript：改变 HTML 内容
    <p id="demo">
    JavaScript 能改变 HTML 元素的内容。
    </p>
    <script>
    function myFunction()
    {
    x=document.getElementById("demo");  // 找到元素
    x.innerHTML="Hello JavaScript!";    // 改变内容
    }
    </script>
    <button type="button" οnclick="myFunction()">点击这里</button>

效果：demo标识的段落本来显示的是 JavaScript 能改变 HTML 元素的内容。

点击按钮后，此处文本替换为：Hello JavaScript!

提示：您会经常看到 document.getElementByID("some id")。这个方法是 HTML DOM 中定义的。DOM（文档对象模型）是用以访问 HTML 元素的正式 W3C 标准。

JavaScript：改变 HTML 图像

本例会动态地改变 HTML <image> 的来源 (src)：

JavaScript：改变 HTML 样式

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

<p id="demo">
    JavaScript 能改变 HTML 元素的样式。
    </p>
    <script>
    function myFunction()
    {
    x=document.getElementById("demo") // 找到元素
    x.style.color="#ff0000";          // 改变样式
    }
    </script>
    <button type="button" οnclick="myFunction()">点击这里</button>

JavaScript：验证输入

JavaScript 常用于验证用户的输入。

<p>请输入数字。如果输入值不是数字，浏览器会弹出提示框。</p>

<input id="demo" type="text">
    <script>
    function myFunction()
    {
    var x=document.getElementById("demo").value;
    if(x==""||isNaN(x))
    {
    alert("Not Numeric");
    }
    }
    </script>
    <button type="button" οnclick="myFunction()">点击这里</button>

# 二、JavaScript 使用 #

<script> 标签

如需在 HTML 页面中插入 JavaScript，请使用 <script> 标签。<script> 和 </script> 会告诉 JavaScript 在何处开始和结束。<script> 和 </script> 之间的代码行包含了 JavaScript

<body> 中的 JavaScript

此时，JavaScript 会在页面加载时向 HTML 的 <body> 写文本：

<body>.
    <script>
    document.write("<h1>This is a heading</h1>");
    document.write("<p>This is a paragraph</p>");
    </script>.
    </body>

JavaScript 函数和事件

上面例子中的 JavaScript 语句，会在页面加载时执行。通常，我们需要在某个事件发生时执行代码，比如当用户点击按钮时。如果我们把 JavaScript 代码放入函数中，就可以在事件发生时调用该函数。

<head> 或 <body> 中的 JavaScript

您可以在 HTML 文档中放入不限数量的脚本。脚本可位于 HTML 的 <body> 或 <head> 部分中，或者同时存在于两个部分中。通常的做法是把函数放入 <head> 部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。

<head> 中的 JavaScript 函数

在本例中，我们把一个 JavaScript 函数放置到 HTML 页面的 <head> 部分。

该函数会在点击按钮时被调用：

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

<body> 中的 JavaScript 函数

在本例中，我们把一个 JavaScript 函数放置到 HTML 页面的 <body> 部分。

该函数会在点击按钮时被调用：

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

提示：我们把 JavaScript 放到了页面代码的底部，这样就可以确保在 <p> 元素创建之后再执行脚本。

外部的 JavaScript

也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。

外部 JavaScript 文件的文件扩展名是 .js。

如需使用外部文件，请在 <script> 标签的 "src" 属性中设置该 .js 文件：

<body>
    <h1>My Web Page</h1>
    <p id="demo">A Paragraph.</p>
    <button type="button" οnclick="myFunction()">点击这里</button>
    <p><b>注释：</b>myFunction 保存在名为 "myScript.js" 的外部文件中。</p>
    <script type="text/javascript" src="/js/myScript.js"></script>
    </body>

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

# 三、JavaScript 输出 #

JavaScript 通常用于操作 HTML 元素

操作 HTML 元素

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

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

写到文档输出

下面的例子直接把 <p> 元素写到 HTML 文档输出中：

# 四、JavaScript 注释 #

JavaScript 不会执行注释。我们可以添加注释来对 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 变量有很多种类型，但是现在，我们只关注数字和字符串。

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

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

声明（创建） JavaScript 变量

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

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

var carname;变量声明之后，该变量是空的（它没有值）。

如需向变量赋值，请使用等号：

carname="Volvo";不过，您也可以在声明变量时对其赋值：

var carname="Volvo";

例子：

<p id="demo"></p>
    var carname="Volvo";
    document.getElementById("demo").innerHTML=carname;

一条语句，多个变量

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

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

声明也可横跨多行：

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

# 六、JavaScript 数据类型 #

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

JavaScript 拥有动态类型

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

实例

var x                // x 为 undefined
    var x = 6;           // x 为数字
    var x = "Bill";      // x 为字符串 
    var carname="Bill Gates";//字符串
    var carname='Bill Gates';//字符串

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

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

极大或极小的数字可以通过科学（指数）计数法来书写：

var y=123e5;      // 12300000
    var z=123e-5;     // 0.00123
    var x=true//JavaScript 布尔
    var y=false//JavaScript 布尔
    var cars=new Array();//JavaScript 数组
    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 来清空变量。

实例

cars=null;

person=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 中的对象

在 JavaScript 中，对象是数据（变量），拥有属性和方法。

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

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

属性：

txt.length=5

方法：

txt.indexOf()

txt.replace()

txt.search()

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

创建 JavaScript 对象

JavaScript 中的几乎所有事务都是对象：字符串、数字、数组、日期、函数，等等。

你也可以创建自己的对象。

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

实例

person=new Object();
    person.firstname="Bill";
    person.lastname="Gates";
    person.age=56;
    person.eyecolor="blue";

访问对象的属性和方法 用.

# 八、JavaScript 函数 #

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

JavaScript 函数语法

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

function functionname()
    {
    这里是要执行的代码
    }

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

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

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

调用带参数的函数

function myFunction(var1,var2)
    {
    这里是要执行的代码
    }

实例

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

上面的函数会当按钮被点击时提示 "Welcome Bill Gates, the CEO"。

带有返回值的函数

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

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

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

语法

function myFunction()
    {
    var x=5;
    return x;
    }

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

var myVar=myFunction();

# 九、其他 #

运算符、比较、错误、验证等等。

以上只是学习过程中记录的一些关于Javascript的最基本的内容，后续在学习过程中再继续总结。