JavaScript基础学习宝典（辅助学习）

简介

JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备

特点

1. 简单性
2. 动态性
3. 跨平台性
4. 安全性

使用方式

• 内部js文件
  • 直接使用script标签添加到HTML文档中
• 外部js文件
  • 避免内部文件代码冗余，以*.js作为后缀名保存
  • 使用 ，src属性链接到js文件，类似之前的css链接式
• 直接html标签
  • 简短的js代码实现一个简单的页面效果时，可以直接写在里面
  • 案例

  <input name="btn" type="button" value="弹出消息框" onclick="javascript:alert('欢迎你!')" />
  

注意

无论使用script标签还是直接引用js文件，浏览器都会按照script标签出现的先后顺序依次解析，如第二个js必须在第一个js解析之后才有效；如果script标签放在head标签中，那么意味必须等到全部js代码下载、解析、执行后才呈现网页内容。对于包含JS的页面而言，浏览器会出现延迟进而导致页面空白，因而一般将script标签放在body中，并且放在页面内容的后面

应用

文档写入

document.write("字符串");

在括号内放置的为字符串类型时，要加上双引号
警告

alert("警告信息");

会有对应的黄色提示图标
提示

prompt("提示信息","输入框中的默认值")

注意
可以用变量来接收prompt方法传递过来的值

变量

变量类似于一个存储信息的"容器"，它的作用是通过变量名简单快速的找到它存储的数据

组成（三要素）

变量名 变量类型 变量值

语法

如下

数据类型 变量名 = 值

声明多个类型相同的变量并赋值

方式一

var 变量名1，变量名2……变量名N = 值;

每个变量名之间用逗号隔开，其中number1,number2没有初始值，类型属于undefined类型
方式二

var 变量名1=变量名2……=变量名N = 值;

每个变量名之间用等于号连接一般在多个变量的值相同的情况下使用

变量名规范

• 首字母小写
• 驼峰命名
• 开头必须为字母下划线”_”或者”$”为开头
• 关键字和保留字不能用做变量名
• 命名时，要做到见名知意
  注意
  JS区分大小写：如Count count COUNT是三个不同的变量

数据类型

6类

• undefined 未定义类型
  如果说变量声明但没有为其赋值，则类型为undefined
• object（null和数组也列入object类型）对象类型
• number数字类型
• boolean布尔类型
  只有2个值：true 和 false
• string 字符串类型
  在JS中，字符串是一组被引号（单引号或双引号）括起来的文本
  字符串对象长度:字符串对象.length
  字符串对象的方法
  toLowerCase():所有字符串中的英文转小写
  toUpperCase():所有字符串中的英文转大写
  charAt(index):找到指定位置的字符
  下标从0开始，到字符串长度-1结束
  indexOf(指定字符)返回从前往后所找到的第一个字符下标
  lastlndexOf(指定字符)返回从后往前所找到的第一个字符下标
  indexOf(指定字符，指定下标)从指定下标开始，查找对应的字符下标
  如果indexOf. lastlndexOf均找不到指定的值，则返回-1
  substring(index1,index2)
  返回位于指定索引index1和index2之间的字符串，并且包括索引index1对应的字符， 不包括索引index2对应的字符
  substring(index)
  返回从index下标开始，到字符串结尾的内容
  null 空
  注意
  区分undefined、null、Object
  • 用户自定义的初始值，如var dog = null;此时是将dog当做Object处理的
  • 若用户没有为变量赋值，如var dog,此时默认为null值，但类型未定义,typeOf函数返回类型为undefined

运算符

算术运算符

• +加
• -减
• *乘
• / 除
• % 取余（相除后的余数）

赋值运算符

• =

比较运算符

• && 与 :一个为真，一个为假，结果为假
• ||或:一个为真， 一个为假，结果为真
• ! 非（将布尔类型的值颠倒，如true变false）

数组

概念

和Java中的数组相同，存储多个具有相同数据类型的一个或者多个值的集合，下标从0开始

语法

var 数组名 = new Array(size);
// size为整数

声明赋值的3种方式

第一种:创建后直接赋值

var fruit = new Array(1,2,3,4);

第二种:根据下标赋值

var fruit = new Array(4);
fruit[0] = 1;

第三种

var fruit = [1,2,3,4];

访问数组元素

数组名[下标]

属性

长度：length

方法

join

把数组中的元素按指定间隔符间隔，返回一个对应的字符串

案例

document.write(array3.join.(*)+"<br/>");

结果为

原数组:1,3,13,21

新数组:1*3*13*21

concat

不会改变原数组中存的内容，拼接另外一个数组里的内容

案例

var a= [1, 2];
var b = [3, 4,5];
var c = a.concat(b);
document.write(c);

结果为

1,2,3,4,5 

注意：
如果需要拼接多个数组在var c = a.concat(b)的b后面添加上逗号，如

var c = a.concat(b,d,e,f……)

sort

对数组进行排序，如果不提供sort排序方法的排序比较函数，那么会按照如下方式进行比较

 // 原数组
 var array3 = [1,11,5,2,3];
 array3.sort();
 console.log(array3)
 // 排序后
 var array3[1,11,2,3,5]

用户可以自定义一个排序的函数此，处使用升序作为案例

	// 原数组
    var array3 = [1, 11, 5, 2, 3];
    array3.sort(asc);
    console.log(array3)

    function asc(a,b) {
        return a-b;
    }

结果为

push

此方法可向数组的末尾添加一个或多个元素，并返回新的长度，如果要在起始位置插入可使用unshift方法

案例

 var fruits = [1, 2, 3, 4];
  fruits.push(5);
  console.log(fruits);
  结果为
  	0: 1
	1: 2
	2: 3
	3: 4
	4: 5

逻辑控制语句

选择结构

if选择器

if 语句指定了在条件为 true 时执行的代码块

语法

if (表达式) {
    // 如果表达式为 true 执行该代码块
}

if-else

if 语句指定了在条件为 true 时执行的代码块，else语句则是指定了在条件为false时执行的代码块

语法

if (表达式) {
    // 表达式为true执行该代码块
} else {
    // 如果表达式为false执行该代码块
}

if-else if-else

if-else if-else语句在第一个条件为false时指定了新的条件

语法

if (表达式1) {
     // 表达式1为true执行该代码块
} else if (表达式2) {
    // 表达式2为true时执行该代码块
} else {
    // 如果表达式都为false
}

switch

对于一些明确的值（常量）的比较，使用多重if选择结构显得代码累赘，使用switch选择结构进行替换，他通常与 break 或 default 关键字一起使用（两者都可选）

switch (表达式) {
        case 常量1:
            // 执行语句
            break;
        case 常量2:
            // 执行语句
            break;
            …………
        case 常量N:
            // 执行语句
            break;
        default:
            // 执行语句
            break;
    }

在这里解释一下 break关键字和 default 关键字
break 关键字用于跳出switch代码块。会终止switch代码块的执行。 如果忽略该关键字，swith 语句就会出现穿透。
default 关键字 来规定匹配常量不存在时做的事情。 default 关键字在 switch 语句中只能出现一次。虽然是可选参数，但是建议都使用该参数，在不是我们期望的情况下，可以使用它输出信息。

注意

逻辑控制语句均与Java相同，switch结构也是一样的，分支不写break会出现穿透

循环结构

for循环

语法

for (变量1; 表达式2; 更新语句3)
{
    执行代码块4
}

执行顺序为：变量 --》 表达式  --》执行代码块 --》更新语句

案例

// 写法1
for (var i=0; i<5; i++)
{
	  document.write("该数字为 "+i+ "<br>"); 
}
// 写法2（可以在循环之前定义变量，之后直接调用变量名）
var i = 0;
for (i; i<5; i++)
{
	  document.write("该数字为 "+i+ "<br>"); 
}

while循环

语法

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

案例

	var i = 0;
    while (i < 5) {
        document.write("The number is " + i + "<br/>");
        i++;
    }

do-while循环

循环至少执行一次，即便条件为 false，因为代码块是在条件语句判断前执行

语法

do {
    执行代码
} while (表达式);

案例

  var i = 0;
    do {
        document.write("数字为 " + i + "<br>");
        i++;
    } while (i < 5);

for-in循环

循环中的代码每执行一次，就会对数组的元素或者对象的属性进行一次操作

语法

for(变量 in 对象)｛｝

案例

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

跳转语句

break
continue

函数

概念

程序的基本单元，是完成特定任务的代码语句块

特征

1. 命名的代码块(有方法名)
2. 实现一定的功能
3. 可以有返回值
4. 可以有参数

分类

系统函数

parseInt

将字符串类型转换为整数类型

语法

parseInt(string)

parseFloat

指定字符串中的首个字符是否是数字。如果是，则对字符串进行解析，直到到达数字的末端为止，然后以数字返回该数字，而不是作为字符串

语法

parseFloat(string)

isNaN()

如果参数值为 NaN 或字符串、对象、undefined等非数字值则返回 true, 否则返回 false

案例

document.write(isNaN(123)+ "<br>");
document.write(isNaN("Hello")+ "<br>");
结果为
false
true 

prompt

用于获取用户输入的信息

window.prompt("提示","默认输入信息");

案例

	var person=prompt("请输入你的名字","Harry Potter");
	if (person!=null && person!=""){
		document.write("你好 " + person + "! ");
	}

注意

window对象可以不用带上直接使用prompt()方法

alert

用于显示带有一条指定消息和一个 确认 按钮的警告框

语法

alert(警告信息)

注意

parseFloat，parseInt只有字符串中的第一个数字会被返回， 开头和结尾的空格是允许的，如果字符串的第一个字符不能被转换为数字，系统函数都会返回NAN