JS基础学习

1.Javascript 简介

Netscape浏览器中开发----LiveSript的脚本语言（在浏览器和服务器中使用）

为了赶在发布日期前完成LiveScript开发，Netscape  与 sun公司建立了一个开发联盟，在Netscape Navigator2发布的前夕，为了搭上媒体上热炒的java顺风车，临时把LiveScript    改名为  javaScript。  在Navigator3发布不就，ie3就加入了名为JScript的javaScript的实现。这意味着有两个不同的javascript版本：javascript,jscript.当时并没有标准规定JavaScript的语法和特性。

2.页面开发使用的基本前端技术

Html    +    css   +   javscript

HTML将元素进行定义，   CSS对展示的元素进行定位和效果渲染，   再通过JavaScript实现元素相应的动态变化效果. 

3、javascript  和   java的区别

（1）运行位置：浏览器        本地

（2）语言作用：解释性        编译

（3）开发公司：网景公司      sun公司

（4）语言性：  弱语言       强语言

4、javascript主要运行在   客户端浏览器中的一种    脚本语言，

   java    主要是运行在    本地            编程语言

5、完整的JavaScript包含的三个部分

5.1   ECMAScript规范：  描述了该语言的语法和基本对象的定义;

1）语法   2）数据类型:5+1种  3）语句   4）关键字   5）保留字   6）操作符  +  -  *  /  &  |  !==（绝对不等于）===（恒等于，绝对等于）

7）对象Object   eg: new Date()   /  new Array()    /    new XMLHttpServlet

注：JavaScript  是不完全面向对象

5.2 文档对象模型（DOM）:描述处理网页内容的方法

5.3浏览器对象模型（BOM）:描述与浏览器进行交互的方法

6、javascript语言的特点

6.1 解释执行的脚本语言

6.2 基于对象的语言   

6.3 简单性

6.4 弱类型语言:  javascript的语法松散要求不严谨,   数据类型没有指定的内存空间。

6.5 事件驱动  :   监听事件---（Js）处理事件---(js)-响应事件

6.6 动态性

6.7 安全性

6.8 跨平台性

注：目前学的跨平台语言有：java   xml   js

7、javascript在页面中的位置

（1）直接嵌入在页面中(任意位置)

<script type = "text/javascript">

//在这里写JS代码

</script>

（2）写到一个外部的文件里面(  .js  结尾的文件)

<script type="text/javascript" src  =  "js/test.js"></script>//直接输出src 对应路径的文件中的内容

注：1 在test.js文件中写语句：console.log(123444);  2 src:可以跨域访问

8、基础语法

1) 区分大小写    2) 语句  每个语句以分号结尾(规范)

3) 标识符:

  a.字母，数字，下划线，$组成。

  b.只能以字母，下划线，$开头。

  c.不能将关键字作为标识符。

9.javascript中的变量:

（1）语法： var 变量名;

   eg 1  :

  function test(){

          message = "hello";  //全局变量

      }

       test();

       alert(message); //可以访问

  eg2:

 function test(){

   var message = "hello";  //局部变量

       }

      test();    //调用test( )

      alert(message);  //错误  因为message变量在方法外不存在 仅存在于局部方法

10 .    javascript中的数据类型:     5+1 种  (  ECMAScript规范 没有定义自定义类型  只有6种类型 

（1）Undefined未定义 "undefined   var a ;

（2）Null空引用数据类型 "null"   var a = null;  a的类型是object  是空引用类型对象

（3）Boolean 布尔类型 true/false   var a = false;

（4）Number 数字类型   （整数/浮点数）

（5）String 字符串类型  "" / ''  var a ="true";   var a ='hello';

（6）Object 引用类型（复杂数据类型） 本质：由一组 无序的键值对 组成 

eg:       new Object()   /   new Date()   /  new Array()    /    new XMLHttpServlet

注：实际上 undefined 派生自 null值 undefined == null结果为true

null 与 undefined的意义不同: null可以用来表示一个空对象（object类型）     undefined表示该类型没有任何定义（undefined类型）

11、 typeof 操作符 ：得到变量的类型  语法：typeof(变量名)

例题：判断输入字符是否是数字，若不是 则清空

12、类型转换

1)  其他数据类型  转换  Boolean类型

通过Boolean() 函数转换

   【Boolean   true    false】

String     非空字符串  " "

Number 任何非0 0和NaN

Object 任何对象 null

Undefined n/a undefined (n/a not applicable 不适用)

例如：

Boolean(""); //false   Boolean(0);     //false    Boolean(NaN); //false   Boolean(null) //false  Boolean(undefined)//false

Boolean("briup"); //true

Boolean(1); //true

2) 其他数据类型到数值类型转换

1.Number()函数

1) 如果转换的值是：null, undefined, boolean, number

Number(true); //1      Number(false); //0      Number(null); //0      Number(undefined); //NaN        Number(10); //10如果是数字值,原样输出

2) 如果是字符串：

Number("123");  //如果仅包含数值，转换为对应的数值

Number("234.1");//解析为对应的小数

Number("+12.1");//首位为符号位，其余为为数值，转换为对应的数值

Number("1+2.3");//NaN 符号位出现在其他位置，解析为NaN

Number("0xa");  //如果仅包含十六进制格式，转为为对应的十进制的值

Number("010"); //【注意！】不会当做八进制被解析，结果为10

Number(""); //空字符串被转换为0

Number("123ac");//包含其他字符： NaN

Number(" 12"); //12

2.parseInt()函数

1) 如果转换的值是  null,undefined,boolean,number

parseInt(true);       //NaN          parseInt(false); //NaN  

parseInt(null);      //NaN            parseInt(undefined);//NaN

parseInt(10);      //10 如果是整数值，原样输出 parseInt(10.3); //10 如果是小数，舍去小数点一级后面的内容

2) 如果是字符串：

parseInt("123");  //123；如果仅包含数值，转换为对应的数值

parseInt("234.1");//234；小数点后面的数值省略

parseInt("+12.1");//12； 首位为符号位，其余为为数值，转换为整数

parseInt("0xa");  //10； 如果仅包含十六进制格式，转为为对应的十进制的值

parseInt("010");  //10； 【注意！】不会当做八进制被解析，结果为10

parseInt("");   //NaN；空字符串被转换为NaN

parseInt("1+2.3");//1; 如果首位为数值，依次向后解析，找到连续的数值，直到遇到第一个非数值的，将之前获

取的数值转换为Number返回

parseInt("123ac");//123;

3.parseFloat()函数

  与parseInt() 类似，但是也有不同：

1.字符串中的第一个小数点是有效的，而第二个小数点则无效其后的内容会被省略

2.始终忽略前导0

parseFloat("22.3.4") //22.3

parseFloat("022.34"); //22.34

3.不能解析0x

 

3) 其他数据类型到字符串类型转换

1. toString()函数

默认情况下，toString()是以十进制格式返回【数值】的字符串表示，通过传递参数，可以输入以二进制，八进制，十六进制

乃至任意有效进制格式的字符串值

var num = 10;

num.toString(); "10"

num.toString(2); "1010"

num.toString(8); "12"

num.toString(16); "a"

但是null ,undefined 没有toString() 方法

null.toString() //报错 TypeError: null has no properties  

undefined.toString(); //报错 TypeError: undefined has no properties

 

13. javascript中的 三种弹框:

alert    提示框/警告框   confirm  确认框   prompt  输入对话框

这三种弹框有共同的特点：

当浏览器运行时,用户若不点击弹框中的 确定 / 取消 按钮的话, 浏览器就会卡这个弹框处,下面的页面代码就不会被执行！！！

14、String、Date、Math对象

1、字符串对象

（1）属性：

length :获取字符串的字符数量

charAt(i)  ：返回给定位置的字符  下标号从0开始！！！

charCodeAt()：返回给定位置的字符的字符编码

eg: var s = "helloworld";  s.charAt(1);  //e    s.charCodeAt(1); //101

concat():  将一个或多个字符串拼接起来，返回拼接得到的新字符串，但是大多使用"+"拼接

slice() （参数1:开始位置，参数2:返回字符后一个字符位置）即截取字符串  [ 位置1，位置2)

substr() （参数1:开始位置，参数2:返回字符个数）

substring()（参数1:开始位置，参数2:返回字符后一个字符位置）即截取字符串  [ 位置1，位置2)

var s = "helloworld";

s.slice(3,7);  //lowo

s.substr(3,7);  //loworld

s.substring(3,7);//lowo

s  //调用toString（）方法 输出： helloworld 不改变原值大小

indexOf();从前往后查找指定字符所在位置

lastIndexOf();从后往前查找字符串所在位置，可以有第二个参数，代表从字符串中哪个位置开始查找。

trim();删除前置以及后置中的所有空格，返回结果

var s = " hello world ";

console.log("|"+s.trim()+"|"); //|hello world|

split()：分割字符串 返回一个数组

var s = "hello world";

console.log(s.split(" "));

console.log(s.split(" ").length);

console.log(s.split(" ")[0]);

console.log(s.split(" ")[1]);

toLowerCase() :转换为小写

toUpperCase() :转换为大写

的

2、日期对象

var date = new Date;  //创建对象date

console.log(date);   //输出对象date

//获得当前年份-1900

console.log(date.getYear());

//获得当前年份

console.log(date.getFullYear());

//获得当前月份-1

console.log(date.getMonth());

//获得当前是一个月中的哪一号

console.log(date.getDate());

//获得星期几

console.log(date.getDay());

//获得时间中的 时 (24)

console.log(date.getHours());

//获得时间中的 分

console.log(date.getMinutes());

//获得时间中的 秒

console.log(date.getSeconds());

//获得时间中的 毫秒

console.log(date.getMilliseconds());

parse()函数：解析一个日期时间字符串，返回1970-01-01 0时0分0秒 到给定日期之间的毫秒数

eg:var date = "2016-12-19";

console.log(Date.parse(date));  //Date.毫秒数  得到日期类型对应的时间

toLocaleDateString()函数   toLocaleString()函数

toLocaleTimeString()函数   toString()函数    toTimeString()函数

eg:

var date = new Date();

console.log(date.toLocaleDateString());

console.log(date.toLocaleString());

console.log(date.toLocaleTimeString());

console.log(date.toString());

console.log(date.toTimeString());

3、Math对象

1).比较方法

Math.min() 求一组数中的最小值

Math.max() 求一组数中的最大值

eg: Math.min(1,2,19,8,6); //1

2.将小数值舍入为整数的几个方法：

Math.ceil()  向上舍入（只入不舍）

Math.floor() 向下舍入(只舍不入)

Math.round() 四舍五入

eg：console.log(Math.ceil(12.41)); //13

console.log(Math.floor(12.41)); //12

console.log(Math.round(12.3)); //12

console.log(Math.round(12.5)); //13

3.随机数

Math.random() 返回大于0小于1的一个随机数  [  0,1  )

//获得一个随机数 [23,36]

eg: console.log(parseInt(Math.random()*14+23));

4.常量

console.log(Math.PI);//获得常量π

console.log(Math.E);  //获得常量e

5.其他方法：(了解即可，即用即查)

abs(num) 返回num绝对值

exp(num) 返回Math.E的num次幂

log(num) 返回num的自然对数

pow(num,power) 返回num的power次幂

sqrt(num) 返回num的平方根

scos(x) 返回x的反余弦值

asin(x) 返回x的反正弦值

atan(x) 返回x的反正切值

atan2(y,x) 返回y/x的反正切值

cos(x) 返回x的余弦值

sin(x) 返回x的正弦值

tan(x) 返回x的正切值

注：

js中 ==：表示值相等

js中===：表示值 和 类型 都相同