javaScrip入门

一、常用单词

1.getElementsByTagName：获取 元素 通过 标签 名字
2.addEventListener：添加 事件 监听器  
3.script：脚本
4.document.write：文档 写入
5.alert：提示 -弹窗
6.onclick：鼠标点击
7.console.log：控制台显示
8.typeof：运算符，关键字
9.prompt：键盘输入
10.undefined ：未定义
11.length：数组长度
12.Array：数组
13.for-in：遍历数组
14.onmouseover：鼠标进入时 /事件
15.parseFloat：字符串转换成浮点数-parseInt：字符串转换成整数
16.isNaN：是否为非数值 /是则为真
17.number：数字
18.boolean：布尔
19.sort：升序
20.break：截断 跳出
21.index：索引
22.floor：向下取整
23.ceil：向上取整
24.round:四舍五入
25.abs：返回绝对值
26.eval：解析字符串并运算
27.max：比较最大值
28.return：返回
29.min：比较最小值
30.random：随机数
31.function：函数
32.onmouseout：鼠标移出事件
33.function：函数（方法)
34.close（）：关闭当前窗口
35.onkeydown：键盘按下事件（前）
36.onkeyup：键盘松开事件
37.onkeypress：键盘按下事件（后）
38.getFullYear（）：年份
39.getMonth（）：月份（0–11）
40.getDate（）：几号
41.getDay（）：星期几（周一至周六）
42.getHours（）：小时（0–23）
43.getMinites（）：分钟
44.getSeconds（）：秒数（0–59）
45.getMilliseconds（）：毫秒数
46.getTime（）：从1970至今的毫秒数
47.Date.now（）：从1970至今的毫秒值
获取元素对象方式:
getElementByld
getElementsByName
gatElementsByTagName
getElementByClassName

JavaScript 可以做什么?

事件可以用于处理表单验证，用户输入，用户行为及浏览器动作:

• 页面加载时触发事件
• 页面关闭时触发事件
• 用户点击按钮执行动作
• 验证用户输入内容的合法性
• 等等 ...

可以使用多种方法来执行 JavaScript 事件代码：

• HTML 事件属性可以直接执行 JavaScript 代码
• HTML 事件属性可以调用 JavaScript 函数
• 你可以为 HTML 元素指定自己的事件处理程序
• 你可以阻止事件的发生。
• 等等 ...

二、JavaScript输出

• 使用 window.alert() 弹出警告框。
• 使用 document.write() 方法将内容写到 HTML 文档中。
• 使用 innerHTML 写入到 HTML 元素。
• 使用 console.log() 写入到浏览器的控制台

 使用window.alert()

window.alert("我是一个弹窗") ； 

写到 HTML 文档

如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖。

这是一个段落

i

写到控制台

如果您的浏览器支持调试，你可以使用 console.log() 方法在浏览器中显示 JavaScript 值。

console.log("去浏览器控制台找我。");

三、 JavaScript 数据类型

数字（Number）可以是整数或者是小数，或者是科学计数(e)

3.14
1001
123e5

 字符串（String） 可以使用单引号或双引号

"字符串"

'字符串'

数组（Array）定义一个数组：

[ 4 , 5 , 6 , 7]

对象（Object） 定义一个对象：

{ name:"John",  age:50, age:18 }

函数（Function）方法定义一个函数：

function num (a, b) { return a * b;}

 四、JavaScript变量

• 变量必须以字母开头
• 变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
• 变量名称对大小写敏感（y 和 Y 是不同的变量）

JavaScript 使用关键字 var 来定义变量， 使用等号来为变量赋值

var x；//创建未赋值默认，undefined
x = 5；

变量是一个名称。字面量是一个值。

一条语句，多个变量

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

var name="Jock", age=30;

一条语句中声明的多个变量不可以同时赋同一个值:

var a,b=1;

a为undefined , b为1； 

五、JavaScript运算符

运算符 = 用于赋值。

var a = 5;

运算符 + 用于加值，和字符串结合可用于拼接。

var  a = "拼接";

var  b= "字符串";

document.write(a+b); //输出：拼接字符串

 算术运算符

JavaScript 赋值运算符

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

给定 x=10 和 y=5，下面的表格解释了赋值运算符：

比较运算符

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

x=5，下面的表格解释了比较运算符：

逻辑运算符

逻辑运算符用于测定变量或值之间的逻辑。 

给定 x=6 以及 y=3，下表解释了逻辑运算符

条件运算符又称三元运算符

语法： var num =(表达式)?value1:value2

//如果变量 age 中的值小于 18，则向变量 voteable 赋值 "年龄太小"，否则赋值 "年龄已达到"。

var flag=(age<18)?"年龄太小":"年龄已达到";

六、注释

单行注释：

我们可以添加注释来对 JavaScript 进行解释，或者提高代码的可读性。单行注释以 // 开头。

// 输出标题：

document.write("欢迎来到我的主页");

 多行注释：

多行注释以 /* 开始，以 */ 结尾。

/*

这是多行注释

*/

document.write("欢迎来到我的主页");

七、 JavaScript 条件语句

• if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
• if...else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
• if...else if....else 语句- 使用该语句来选择多个代码块之一来执行
• switch 语句 - 使用该语句来选择多个代码块之一来执行

if 语句

只有当指定条件为 true 时，该语句才会执行代码。

if (ture/ false)
{
    当条件为 true 时执行的代码
}

//请使用小写的 if。使用大写字母（IF）会生成 JavaScript 错误！

if...else 语句

请使用 if....else 语句在条件为 true 时执行代码，在条件为 false 时执行其他代码。

if (条件)
{
    当条件为 true 时执行的代码
}
else
{
    当条件不为 true 时执行的代码
}

 

if...else if...else 语句

使用 if....else if...else 语句来选择多个代码块之一来执行。

if (条件)
{
    当条件 1 为 true 时执行的代码
}
else if (条件)
{
    当条件 2 为 true 时执行的代码
}
else
{
  当条件 1 和 条件 2 都不为 true 时执行的代码
}

JavaScript switch 语句

请使用 switch 语句来选择要执行的多个代码块之一。

switch(n) {

        case 1:

                执行代码块 1 break;

        case 2:

                 执行代码块 2 break;

        default:

                与 case 1 和 case 2 不同时执行的代码

}

 JavaScript break 和 continue 语句

break 语句用于跳出循环。

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

break 和 continue 语句仅仅是能够跳出代码块的语句。 

八、JavaScript 循环

不同类型的循环

JavaScript 支持不同类型的循环：

• for - 循环代码块一定的次数
• for/in - 循环遍历对象的属性
• while - 当指定的条件为 true 时循环指定的代码块
• do/while - 同样当指定的条件为 true 时循环指定的代码块

for循环：

语法：

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

语句 1 初始化开始前执行

语句 2 定义运行循环条件

语句 3 迭代部分

for (var i=0; i<5; i++) {

        x=x + "该数字为 " + i + "
";

}

For/In 循环

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

var person={fname:"Bill",lname:"Gates",age:56}; 
 
for (x in person)  // x 为属性名
{
    txt=txt + person[x];
}

 

while 循环

while 循环会在指定条件为真时循环执行代码块。

语法：

while (条件)
{
    需要执行的代码

}

while (i<5)
{
    x=x + "The number is " + i + "
";
    i++;
}

do/while 循环

do/while 循环是 while 循环的变体。该循环会在检查条件是否为真之前执行一次代码块，然后如果条件为真的话，就会重复这个循环。

do
{
    需要执行的代码
}
while (条件);

do
{
    x=x + "The number is " + i + "
";
    i++;
}
while (i<5);

 九、JavaScript 函数（方法）

函数语法

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

function functionname()
{
    // 执行代码
}

 

调用带参数的函数

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

function myFunction(var1,var2)
{
代码
}

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

点击这个按钮，来调用带参数的函数。
<button onclick="myFunction('Harry Potter','Wizard')">点击这里button>
<script>
function myFunction(name,job){
    alert("Welcome " + name + ", the " + job);
}
script>

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

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

JavaScript 变量的生存期

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

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

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

调用 JavaScript 函数：

作为一个函数调用

function myFunction(a, b) {
    return a * b;
}
myFunction(10, 2);           // myFunction(10, 2) 返回 20

以上函数不属于任何对象。但是在 JavaScript 中它始终是默认的全局对象。

在 HTML 中默认的全局对象是 HTML 页面本身，所以函数是属于 HTML 页面。

这是调用 JavaScript 函数常用的方法， 但不是良好的编程习惯
全局变量，方法或函数容易造成命名冲突的bug。

全局对象

当函数没有被自身的对象调用时 this 的值就会变成全局对象。

在 web 浏览器中全局对象是浏览器窗口（window 对象）。

该实例返回 this 的值是 window 对象:

function myFunction() {
    return this;
}
myFunction();                // 返回 window 对象

函数作为全局对象调用，会使 this 的值成为全局对象。
使用 window 对象作为一个变量容易造成程序崩溃。

函数作为方法调用

在 JavaScript 中你可以将函数定义为对象的方法。

以下实例创建了一个对象 (myObject), 对象有两个属性 (firstName 和 lastName), 及一个方法 (fullName):

var myObject = {
    firstName:"John",
    lastName: "Doe",
    fullName: function () {
        return this.firstName + " " + this.lastName;
    }
}
myObject.fullName();         // 返回 "John Doe"

fullName 方法是一个函数。函数属于对象。 myObject 是函数的所有者。

this对象，拥有 JavaScript 代码。实例中 this 的值为 myObject 对象。

测试以下！修改 fullName 方法并返回 this 值:

var myObject = {
    firstName:"John",
    lastName: "Doe",
    fullName: function () {
        return this;
    }
}
myObject.fullName();          // 返回 [object Object] (所有者对象)

 函数作为对象方法调用，会使得 this 的值成为对象本身。

使用构造函数调用函数

如果函数调用前使用了 new 关键字, 则是调用了构造函数。

这看起来就像创建了新的函数，但实际上 JavaScript 函数是重新创建的对象：

// 构造函数:
function myFunction(arg1, arg2) {
    this.firstName = arg1;
    this.lastName  = arg2;
}
 
// This    creates a new object
var x = new myFunction("John","Doe");
x.firstName;                             // 返回 "John"

构造函数的调用会创建一个新的对象。新对象会继承构造函数的属性和方法。

构造函数中 this 关键字没有任何的值。
this 的值在函数调用实例化对象(new object)时创建。

作为函数方法调用函数

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

call() 和 apply() 是预定义的函数方法。 两个方法可用于调用函数，两个方法的第一个参数必须是对象本身。

function myFunction(a, b) {
    return a * b;
}
myObject = myFunction.call(myObject, 10, 2);     // 返回 20

function myFunction(a, b) {
    return a * b;
}
myArray = [10, 2];
myObject = myFunction.apply(myObject, myArray);  // 返回 20

 两者的区别在于第二个参数： apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入，而call则作为call的参数传入（从第二个参数开始）

 通过 call() 或 apply() 方法你可以设置 this 的值, 且作为已存在对象的新方法调用。

十、JavaScript 事件

HTML 事件是发生在 HTML 元素上的事情。

当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件

HTML 事件

HTML 事件可以是浏览器行为，也可以是用户行为。

以下是 HTML 事件的实例：

• HTML 页面完成加载
• HTML input 字段改变时
• HTML 按钮被点击

常见的HTML事件

下面是一些常见的HTML事件的列表:

 十一、字符串

字符串长度

可以使用内置属性 length 来计算字符串的长度：

var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length;

特殊字符

反斜杠是一个转义字符。 转义字符将特殊字符转换为字符串字符：

转义字符 (\) 可以用于转义撇号，换行，引号，等其他特殊字符。

下表中列举了在字符串中可以使用转义字符转义的特殊字符：

字符串可以是对象

通常， JavaScript 字符串是原始值，可以使用字符创建： var firstName = "John"

但我们也可以使用 new 关键字将字符串定义为一个对象： var firstName = new String("John")

var x = "John";
var y = new String("John");
typeof x // 返回 String
typeof y // 返回 Object

不要创建 String 对象。它会拖慢执行速度，并可能产生其他副作用。

字符串属性：

字符串方法：