JavaScript快速入门


// 定义number类型
var a = 15;  //  定义变量
var a6 = NaN;
var a1 = 1.8;
alert(a);  // 弹框
document.write(typeof(a)+a+"<br>");  // 输出内容到页面上 并完成换行 ， typeof 输出类型
document.write(a6+"<br>")
document.write(a1+"<br>");

//  定义String类型
var a2 = "String类型";
var a3 = 'abc';
document.write(a2+"<br>");
document.write(a3+"<br>");

//  定义boolean类型
var a4 = true;
document.write(a4+"<br>");

//  定义 null undefined
var a5 = null;
var a8 = undefined;
var a7;
document.write(a5+"<br>");
document.write(a8+"<br>")
document.write(a7+"<br>")

5. 运算符

1. 一元运算符：只有一个运算数的运算符

++（--）在前，先自增（自减），再运算

++（--）在后，先运算，再自增(自建)

----------------------------------------------------------------------------------

* 注意：再JS中，如果运算数不是运算符要求的类型，那么JS引擎会自动的将运算数进行类型转换，如其他类型转number

* string转number:按照字面值转换。如果字面值不是数字，则转为NaN(不是数字的数字)

* boolean转number : true 转为1 , false转为0

var  a12 = +"123";
alert(typeof(a12));
var a13 = +"abc";
alert(a13+1);
alert(typeof(a13))

var a14 = +true;
var a15 = +false;
document.write(typeof(a14)+"<br>"); // number
document.write(a14+"<br>");
document.write(a15+"<br>")

2. 算数运算符

+ - * / % ...

3. 赋值运算符

= += -+ ....

4. 比较运算符

> < >= <= == ===(全等于)

比较方式：

1. 类型相同：直接比较

字符串 : 按照字典顺序比较，按位逐一比较，直到得出大小为止。

2. 类型不同：先进性类型转换，在比较。

* === 全等于：在比较之前，前判断类型，如果类型不一样，则直接返回false.

var a = 15;
var b = 18;
document.write(a+b+"<br>");
document.write(a-b+"<br>");
document.write(a*b+"<br>");
document.write(a/b+"<br>");

document.write((3>4)+"<br>");
document.write(("abc"< "acd")+"<br>");
document.write(("123"==123)+"<br>");
document.write(("123"===123)+"<br>");

5. 逻辑运算符

&& || ！

* && ：与（短路）

|| ：或（短路）

！：非

* 其他类型转boolean

1. number ： 0 或 NaN为假，其他为真

2. string : 除了空字符串（" "）, 其他都是true

3. null & undefined : 都是false

4. 对象，所有对象都为true

6. 三运运算符

？ : 表达式

var a = 3;

var b = 4;

var c = a > b ？1　：０　

　　　*　语法　：

　　　　　　*　表达式？值 1 ：值 2

* 判断表达式的值，如果是true则取值1，如果是false则取值2；　　　　　　

　　　７．流程控制语句

1. if ...else...

2. switch: 在JS中，swicth可以接收任意的原始数据类型

 // switch 语句
 var a = "sd";
switch (a){
  case a:
    document.write("这是a");
    break;
  case true:
    document.write("这是true");
    break;
  case null:
    document.write("这是true");
    break;
  case undefined:
    document.write("undefined");
    break;
}

3. while

// while语句
 var sum = 0;
var num = 1;
while (num<=100){
    sum+=num;
    num++;
}

4. do...while

5. for

// for语句
 for (var i = 0; i < 100; i++) {
   document.write(i+"<br>");
 }

6. 99 乘法表

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
            td{
              border: 1px solid;
            }
  </style>
  <script>
    document.write("<table align ='center'>");
    for (var i = 1; i <=9 ; i++) {
      document.write("<tr>");
      for (var j = 1 ; j <=i ; j++) {
        document.write("<td>");
        document.write(i+"*"+j+"="+(i*j)+"&nbsp;&nbsp;&nbsp;");
        document.write("</td>")
      }
      document.write("<br>");
      document.write("</tr>")
    }
    document.write("</table>")
  </script>
</head>
<body>

</body>
</html>

2. 基本对象

1. Function : 函数（方法）对象

1. 创建:

1. function 方法名称（形式参数列表）{

方法体

}

2. var方法名 = function(形式参数列表){

方法体

}

2. 方法：

3. 属性:

length:代表形参的个数

4. 特点：

1. 方法定义是，形参的类型不用写，返回值类型也不会。

2. 方法是一个对象，如果定义名称相同的方法，会覆盖

3. 在JS中，方法的调用只与方法的名称有关，和参数列表无关

4. 在方法声明中有一个隐藏的内置对象（数组），arguments，封装所有的实际参数

5. 调用：方法名称（实际参数列表）；

function fun(a,b){
  alert(a+b);
}
fun(1,2);

 var fun1 =  function fun(a,b){
  alert(a+b);
}
fun1(1,2);

 function add(a,b){
   return a+b;
 }
 var sum = add(1,5);
 document.write(sum);

 function add(){
   var sum = 0;
   for (var i = 0; i < arguments.length; i++) {
                sum+=arguments[i];
   }
   return sum;
 }
 var sum = add(15,81,1);
 document.write(sum)

2. Array 数字对象

1. 创建：

1. var arr = new Array(元素列表)；

2. var arr = new Array(默认长度);

3. var arr = [元素列表];

2. 方法

join(参数)：将数组中的元素按照指定的分隔符拼接为字符串

3. 属性

length : 数组的长度

4. 特点

1. JS中，数组元素的类型、数组长度可变

3. Date

1. 创建：

var date = new Date( );

2. 方法

toLocaleString( ); 返回当前date对象对应的时间本地字符串格式

getTime( );获取毫秒值。返回当前如期对象秒速的时间到1970年1月1日零点的毫秒值差。

var date = new Date();
document.write(date+"<br>")
document.write(date.toLocaleDateString()+"<br>");

4. Math

1. 创建

特点： Math对象不用创建，直接使用，Math.方法名（）;

2. 方法：

random( ); 返回0~1之间的随机数，含0不含1

ceil(x);对数进行上舍入

floor(x); 对数进行下舍入

found(x); 把数四舍五入为最接近的整数。

3. 属性：

案例：取1~100之间的随机整数

1. Math.random（）产生随机数，范围（0，1）小数

2. 乘以100 --> [0,99.9999]小数

3. 舍弃小数部门： floor--》 [0,99] 整数

4. +1 --> [0,99] 整数[1,100]

var n1 = Math.floor((Math.random()*100))+1;
document.write(n1);

5. ReGExp : 正则表达式对象

1. 正则表达式：定义字符串的组成规则

如： [a] [ab] [a-zA-Z0-9_]

特殊符号代表含义的单个字符：

\d:单个数字字符[0-9]

\w:单子单词字符[a-zA-z0-9_]

2. 两次符号：

？：表示出现0次或1次

* ：表示出现0次或多次

+ ：出现1次或多次

{m,n} : 表示m<= 数量 <=n

* m如果缺省： {，n} : 最多n次

* n 如果缺省：(m,) 最少m次

1. 创建

1. var reg = new RegExp("正则表达式");

2. var reg = /正则表达式/;

2. 方法

1. test(参数) ：验证指定的字符串是否符合正则定义的规范

var reg = new RegExp("^\\w{6,12}$");
var reg2 = /^\w{6,12}$/;
var username = "1234567";
var flag = reg.test(username);
document.write(flag);

6. Global

1. 特点：全局对象，这个Global中封装的方法不需要对象就可以直接调用。方法名（）；

2. 方法

encodeURI ： url编码

docudeURI ： url解码

encodeURIComponent() : url编码 // 编码的字符更多

docudeURIComponent(); url解码

parseInt( ): 将字符串转为数字

isNaN( ) : 判断是否为NaN

eval( ) : 将JavaScript 字符串，并把它作为脚本代码来执行

3. URL编码

document.write("<hr>");
var str = "abcde刘畅开";
var encode = encodeURI(str);  // url编码
var docude = decodeURI(str);  // url解码
document.write(encode);
document.write(docude)