Written by 小小厨师
on August 12, 2015

JavaScript基础学习笔记（一）

JS用法

根据 http://www.runoob.com/ 进行整理

标签使用

<script>code</script>标识js的起始和结束，中间包含js代码；

外部JS

JS脚本一般集中放置在<head>或<body>底部，便于管理。外部JS使用.js作为扩展名，并在<script>标签的属性中设置JS文件。eg：<script src= "script.js"></script>。

外部脚本不能包含<script>标签

JS输出

####操作HTML元素在HTML中的元素用”id”属性标明后，可在<script>中使用document.getElementById(id)方法来访问。eg: <script> document.getElementById("demo").innerHTML = "段落已修改。"; </script>

写到HTML文档

可用<document.write()>将内容输出到文档中，如果在文档已加载完成后执行此代码，将覆盖原有HTML页面的内容。

写到控制台

可用<console.log()>将内容写到控制台，用于调试。

JS语法

JS字面量

字面量，常量，变量关系

var a；// a为变量
const int b = 10; // b 为常量，10为字面量
string str = "hello"; // str 为变量，hello为字面量

数字字面量（Number）：整数，小数，科学计数。3.14，1001，123e5；

字符串字面量（String）：使用单引号或双引号:"Andrew",'Lars';

表达式字面量用于计算：5 + 6，1 * 2……；

数组（Array）字面量定义一个数组：[40,100,1]；

对象（Object）字面量定义一个对象：{firstName:"Andrew",lastName:"Shen"};

函数（Function）字面量定义一个函数：function myFunction(a,b){return a * b}

注释

使用//进行单行注释使用 /* code */ 进行多行注释

JS函数

JS语句可以卸载函数内，函数可以重复引用；引用一个函数=电泳函数

JS对大小写敏感

JS语句

语句标识符

语句	描述
break	用于跳出循环
catch	语句块，在 try 语句块执行出错时执行 catch 语句块。
continue	跳过循环中的一个迭代。
do	while \| 执行一个语句块，在条件语句为 true 时继续执行该语句块。
for	在条件语句为 true 时，可以将代码块执行指定的次数。
for	in \| 用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）。
function	定义一个函数
if	else \| 用于基于不同的条件来执行不同的动作。
return	退出函数
switch	用于基于不同的条件来执行不同的动作。
throw	抛出（生成）错误。
try	实现错误处理，与 catch 一同使用。
var	声明一个变量。
while	当条件语句为 true 时，执行语句块。

对代码进行折行

在文本字符串中可使用\对代码进行换行。

JS变量

变量是用于存储信息的容器

变量规则

变量必须已字母开头。
变量能以$和_开头。
变量名称对大小写敏感。

变量的声明和创建

使用var来声明变量。声明时可以对其赋值。如果未声明直接创建则变量为全局变量：eg:name = Andrew,nama为全局变量.

JS数据类型

字符串（String）
数字（Number）
布尔（Boolean）
数组（Array）
对象（Object）
空（Null）
未定义（undefined）

JS拥有动态类型！！

JS变量可用作不同的类型，厉害。

var x;               // x 为 undefined
var x = 5;           // 现在 x 为数字
var x = "John";      // 现在 x 为字符串

String

字符串可以是引号中的任意文本，可使用''或""；

Number

JS只有一种数据类型，Number全搞定。

Boolean

布尔只有两个值，true 和 false

Array

array创建:

var array = new Array();
array[0] = "Andrew";
array[1] = "Lars";

var array = new Array("Andrew","Lars");

var array = ["Andrew","Lars"];

Object

JS对象是拥有属性和方法的数据。对象有花括号分隔，内部以键值对（name:value）的形式定义，属性由逗号分隔。 var person = {firstName:"Andrew", lastName:"Shen"};

寻址方式：name = person.lastName; 或 name = person["lastName"]

方法创建：methodName : funciton() {code}

对象方法调用,通过添加（）调用 objectName.methodName()’

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;

JS函数

函数的语法

function functionName(){
	code lines;
}

JS大小写敏感，function一定为小写。

带参函数

声明：

function myFunction(var1,var2)
{
代码
}

调用：myFunction(args1,args2)

带有返回值的函数

直接使用return即可以实现

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

JS作用域

局部作用域

变量在函数内声明：局部变量。只能在函数内部访问。局部变量在函数执行完毕后销毁。

全局变量

变量在函数外定义，或者在函数内没有声明，则为全局变量。在网页中所有脚本和函数均可使用。全局变量在页面关闭后销毁。

HTML中的全局变量

HTML中，全局变量是window对象，所有数据变量都属于window对象。

JS事件

HTML事件

HTML元素可以添加事件属性，使用JS代码来添加HTML元素。单引号：<some-HTML-element some-event='some JavaScript'>

双引号：<some-HTML-element some-event="some JavaScript">

eg:<button onclick='this.innerHTML=Date()'>The time is?</button>,this改变自身元素内容。

常见HTML事件

事件 | 描述

onchange	HT元素改变
onclick	用户点击HTML元素
onmouseover	用户在一个HTML元素上移动鼠标
onmouseoout	用户从一个HTML元素上移开鼠标
onkeydown	用户按下键盘按键
onload	浏览器已完成页面的加载

JS字符串

用于存储和处理文本。不要创建String对象，会拖慢执行速度，可能产生其他副作用。

特殊字符转义

代码 | 输出

——
'	单引号
"	双引号
\	反斜杠
\n	换行
\r	回车
\t	tab(制表符)
\b	退格符
\f	换页符

字符串属性和方法

属性：

属性	描述
constructor	返回创建字符串属性属性的函数
length	返回字符串的长度
prototype	允许您向对象添加属性和方法

方法

方法	描述
charAt()	返回指定索引位置的字符
charCodeAt()	返回指定索引位置字符的 Unicode 值
concat()	连接两个或多个字符串，返回连接后的字符串
fromCharCode()	将字符转换为 Unicode 值
indexOf()	返回字符串中检索指定字符第一次出现的位置
lastIndexOf()	返回字符串中检索指定字符最后一次出现的位置
localeCompare()	用本地特定的顺序来比较两个字符串
match()	找到一个或多个正则表达式的匹配
replace()	替换与正则表达式匹配的子串
search()	检索与正则表达式相匹配的值
slice()	提取字符串的片断，并在新的字符串中返回被提取的部分
split()	把字符串分割为子字符串数组
substr()	从起始索引号提取字符串中指定数目的字符
substring()	提取字符串中两个指定的索引号之间的字符
toLocaleLowerCase()	根据主机的语言环境把字符串转换为小写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLocaleUpperCase()	根据主机的语言环境把字符串转换为大写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLowerCase()	把字符串转换为小写
toString()	返回字符串对象值
toUpperCase()	把字符串转换为大写
trim()	移除字符串首尾空白
valueOf()	返回某个字符串对象的原始值

JS运算符

JS运算符与一般编程语言相似。

+运算符

+运算符用于把文本值或字符串变量加起来\连接起来。

可对字符串和数字进行加法运算：z = "hello" + 5,z = hello5

比较运算符，条件语句，循环语句

与一般编程语言相似。

typeof操作符

检测变量的数据类型。

用typeof检测null返回的是objet。null是一个只有一个值的特殊类型。标识一个空对象引用

typeof一个没有值的变量会返回undefined，undefined是一个没有设置值的变量

JS类型转换

Number()转换为数字，String()转换为字符串，Boolean()转换为布尔值。

5种数据类型：String，Number，Boolean, Object, Function.

3种对象类型：Object，Date，Array

2种不包含任何值的数据类型：Null,Undefined

自动转换类型

当JS尝试操作一个『错误』的数据类型时，会自动转换为『正确』的数据类型。

当你尝试输出一个对象或变量时，JS会自动调用变量的toString()方法。

JS正则表达式（regex\regexp\RE）

正则表达式是由一个字符序列形成的搜索模式。

当你在文本中搜索数据是，你可以用搜索模式来描述你要查询的内容。

正则表达式可以是一个简单的字符，或一个更复杂的模式。

正则表达式可用于所有文本搜索和文本替换的操作。

语法

/pattern/modifiers;

eg:var patt = /w3cschool/i

####使用字符串方法 JS中，正则表达式常用于字符串方法：search(),replace().

eg:

var str = "Visit w3cschool";
var n = str.search(/w3cschool/i);

var str = "Visit Microsoft!";
var res = str.replace(/microsoft/i, "w3cschool"); // 不区分大小写

正则表达式修饰符

修饰符可以在全局搜索中不区分大小写:

修饰符	描述
i	执行对大小写不敏感的匹配。
g	执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m	执行多行匹配。

####正则表达式模式方括号用于查找某个范围内的字符：

表达式	描述
[abc]	查找方括号之间的任何字符。
[0-9]	查找任何从 0 至 9 的数字。
(x	y)	查找任何以	分隔的选项。

元字符是拥有特殊含义的字符：

元字符	描述
\d	查找数字。
\s	查找空白字符。
\b	匹配单词边界。
\uxxxx	查找以十六进制数 xxxx 规定的 Unicode 字符。

量词:

量词	描述
n+	匹配任何包含至少一个 n 的字符串。
n*	匹配任何包含零个或多个 n 的字符串。
n?	匹配任何包含零个或一个 n 的字符串。

test()

test()是一个正则表达式。

test()方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回true，否则返回false.

exec()

exec()方法是一个正则表达式。

exec() 方法用于检索字符串中的正则表达式的匹配。

该函数返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。

JS表单验证

必填项目

	<!DOCTYPE html>
	<html>
	<head>
	<script>
	function validateForm()
	{
	var x=document.forms["myForm"]["fname"].value;
	if (x==null || x=="")
	  {
	  alert("姓必须填写");
	  return false;
	  }
	}
	</script>
	</head>
	<body>
	<form name="myForm" action="demo-form.php" onsubmit="return validateForm()" method="post">
	姓: <input type="text" name="fname">
	<input type="submit" value="提交">
	</form>
	</body>
	</html>

Email验证

	<!DOCTYPE html>
	<html>
	<head>
	<script>
	function validateForm()
	{
	var x=document.forms["myForm"]["email"].value;
	var atpos=x.indexOf("@");
	var dotpos=x.lastIndexOf(".");
	if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
	  {
	  alert("Not a valid e-mail address");
	  return false;
	  }
	}
	</script>
	</head>
	<body>
	<form name="myForm" action="demo-form.php" onsubmit="return validateForm();" method="post">
	Email: <input type="text" name="email">
	<input type="submit" value="Submit">
	</form>
	</body>
	</html>

void

void(0)

void 是 JavaScript 中非常重要的关键字，该操作符指定要计算一个表达式但是不返回值。

void(0) 计算为 0，但 Javascript 上没有任何效果。

href=”#”与href=”javascript:void(0)”的区别

#包含了一个位置信息，默认的锚是#top 也就是网页的上端。

而javascript:void(0), 仅仅表示一个死链接。

在页面很长的时候会使用 # 来定位页面的具体位置，格式为：# + id。

如果你要定义一个死链接请使用 javascript:void(0) 。

← → Top