您的位置: 首页  >  文章  >  JavaScript(一)

JavaScript(一)

分类: 文章 • 2024-04-09 20:50:42

目录内容

【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的结合方式】

  1. 使用标签
  2. <script type="text/javascript"> //js代码 </script>
  3. 导入外部文件
  4. <script type="text/javascript" src="js_file_path"> //这里不用写代码，写了无效 </script>
    和引入css文件不同，引入css文件时使用 <link href="" >

结合方式使用选择：
1、代码写在当前页面
当代码只在当前页面使用时，使用该方式比较方便

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

 

【js语法部分】

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

如：var str = "abc";

如：var num = 10;

如：var flag = true;

如：var obj = null;

var width; alert(width);

  1. string：字符串类型
  2. number：数值类型
  3. boolean：布尔类型
  4. null：空对象类型
  5. undefined：未正确定义使用错误类型

有关js的弱类型在js 变量的定义上可以很好的体现出来，一个数据类型，如果不通过代码判断，那么就需要直观的看变量的值来判断,
因为变量的定义都是使用 var 关键字定义的。 
通过typeof(param)查看定义的变量类型。

 

类型使用和typeof判断

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



或者：

alert( typeof undefined );

会弹出 undefined提示.


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


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



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



var flag = true;
alert(typeof flag);
会弹出boolean

  JavaScript(一)

 


二、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的第二天课程会讲到) 

JavaScript(一)JavaScript(一)

 


四、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);


 		 JavaScript(一)JavaScript(一)

 

五、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]);


 		 JavaScript(一)


 

六、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 方法测试内容






 

  JavaScript(一)





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);



 		 JavaScript(一)


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);

请填写数字：



 		 JavaScript(一)


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);



 		 JavaScript(一)JavaScript(一)


RegExp 对象

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

使用过程实例：

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


 
  JavaScript(一)

 

七、BOM 对象

navigator：浏览器对象
screen：屏幕对象
history：浏览器历史对象

history.back();




location：浏览器跳转url对象

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




window：浏览器窗口对象
setInterval()-clearInterval()


setTiemout()-clearTimeout()


 		 JavaScript(一)

 

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

全局变量:同一页面中，再一个script标签中定义了一个变量，在当前页面中的其他script中也可以使用
JavaScript(一)
局部变量:在方法内部定义的变量，只能在笨方法中使用
JavaScript(一)
全局函数:js自身语法提供好的，不需要使用任何对象调用，直接拿来使用的函数(如：parseInt())
JavaScript(一)


__________________________________________________

全局函数实例代码：

方法：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);

   



JavaScript(一)


JavaScript(一)

JavaScript(一)JavaScript(一)

 JavaScript(一)

 JavaScript(一)

 JavaScript(一)

 JavaScript(一)

 JavaScript(一)

 JavaScript(一)

 JavaScript(一)

 JavaScript(一)

 JavaScript(一)

 JavaScript(一)

 JavaScript(一)

 JavaScript(一)JavaScript(一)

 JavaScript(一)

 JavaScript(一)

相关推荐