JAVAScript介绍
1、概念:
js是一种脚本语言,是一种基于客户端浏览器的(现在也有服务器端,如 NodeJS),基于对象、事件驱动式的脚本语言。 JavaScript 也具有跨平台的特点。如同所有的脚本语言, JavaScript 是动态解释执行的。
2、基本特点
2.1解释型脚本语言
- 程序不需要编译
- 运行时才翻译成机器语言
- 没执行一次就翻译一次,效率低,依赖于解释器
2.2弱类型语言
第二部分:实例演示
1、申明js程序
第一种方式直接在元素里面嵌入-->
<!--在html里面嵌入javascript代码
<a href="javascript:alert(123);">百度一下</a>
<p onclick="alert(321);">this is p</p>
第二种方式-->在html<body><head>中申明
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>
/*js执行的;流程从上到下。而且阻塞的方式执行*/
alert("333");
</script>
</head>
<body>
<script>
alert("网页加载完毕");
</script>
</body>
第三种方式:在html以外申明并引用;
html中语言
<!--引用外部文件就不需要再标签中间加内容-->
<script src="js/test.js" type="text/javascript"></script>
js语言端
/**
* Created by XUCHAOBO on 16-12-2.
*/
console.info("成功");
2、基本数据类型分类
2.1 5种基本数据类型
var _number=1;
var xiaoshu = 1.2;
var str = "xiaowang";
var boo = false;
undefind:/*null:用于表明某个变量值为空。*/
2.2数据类型输出和数值输出
数据类型输出
var boo = true;
var boo1 = false;
console.info(typeof boo);
/*在js里面。页面加载的过程中会先将基础数据类型和引用类型加载内存。不会赋值。执行到初始化代码才会赋值*/
2.3基本数据类型转换
自动转型: 与字符串之间相加为转为字符串相加,其他则字符串变为数值;
var a = "3.145";
var b = a - 2;// 字符串与数字相减
var c = a + 2;// 字符串与数字相加
console.info(b + "\n" + c);
强制转型: toString()函数是来自Object的;null和undefined没有该方法;
var num = 10;
console.info(num.toString(2)); 10转为2进制 1010
console.info(num.toString(8)); 10转为8进制 12
console.info(num.toString(16)); 10转为10进制A
String()方法可以把任何值转换成字符串,
var str = String(null); //"null"
parseInt() 函数 parseInt() 方法首先查看位置 0 处的字符,判断它是否是个有效数字;如果不是,该方法将返回 NaN ,不再继续执行其他操作。但如果该字符是有效数 字,该方法将查看位置 1 处的字符,进行同样的测试。这一过程将持续到发现非有效数字的字符为止,此时 parseInt() 将把该字符之前的字符串转换 成数字。
parseFloat() 函数
Number() 函数的强制类型转换与 parseInt() 和 parseFloat() 方法的处理方式相似,只是它转换的是整个值,而不是部分值。
Boolean() 函数 当要转换的值是至少有一个字符的字符串、非 0 数字或对象时, Boolean() 函数将返回 true 。如果该值是空字符串、数字 0 、 undefined 或 null ,它将 返回 false 。
2.4引用数据类型
原生对象:
2.4.1Date
var da = Date();
/*Date()强Data看成一个普通的函数在调用*/
console.info(da);
var da1 = new Date(); //UTC 1970-1-1零点之间的毫秒数
console.info(da1);
得到起点之后的某天的方法:
var n = 365*24*60*60*1000;
var da2 = new Date(n);
console.info(da2);
操作当地时间和当时的美国时间
console.info(da2.toLocaleString());
console.info(da2.toDateString());
console.info(da2.toLocaleDateString())
console.info(da2.toLocaleTimeString())
console.info(da2.toUTCString())
操作年月日
var year = da1.getFullYear();
console.info(year);
/*月份从0开始计算*/
var month = da1.getMonth();
console.info(month);
var date = da1.getDate();
console.info(date);
获取到每一周的周几
var day = da1.getDay();
console.info(day);
console.info("时"+da1.getHours()+"分"+da1.getMinutes()+"秒"+da1.getSeconds());
2.4.2RegExp正则表达式
获取到一个正则对象
var reg = /^\d{6,}$/;
console.info(reg);
console.info(typeof reg);
var reg2 = new RegExp("^\\d{6,}$");
console.info(reg2.test("asd345678"));
2.4.3Global
- Global无法直接访问,提供了一些方法和属性。
- 将所有全局的方法收集在一个对象中。直接访问对象的属性和方法。
var url="http://www.baidu.com?视频.mp4";
/*中文进行转码*/
var newUrl = encodeURI(url);
console.info(newUrl);
使用的时候在进行解码
var encodeUrl = decodeURI(newUrl);
console.info(encodeUrl);
/eval()可以将字符串解析成js代码执行/
var m = "alert(1234)";
console.info(m);
console.info(eval(m))
2.4.4Math
console.info(Math.random());
console.info(Math.floor(12.5));
JSON
- 表示一个对象,这个对象是非常小的一个。用于存储数据,轻量化对象
- 以键值对的形式存储信息,键:值;
var jso = {"username":"xiaowang","pwd":123};
console.info(jso);
console.info(jso.username);
3、流程控制
3.1判断语句
if(boo==true){
console.info("这是真的")
}else if(b){
console.info("ok")
}
switch(_number){
case 1:console.info("第一名");
break;
case 2:console.info("第二名");
break;
default :
console.info("最后一名")
}
3.2循环语句
for(var i=0;i<10;i++){
console.info(i);
}
4 数组
数组是值的有序集合。每个值叫做一个元素,而每个元素在数组中有一个位置,以数字表示,称为索引。
- JavaScript 数组是 无类型的: 数组元素可以是任意类型 ,并且同一个数组中的不同元素也可能有不同的类型。数组的元素甚至也可能是对象或 其他数组,这允许创建复杂的数据结构,如对象的数组和数组的数组。 JavaScript 数组的索引是基于零的 32 位数值: 第一个元素的索引为 0 ,最 大可能的索引为 4294967294(2 32 -2) ,数组最大能容纳 29496295 个元素。
- JavaScript 数组是 动态的: 根据需要它们会增长或缩减 ,并且在创建数组时无需声明一个固定的大小或者在数组大小变化时无须重新分配空间。
4.1定义数组
/数组在创建的时候,传递一个值表示空间大小
var arr3 = new Array(5);
console.info(arr3);
/传递多个参数,表示初始化的数据 js里面数组按照下标进行排列,对数据类型没有限制/
var arr4 = new Array(5,6,"xiaoqing");
4.2写入读出数组
写入数组
var arr = ["first"];// 数组的长度为 1
arr[1] = "second";// 虽然数组长度是 1 ,但是数组的下标是由 0 开始的
var i = 2;
arr[2] = i;// 可以把其他值赋值给数组的元素
var j = 3;
arr[j] = true;// 也可以把变量作为数组下标
读出数组
var arr = [5, 4, 3, 2, 1];
var num1 = arr[0];//num1 为 5
var num2 = arr[1];//num2 为
数组长度
var arr = new Array();
console.info(arr.length);// 数组长度为 0
arr[0] = "123";
console.info(arr[0]);// 数组长度为 1
// 但是上面的索引 0 明显比数组长度 length 小
数组遍历
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
var i;
//i 从 0 开始,因为数组的索引也是从 0 开始
for (i = 0; i < arr.length; ++i) {
console.info(arr[i]);// 把 i 作为数组的索引来取得数组的每一个值
数组组合操作
/*数据的组合,最终是一个字符串*/
var res = arr+arr4;
console.info(arr+arr4);
console.info(typeof res );
/*concat()将两个数组转换成一个数组,返回一个数组对象*/
console.info(arr.concat(arr4));
显示视频方式: html端编程
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--显示视频-->
<video src="play.mp4" width="1200px" height="500px" id="ve"></video>
<button onclick="ck(this);">播放</button>
<audio src="music.mp3"></audio>
<script>
var video = document.getElementById("ve");
function ck(obj){
if(video.paused){
video.play();
}else{
video.pause();
}
}
</script>
</body>
</html>