前端三剑客之 JavaScript(基础知识)

JavaScript

document.write() 向文档输出写内容

<script>
    document.write("<p>个人第一段 JavaScript</p>");
    </script>

分号 ；

一般咱们在每条可执行的语句结尾添加分号。
    使用分号的另外一用处是在一行中编写多条语句。

大小写：

JavaScript是区分大小写的

折行

\

注释

// 行注释
    /*  段注释 */

变量

声明（建立）： var a   
    声明的变量不传值，默认的为 无 ： undefined 
    
    变量必须以字母开头
    变量也能以 $ 和 _ 符号开头（不过咱们不推荐这么作）
    变量名称对大小写敏感（y 和 Y 是不一样的变量）
    
    一条语句，多个变量 ：
        var name="Gates", age=56, job="CEO";
    
    声明也可横跨多行：
        var name="Gates",
            age=56,
            job="CEO";

数据类型

经常使用数据类型

经常使用数据类型
        var x                // x 为 undefined
        var x = 6;           // x 为数字
        var x1=34.00;        // 使用小数点来写的数字类型，也能够不写
        var x = "Bill";      // x 为字符串
    
    极大或极小的数字能够经过科学（指数）计数法来书写
        var y=123e5;      // 12300000
        var z=123e-5;     // 0.00123
    
    布尔，区别于Python，true和false都是小写。
        var x=true
        var y=false
        
    数组  须要 new Array()来定义
        var cars=new Array();
            cars[0]="Audi";
            cars[1]="BMW";
            cars[2]="Volvo";
        或 var cars=["Audi","BMW","Volvo"];
        或 var cars=new Array("Audi","BMW","Volvo");
    
    对象（和python中的类似）  对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔
        var person={firstname:"Bill", lastname:"Gates", id:5566};
        
        对象属性有两种寻址方式：
        name=person.lastname;
        name=person["lastname"];

    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 变量均为对象。当您声明一个变量时，就建立了一个新的对象。

字符串(String)

经常使用方法：

方法	说明
.length	返回长度
.trim()	移除空白
.trimLeft()	移除左边的空白
.trimRight()	移除右边的空白
.charAt(n)	返回第n个字符
.concat(value, ...)	拼接
.indexOf(substring, start)	子序列位置
.substring(from, to)	根据索引获取子序列
.slice(start, end)	切片
.toLowerCase()	小写
.toUpperCase()	大写
.split(delimiter, limit)	分割

对象(Object)

经常使用方法：

方法	说明
.length	数组的大小
.push(ele)	尾部追加元素
.pop()	获取尾部的元素
.unshift(ele)	头部插入元素
.shift()	头部移除元素
.slice(start, end)	切片
.reverse()	反转
.join(seq)	将数组元素链接成字符串
.concat(val, ...)	链接数组
.sort()	排序
.forEach()	将数组的每一个元素传递给回调函数
.splice()	删除元素，并向数组添加新元素。
.map()	返回一个数组元素调用函数处理后的值的新数组

forEach()

语法：

forEach(function(currentValue, index, arr), thisValue)

参数：

参数	描述
function(currentValue, index, arr)	必需。 数组中每一个元素须要调用的函数。 函数参数:参数描述currentValue必需。当前元素index可选。当前元素的索引值。arr可选。当前元素所属的数组对象。
thisValue	可选。传递给函数的值通常用 "this" 值。 若是这个参数为空， "undefined" 会传递给 "this" 值

splice()

语法：

splice(index,howmany,item1,.....,itemX)

参数：

参数	描述
index	必需。规定从何处添加/删除元素。 该参数是开始插入和（或）删除的数组元素的下标，必须是数字。
howmany	必需。规定应该删除多少元素。必须是数字，但能够是 "0"。 若是未规定此参数，则删除从 index 开始到原数组结尾的全部元素。
item1, ..., itemX	可选。要添加到数组的新元素

map()

语法：

map(function(currentValue,index,arr), thisValue)

参数：

参数	描述
function(currentValue, index,arr)	必须。函数，数组中的每一个元素都会执行这个函数 函数参数: 参数描述currentValue必须。当前元素的值index可选。当期元素的索引值arr可选。当期元素属于的数组对象
thisValue	可选。对象做为该执行回调时使用，传递给函数，用做 "this" 的值。 若是省略了 thisValue ，"this" 的值为 "undefined"

对象

person=new Object();

    person.firstname="Bill";

    person.lastname="Gates";

    person.age=56;

    person.eyecolor="blue";


属性和方法

    访问对象属性的语法是：

        person.firstname

    访问对象方法的语法是：

        objectName.methodName()

函数

JavaScript中的函数和Python中的很是相似，只是定义方式有点区别。

// 普通函数定义
function f1() {
  console.log("Hello world!");
}

// 带参数的函数
function f2(a, b) {
  console.log(arguments);  // 内置的arguments对象
  console.log(arguments.length);
  console.log(a, b);
}

// 带返回值的函数
function sum(a, b){
  return a + b;
}
sum(1, 2);  // 调用函数

// 匿名函数方式
var sum = function(a, b){
  return a + b;
}
sum(1, 2);

// 当即执行函数 书写当即执行的函数，首先先写两个括号()()这样防止书写混乱
(function(a, b){
  return a + b;
})(1, 2);

补充：

ES6中容许使用“箭头”（=>）定义函数。

var f = v => v;
// 等同于
var f = function(v){
  return v;
}

若是箭头函数不须要参数或须要多个参数，就是用圆括号表明参数部分：

var f = () => 5;
// 等同于
var f = function(){return 5};

var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2){
  return num1 + num2;  //这里的return只能返回一个值，若是想返回多个值须要本身手动给他们包一个数组或对象中
}

函数中的arguments参数

function add(a,b){
  console.log(a+b);
  console.log(arguments.length);
　console.log(arguments[0]);//arguments至关于将出传入的参数所有包含，这里取得就是第一个元素1
}

add(1,2)

Date对象

建立Date对象

//方法1：不指定参数
var d1 = new Date();
console.log(d1.toLocaleString());
//方法2：参数为日期字符串
var d2 = new Date("2004/3/20 11:12");
console.log(d2.toLocaleString());
var d3 = new Date("04/03/20 11:12");
console.log(d3.toLocaleString());
//方法3：参数为毫秒数
var d3 = new Date(5000);
console.log(d3.toLocaleString());
console.log(d3.toUTCString());

//方法4：参数为年月日小时分钟秒毫秒
var d4 = new Date(2004,2,20,11,12,0,300);
console.log(d4.toLocaleString());  //毫秒并不直接显示

Date对象的方法：

var d = new Date(); 
//getDate()                 获取日
//getDay ()                 获取星期
//getMonth ()               获取月（0-11）
//getFullYear ()            获取完全年份
//getYear ()                获取年
//getHours ()               获取小时
//getMinutes ()             获取分钟
//getSeconds ()             获取秒
//getMilliseconds ()        获取毫秒
//getTime ()                返回累计毫秒数(从1970/1/1午夜)

JSON对象

var str1 = '{"name": "Alex", "age": 18}';
var obj1 = {"name": "Alex", "age": 18};
// JSON字符串转换成对象
var obj = JSON.parse(str1); 
// 对象转换成JSON字符串
var str = JSON.stringify(obj1);

运算符

算术运算符

运算符	描述	例子	结果
+	加	x=y+2	x=7
-	减	x=y-2	x=3
*	乘	x=y*2	x=10
/	除	x=y/2	x=2.5
%	求余数 (保留整数)	x=y%2	x=1
++	累加	x=++y	x=6
--	递减	x=--y	x=4

赋值运算符

运算符	例子	等价于	结果
=	x=y		x=5
+=	x+=y	x=x+y	x=15
-=	x-=y	x=x-y	x=5
*=	x*=y	x=x*y	x=50
/=	x/=y	x=x/y	x=2
%=	x%=y	x=x%y	x=0

比较运算符

运算符	描述	例子
==	等于	x==8 为 false
===	全等（值和类型）	x===5 为 true；x==="5" 为 false
!=	不等于	x!=8 为 true
>	大于	x>8 为 false
<	小于	x<8 为 true
>=	大于或等于	x>=8 为 false
<=	小于或等于	x<=8 为 true

逻辑运算符

运算符	描述	例子
&&	and	(x < 10 && y > 1) 为 true
||	or	(x==5 || y==5) 为 false
!	not	!(x==y) 为 true

流程控制

• if-else

var a = 10;
if (a > 5){
  console.log("yes");
}else {
  console.log("no");
}

• if-else if-else

var a = 10;
if (a > 5){
  console.log("a > 5");
}else if (a < 5) {
  console.log("a < 5");
}else {
  console.log("a = 5");
}

• switch

var day = new Date().getDay();
switch (day) {
  case 0:
  console.log("Sunday");
  break;
  case 1:
  console.log("Monday");
  break;
default:
  console.log("...")
}

switch中的case子句一般都会加break语句，不然程序会继续执行后续case中的语句。

• for

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

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

        语句 1 在循环（代码块）开始前执行
        语句 2 定义运行循环（代码块）的条件
        语句 3 在循环（代码块）已被执行以后执行
    实例：
        for (var i=0;i<cars.length;i++)
        {
        document.write(cars[i] + "<br>");
        }
for/in 循环
    实例：
        var person={fname:"John",lname:"Doe",age:25};

        for (x in person)
          {
          txt=txt + person[x];
          }

• while

语法：
    while (条件)
  {
  须要执行的代码
  }
实例：
    while (i<5)
      {
      x=x + "The number is " + i + "<br>";
      i++;
      }

do/while 循环
语法：
    do
  {
  须要执行的代码
  }
    while (条件);
实例：
    do
      {
      x=x + "The number is " + i + "<br>";
      i++;
      }
    while (i<5);

• 三元运算

var a = 1;
var b = 2;
var c = a > b ? a : b
//这里的三元运算顺序是先写判断条件a>b再写条件成立返回的值为a,条件不成立返回的值为b;三元运算能够嵌套使用；
var a=10,b=20;
var x=a>b ?a:(b=="20")?a:b;
        x
10

测试和捕捉异常

try
  {
  //在这里运行代码
  }
catch(err)
  {
  //在这里处理错误
  }

表单验证

被 JavaScript 验证的这些典型的表单数据有：
    用户是否已填写表单中的必填项目？
    用户输入的邮件地址是否合法？
    用户是否已输入合法的日期？
    用户是否在数据域 (numeric field) 中输入了文本？

必填（或必选）项目

<html>
<head>
<script type="text/javascript">

function validate_required(field,alerttxt)
{
with (field)
  {
  if (value==null||value=="")
    {alert(alerttxt);return false}
  else {return true}
  }
}

function validate_form(thisform)
{
with (thisform)
  {
  if (validate_required(email,"Email must be filled out!")==false)
    {email.focus();return false}
  }
}
</script>
</head>

<body>
<form action="submitpage.htm" onsubmit="return validate_form(this)" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit"> 
</form>
</body>

</html>

E-mail 验证

<html>
<head>
<script type="text/javascript">
function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if (apos<1||dotpos-apos<2) 
  {alert(alerttxt);return false}
else {return true}
}
}

function validate_form(thisform)
{
with (thisform)
{
if (validate_email(email,"Not a valid e-mail address!")==false)
  {email.focus();return false}
}
}
</script>
</head>

<body>
<form action="submitpage.htm"onsubmit="return validate_form(this);" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit"> 
</form>
</body>

</html>