JavaScript(一)

JavaScript(一)

目录内容

【1】javascript介绍
【2】js与html的结合方式
【3】js语法部分
【4】js原始类型和变量声明式
【5】js引用类型 和 类型转换
【6】js中的语句
【7】js的运算符句
【8】js 数组
【9】js对象
【10】BOM对象
【11】全局变量、局部变量 和全局函数

【javascript介绍】

javascript简称js，是一种页面脚本(script)编程语言。首先它是一种编程语言，那就自己的编程语法，只不过js是运行在浏览器中的，也就是说js的运行平台是浏览器，也因为如此它才能够很好的和页面结合在一起使用。

javaScript虽然开头是java，但是它和java木有关系，是完全不同的两种编程方式和运行方式，只是借用了java这个名字而已。

js是一种基于对象(js内部提供好了一些对象直接使用不用创建出来再使用)，事件驱动(通过js的函数方法实现一些功能，控制页面效果) 和 客户端(浏览器)的一种编程语言。

js特点:

|–交互性

|–安全性

|–跨平台性(不同浏览器)

js的组成部分:

|–ECMAScript：是js的基础语法

|–BOM：browser object model 浏览器对象模型

|–DOM：document object model 文档对象模型(js功能核心)

【js与html的结合方式】

使用标签

导入外部文件

和引入css文件不同，引入css文件时使用

结合方式使用选择：

1、代码写在当前页面

当代码只在当前页面使用时，使用该方式比较方便

2、引入外部js文件
当代码可以被其他页面一起共用，那么建议写一个js文件，进行引入

【js语法部分】
一、js原始类型和变量声明(属于ECMAScript部分)

string：字符串类型

如：var str = “abc”;

number：数值类型

如：var num = 10;

boolean：布尔类型

如：var flag = true;

null：空对象类型

如：var obj = null;

undefined：未正确定义使用错误类型

var width; alert(width);

有关js的弱类型在js 变量的定义上可以很好的体现出来，一个数据类型，如果不通过代码判断，那么就需要直观的看变量的值来判断,

因为变量的定义都是使用 var 关键字定义的。

通过typeof(param)查看定义的变量类型。

类型使用和typeof判断

var param = undefined;
alert(typeof(param));

或者：

alert( typeof undefined );

会弹出 undefined提示.

var param = null;
alert(typeof param);
弹出 object

var str = “abc”;
alert(typeof str);
会弹出string

var num = 100;
alert(typeof num);
会弹出number

var flag = true;
alert(typeof flag);

会弹出boolean

二、js引用类型 和 类型转换

引用类型

Object最高父类引用类型(平时用不到)

Boolean是原始类型boolean的引用类型

Number是原始类型number的引用类型

类型转换

转成字符串，在Object中的方法：toString()

转成数值，在Number中：parseInt() 和 parseFloat()

|–parseInt()该方法比较特殊：parseInt(“123abc”)会得到数值123，会将字符串前面的数值转成number

强制类型转换：

|–Boolean(value) 把给定的值转成 布尔

|–Number(value) 把给定的值转成 数值

|–String(value) 把给定的值转成 字符串

三、js中的语句

1、if…else…

var num = 0;(手动输入)
if(num <= 0){
alert(num);
}else if(num>0 && num<=10){
alert(2*num);
}else{
alert(num+100);
}

请输入num :

2、switch…

switch(num){
case 0:
alert(num);
break;
case 1:
alert(num+10);
break;
default:
alert(3);
break;
}

请输入num :

3、while.. | do{}while()

while演示
var num = 10;
while(num>0){
alert(num);
return;
}

请输入num :

do{}while()演示
var num = 10;
do{
alert(num);
return;
}while(num>0);

请输入num :

4、for…

var num = 3;
var datas = "";
for(var i=0;i<num;i++){
datas += i+",";
}
if(num>0){
datas += num;
alert("数据："+datas);
}

请输入num :

5、增强 for…in…

//定义一个数组
var arrs = ["a","b","c"];
//增强for循环形式
for(var i in arrs){
alert("i :"+i+" ; arrs[i] :"+arrs[i]);//拿到的是角标
}

增强for循环不能遍历arguments数组(js的第二天课程会讲到)

四、js的运算符

+= 运算符

i+=1; 在运算效果上和 ++i、i=i+1;是一样的。在java中涉及到类型的转换问题。js示弱类型不会产生此类的问题

/ 运算符

在java中 / 是整出的运算符，而在js中， / 就是传统数学运算的除法是一样的 1/3结果就是0.33333,3的无限循环

===三个等号

两个功能：比较值、比较类型；是哟个==和typeof互替

var num1 = 10;

var num2 = "10";

alert(num1 === num2);

var num1 = 10;

var num2 = "10";

var num3 = 11;

alert(typeof num1 == typeof num3);

alert(num1 == num2 && (typeof num1 == typeof num2));

• 运算符 特殊情况：字符串和数字相加；布尔值(true / false)和数值相加
  实例代码：

  var str = "1";
  var num = 1;
  var result = str + num;
  alert("结果："+result);
  alert("结果类型："+typeof result); 
  var num1 = 10;
  var num2 = 1;
  var result = num1 + num2;
  alert("结果："+result);
  alert("结果类型："+typeof result);
  
  var flag1 = true;
  var flag2 = false;
  var num = 1;
  var result1 = flag1 + num;
  var result2 = flag2 + num;
  alert("true+1 = "+result1);
  alert("false+1 = "+result2);
  alert("结果类型："+typeof result1);  
  运算的结果表明：boolean值参加运算时，true 作为 1，false作为0进行运算
  

• 运算符 特殊情况：字符串和数值相减；布尔值(true / false)和数值相减

代码实例：

var str = "3";
var num = 1;
var result1 = str - num;
var result2 = num - str;
alert("str-num结果："+result1);
alert("num-str结果："+result2);
alert("结果类型："+typeof result1);


var flag1 = true;
var flag2 = false;
var num = 1;
var result1 = flag1 - num;
var result2 = flag2 - num;
alert("true-1结果："+result1);
alert("false-1结果："+result2);
alert("结果类型："+typeof result1);

五、js 数组

js中数组的定义

第一种：创建一个空数组

var arr1 = [];//一个空数组
arr1[0] = 1;
arr1[1] = "aaa";

体现了数组长度的可变性 和 类型多样化

第二种：创建一个初始化数据的数组

var arr2 = [1,"aaa"]; arr2[2] = true;

第三种：使用Array对象new一个指定长度的数组

var arr3 = new Array(3);
alert(arr3.length);

第四种：使用Array对象new一个带初始化数据的数组

var arr4 = new Array(1,"a",true);
alert(arr4[2]);

六、js对象 StringArrayMathDateRegExp

js中的对象和咱们java中学习的非常相似，当然也有很多不同的地方，我们主要学习的是和java中有区别的地方

这里学习的主要是对象的方法，基本上都是分两部分学习：和java相似的和 与js自己的
String对象

1、自己独有的方法(域html页面样式相关)属性

属性：length，在java中是length()方法，这里是属性

方法：bold(),实现string的加粗字体效果

方法：fontcolor(color),实现string字体的颜色设置

方法：fontsize(size),实现string字体的大小设置

方法：link(link),实现string编程超链接的设置

代码实例：

受测数据:

<p id="testStringFunP">
   String 方法测试内容
</p>
String 方法测试内容

2、和java相似的方法

方法：charAt(index),返回角标对应的字符，这里都是字符串

var str = "abcdefg";
alert(str.charAt(2));


方法：concat(str),连接两个字符串
var str1 = "abc";
var str2 = "def";
alert(str1.concat(str2));


方法：indexOf(substr),如果包含范围开始包含的位置，不包含返回-1
var str = "abcdef":
var substr1 = "bcd";
var substr2 = "www";
alert(str.indexOf(substr1));
alert(str.indexOf(substr2));


方法：split(","),根据提供的分隔符将字符串分割成数组
var str = "a,b,c,d,e,f,g";
var arr = str.split(",");
alert("arr.length : "+arr.length+" ; arr : "+arr);

Array对象

属性：length,获取数组的长度

方法：concat(arr),连接两个数组

var arr = [1,"a"];
var arr1 = [true];
var newArr = arr.concat(arr1);
alert(newArr);



方法：join(seperator)指定列出数组时的分隔符
var arr = [1,"aaa",true];
var newArr = arr.join("-");
alert(newArr);



方法：pop()删除并返回数组最后一个元素
var arr = [1,"aaa",true];
var newArr = arr.pop();
alert(newArr);



方法：push()在数组最后追加一个数组元素
var arr = [1,"aaa"];
var arr1 = [true];
arr.push(arr1);
alert(arr);



方法：reverse()反转数组
var arr = [1,"aaa",true];
var newArr = arr.reverse();
alert(newArr);

Math 对象

Math对象和java中Math对象非常相似，使用方式也是一样，把Math作为一工具类来使用。

方法：ceil()向上取舍

var num = 10.2;
var result = Math.ceil(num);
alert(result);
请填写数字：

方法：floor()向下取舍

var num = 10.2;
var result = Math.floor(num);
alert(result);
请填写数字：

方法：round()四舍五入
var num = 10.2;
var result = Math.round(num);
alert(result);
请填写数字：

方法：random()随机数

var num = 10;
var result = Math.random()*num;
alert(result);
请填写数字：

Date 对象

Date日期对象使用的时候需要创建对象：var date = new Date();来使用

方法：getFullYear()获取年份

var date = new Date();
var year = date.getFullYear();
var getYear = date.getYear();
alert("正确——getFullYear : "+year);
alert("错误——getYear : "+getYear);



方法：getMonth()获取月份
var date = new Date();
var month = parseInt(date.getMonth());
alert("得到直接月份 ："+month);
alert("正确月份 ："+(month+1));



方法：getDay()获取星期
var date = new Date();
var week = date.getDay();
alert("得到直接星期："+week);
alert("正确星期："+week+1);



方法：getDate()获取天
var date = new Date();
var dateTime = date.getDate();
alert(dateTime);



方法：getHours()获取小时
var date = new Date();
var hours = date.getHours();
alert(hours);



方法：getMinutes()获取分钟
var date = new Date();
var minutes = date.getMinutes();
alert(minutes);



方法：getSeconds()获取秒
var date = new Date();
var seconds = date.getSeconds();
alert(seconds);



方法：getTime()获取毫秒
var date = new Date();
var time = date.getTime();
alert(time);

RegExp 对象

RegExp 是一个正则表达式对象，用来测试一个字符串是否匹配我们规定好的一个格式

使用过程实例：

//创建RegExp正则对象
var reg = new RegExp("^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$");
//这里接收到一个邮箱
var email = "abc123@haha.com";
//检测是否符合正则格式
var flag = reg.test(email);
alert(flag);

七、BOM 对象

navigator：浏览器对象

screen：屏幕对象

history：浏览器历史对象

history.back();

location：浏览器跳转url对象

location.href = “http://www.baidu.com“;

window：浏览器窗口对象

setInterval()-clearInterval()

setTiemout()-clearTimeout()

八、全局变量、局部变量 和全局函数

全局变量:同一页面中，再一个script标签中定义了一个变量，在当前页面中的其他script中也可以使用

局部变量:在方法内部定义的变量，只能在笨方法中使用

全局函数:js自身语法提供好的，不需要使用任何对象调用，直接拿来使用的函数(如：parseInt())

---

全局函数实例代码：

方法：eval()执行js代码
var jsCode = "var num = 0;alert(num + 1);";
eval(jsCode);



方法：isNaN()判断是否是数值
//该值为NaN
var num1;
var num2 = 0;
var num3 = new Date();
alert(isNaN(num1));
alert(isNaN(num2));
alert(isNaN(num3));



方法：encodeURI()编码
var datas ="你好Hello";
var result = encodeURI(datas);
alert(result);



方法：decodeURI()解码
var datas ="你好Hello";
var result = encodeURI(datas);
alert(result);
//将编码后的数据进行解码
result = decodeURI(result);
alert(result);