JavaScript概述的介绍：
JavaScript是一门web上的编程语言，主要用于和用户交互。浏览器客户端的脚本语言，不需要进行编译，直接就可以被浏览器解析执行，嵌套在HTML文件中有浏览器引擎加载执行，和Java没有大的联系。
好处：可以增强一些用户的体验，实现人与页面的动态交互，也可以使用js来控制页面的元素内容，让页面有一些动态效果（轮播图）
C-- LiveScript 网景公司NetScspe 1995 Java --->javaScript 微软 JScript IE
ECMA欧洲计算机制造商协会 ECMAScript 统一制定了客户端脚本语言的标准
JavaScript = ECMAScript + JavaScript语言自己本身的内容（DOM+BOM）
JavaScript的组成：
1.核心（ECMAScirpt）语法，包括基本的流程控制，运算符，数据类型，数组，对象，类，接口等。
2.浏览器对象模型（BOM）browser object model，主要是操作当前浏览器窗口的内容，如页面的跳转和页面刷等动作
3.文档对象模型（DOM）document object model，主要是操作HTML文件中的具体内容（页面元素内容），页面中有一个div,动态的给div添加高宽，添加背景图像，植入需要的文本内容，让div隐藏起来。
JavaScript代码的引入：
1.内嵌式：在html文档中，将相关的js代码直接放在标签<script>中 (位置可以放在HTML标签中，也可以放在body中，可以多个同时存在)
<script type="text/javascript">
/*就是js代码 多行注释*/
//单行注释
alart("点我！！！");
</script>
<script type="text/javascript">
prompt("输入一个文字信息");
</script>2.外联式：首先需要在HTML文件的外面独立创建一个js文件，文件的扩展名为XXX.js，在HTML文件中通过script标签进行引入，至于引入的位置没有要求，（head和body都可以）;
备注：1.引入的位置虽然随意，但是有一个加载的顺序问题，如果js代码存放在head标签中，那么会首先加载js代码，如果js代码中对页面元素内容有控制，则没有效果；如果js代码存放在body标签中并且存放在body页面元素的下面，那么浏览器会首先加载body中的页面元素，再去加载js代码，此时如果js对页面元素有控制，则有效果。
2.如果引入的不是直接对页面元素的控制的技术代码，而是第三方js插件，那么一般情况下需要先引入（浏览器先加载），才能进行后续依赖开发。
外联式
<script type="text/javascript" src="XXX.js">ECMAScript核心语法
在核心语法中，语法的特征基本和java一致，个别有点区别(js语言是弱类型语言,属于一门浏览器客户端的脚本语言).
声明变量：不需要指定变量的数据类型，通用写法,使用var(variable)，比如你想声明一个整数类型的变量 var num=90;
基本语法：
1.书写方式；内联式，外联式
内联式：直接在html文件中使用<script>标签中书写js代码
外联式：首先在HTML页面文件外部创建一个js文件，在js文件中书写js代码，其次在html文件中通过<script>标签中的属性src引入外部的js文件代码
注意事项：
1.<script>可以定义在html的任何地方，但是定义的位置不同加载顺序不同，如果书写在<head>标签内，首先会加载,如果放在<body>标签中(js文件放在body标签的最后面),等待标签加载完加载js代码
2.<script> 可以使用多个
2.注释 //源码可见
单行注释://注释的内容
多行注释:/* 被注释的内容 */
3.数据类型:java当中的数据类型:基本数据类型和引用类型
1.原始数据类型:
number型:数字型 ,整型/浮点型 整数,小数,NaN(not a number)不是数字的数字类型;
string型:字符串类型.'a' " aaa";
boolean型:布尔型 true/false
null型:一个对象为空的类型
undefined:未定义类型:如果一个声明的变量没有给初始值,那么浏览器会给该变量赋值为undefined
2.引用数据类型:对象
4. 变量
本质:一小块存储数据类型的内存空间
java语言是强类型语言,需要显示的指定内存空间的数据类型
javascript是弱类型语言.不需要显示的指定内存空间的数据类型,可以存储整数,小数,布尔,字符串...
1.强类型:申请存储空间的时候需要显示定义空间将来存储的数据类型.只能存储固定类型的数据.
2.弱类型:在申请存储空间的时候,不需要定义空间将来存储数据的数据类型,可以存放任意的数据类型的数据.
语法:
var 变量名 = 初始化值;<script type="text/javascript">
//
//typeof运算符--->可以获取数据定义的数据类型
//document.write(); 把write中的内容输出到页面上
//number类型的定义
var num = 123;
var num3 = 1.23;
var num2 = 16;
alert(typeof (num));
document.writeln(num + "--数据类型" + typeof (num) + "<br>");
document.writeln(num2 + "--数据类型" + typeof (num2) + "<br>");
document.writeln(num3 + "--数据类型" + typeof (num3) + "<br>");
document.writeln("<hr>");
//string类型的定义
var str01 = "abc";
var str02 = 'abc';
var str03 = "你好";
document.writeln(str01 + " --数据类型" + typeof (str01) + "<br>");
document.writeln(str02 + "--数据类型 " + typeof (str02) + "<br>");
document.writeln(str03 + "--数据类型 " + typeof (str03) + "<br>");
document.writeln("<hr>");
//boolean类型的定义
var flags = true;
var flagss = false;
document.writeln(flags + " --数据类型" + typeof (flags) + "<br>");
document.writeln(flagss + "--数据类型 " + typeof (flagss) + "<br>");
document.writeln("<hr>");
//null类型的定义;
//null被typeof解析后获取的数据类型是object;
var obj = null;
document.writeln(obj + "--数据类型 " + typeof (obj) + "<br>");
document.writeln("<hr>");
//undefinded类型的定义
var obj01;
document.writeln(obj01 + "-- 数据类型" + typeof (obj01) + "<br>");
document.writeln("<hr>");
</script>运算符:
一元运算符
<script type="text/javascript">
/*
一元运算符:只有一个运算数参与的运算的运算符
++ -- +(正数号) -(负数号)
++ --:
前++ : ++a -->先自增一再其他运算
后++ : a++ -->先其他运算再自增一
前-- : --a -->先自减1再进行其他运算
后-- : a-- -->先进行其他运算再自减一
+ -(正负号):
注意:在js中,如果运算数不是所要求的类型,那么js解析引擎会将运算数转换成对应的数据类型
类型转换:
其他类型转换成number
1. string转number 按照字面值转换,如果字面值不是数字,则转为NaN类型
2. boolean转number 1为true 0为false
3. null ,undefined转number 转为NaN类型
*/
var num = 123;
num++;
document.write(num);//124
document.write("<hr>");
// 字符串转number类型
var str = "123abc";
document.write(typeof (str) + "<br>");
document.write(typeof (+str) + "-------" + (+str + 1) + "<br>");// 1231 /
document.write("<hr>");
// boolean转number类型
var flag = true;
var flag02 = false;
document.write((+flag + 10) + "----" + typeof (+flag) + "<br>");// 1 11
document.write((+flag02 - 5) + "----" + typeof (+flag) + "<br>");// 0 -5
document.write("<hr>");
// null/undefined 转number
var obj = null;
var obj02 = undefined;
document.write(+obj + "<br>")
document.write(+obj02 + "<br>")
</script>算术运算符
<script>
//算术运算符
// + - * / %
var num01 = 10;
var num02 = 3;
document.write(num01 + num02 + "<br>")// 13
document.write(num01 * num02 + "<br>")// 30
document.write(num01 / num02 + "<br>")// 3.3333335 number 包含整数、小数
document.write(num01 - num02 + "<br>")// 7
document.write(num01 % num02 + "<br>")//1
</script>赋值运算符
<script>
//赋值运算符
// += -= *= /= %= =
var num01 = 10;
document.write("= " + num01 + "<br>")// 10
num01 += 10;
document.write("+= " + num01 + "<br>")// 20
num01 -= 10;
document.write("-= " + num01 + "<br>")// 10
num01 *= 10;
document.write("*= " + num01 + "<br>")// 100 number 包含整数、小数
num01 /= 10;
document.write("/= " + num01 + "<br>")// 10
num01 %= 10;
document.write("%= " + num01 + "<br>")//0
</script>比较运算符
<script>
/*
比较运算符
第一种：只比较内容值
类型相同 ： 直接比较
字符串：按照字典顺序进行比较，按位逐一进行比较，直到比较两者的大小
如果类型不同，先进行类型转换，再进行比较
第二种；比较内容值和数据类型
=== ：全等于 先进行类型判断，如果类型不一致，直接返回false
*/
var str = "abc";
var str01 = "bcd";
document.writeln((str > str01) + "<br>");//false
document.write("<hr>");
var num = 123;
var num02 = "123";
document.write((num == num02) + "<br>");//true
document.write("<hr>");
num = 123;
num02 = "123";
document.write((num === num02) + "<br>");//false
document.write("<hr>");
num = 123;
num02 = "123";
document.write((num === (+num02)) + "<br>");//true
document.write("<hr>");
</script>逻辑运算符
<script>
//逻辑运算符
/*
&& 短路与
|| 短路或
！ 取反
其他类型转换成boolean类型
1.number转成boolean ：0或者是NaNw为false 其他的数字为true
2.string转换成boolean:除了空字符串（""）为false,其他一律为true;
3.null或者undefined转换成false
4.对象：所有的对象一律转为true
*/
var flag = true;
document.write(flag + "<br>");
document.write("<hr>");
//1.number转成boolean ：0或者是NaNw为false 其他的数字为true
var num01 = 0;//false
var num02 = NaN;//false
var num03 = 1;//true
var num04 = 100;//true
document.write(!num01 + "<br>");//true
document.write(!num02 + "<br>");//true
document.write(!num03 + "<br>");//false
document.write(!num04 + "<br>");//false
document.write("<hr>");
// 2.string转换成boolean:除了空字符串（""）为false,其他一律为true;
var str = "";
var str1 = "abc";
var str2 = "123";
document.write(!str + "<br>");//true
document.write(!str1 + "<br>");//false
document.write(!str2 + "<br>");//false
document.write("<hr>");
//3.null或者undefined转换成false
var ocj = null;
var ocj1 = undefined;
var ocj2;
document.write(!ocj + "<br>");//true
document.write(!ocj1 + "<br>");//true
document.write(!ocj2 + "<br>");//true
document.write("<hr>");
// 4.对象：所有的对象一律转为true
var date = new Date();//创建一个日期对象
document.write(date + !date + "<br>");//false
document.write("<hr>");
</script>
三元运算符
<script>
//三元运算符
/*
?: 布尔表达式1? 返回值1:返回值2
*/
var num01 = 10;
var num02 = 20;
var num03 = num01 > num02 ? "为true" : false;
document.write(num03 + "<br>");
document.write("<hr>");
</script>特殊语句
<!--特殊语句-->
<script>
//特殊语句
/*
1.在java中,语句的结束用分号";",但是js中语句的结束是回车换行(使用分号也可以)
2.在java中,变量的定义使用数据类型 变量名=变量值
而js当中,可以不要前面的数据类型 变量名=变量值
使用var:定义的变量如果在方法内,那么就是局部变量
不使用var:定义的变量如果在方法内,那么就是全局变量
*/
num01 = 123;
num02 = 124;
alert(num01);
alert(num02);
//定义一个方法
function me() {
//var num09=3;报错找不到num09
num09 = 3;//认为是全局变量
}
me();
alert(num09);
</script>
js中的bug调试,打开浏览器,按下F12,找到Console窗口-->查看console当中的错误类型,错误原因,错误发生的位置.
流程控制语句
条件语句:
if else ...
<script>
/*
js当中的if else 语句和java当中的if else语句几乎相同
*/
var area = "innerCountry";
var signal = "red";
if ("innerCountry" == area) {
document.write("靠右行驶" + "<br>");
if ("red" == signal) {
document.write("停车等待" + "<br>");
} else if ("yellow" == signal) {
document.write("停车观察" + "<br>");
} else {
document.write("慢速穿过" + "<br>");
}
} else {
document.write("靠左行驶" + "<br>");
if ("red" == signal) {
document.write("停车等待" + "<br>");
} else if ("yellow" == signal) {
document.write("停车观察" + "<br>");
} else {
document.write("慢速穿过" + "<br>");
}
}
</script>switch case ....
<script>
//switch -case语句
/*
ja当中的switch-case和java当中的语法几乎一样(包括穿透性)
*/
var str = "星期一";
switch (str) {
case "星期一"://string
document.write("今天是" + str + "<br>");
break;
case 2://number
document.write("今天是星期二" + "<br>");
break;
case true://boolean
document.write("今天是星期三,结果是true" + "<br>");
break;
case false://boolean
document.write("今天是星期四,结果是false" + "<br>");
break;
case null://null类型
document.write("今天是星期五,结果是null" + "<br>");
break;
case undefined://未定义
document.write("今天是星期六,结果是undefined" + "<br>");
break;
default:
document.write("今天是星期日,结果是其他类型(一般是对象类型)" + "<br>");
break;
}
</script>循环语句:
for循环
<!--for循环语句-->
<script>
/*
for(初始化;判断语句;迭代语句){
//3.循环体内容
1-->2-->3-->4-->2-->3-->4...
}
初始化条件用var来声明
*/
//在js中求前100项的和5050
var sum = 0;
for (var i = 0; i <= 100; i++) {
sum += i;
}
document.write(sum);
</script>while循环
<!--while语句-->
<script>
//while语句
/*
1.初始化语句
while(2.判断语句)
//3.循环体内容
//4.迭代语句
*/
//求前5项的乘积 120
var num = 1;
var result = 1;
while (num <= 5) {
result = result * num;
num++;
}
document.write(result);
</script>do-while(循环)
<!--do-while循环语句-->
<script>
/*
*/
var num = 1;
var result = 1;
do {
result *= num;
num++;
} while (num <= 5);
document.write(result);
document.write("<hr>");
</script>
<!--99乘法表(带表格)-->
<script>
/*
table tr td
*/
//1.先写入一个table标签
document.write("<table cellspacing='45px' align='center'>");
//2.循环语句,外层for循环中的循环变量i控制行数
for (var i = 1; i <= 9; i++) {
//3.没外层循环一次,需要写入一个tr
document.write("<tr>");
//4.每进行一次外循环,需要循环遍历该行所有的乘法口诀
for (var j = 1; j <= i; j++) {
//5.每内层循环一次,需要写入一个td
document.write("<td style='border: 1px solid red;'> ");
//6.往td标签中写入文本内容
document.write(j + "*" + i + "=" + i * j);
//7.内容写完,需要添加结束标签td
document.write("</td>");
}
document.write("</tr>");
}
document.write("</table>");
</script>
JS对象
Function 函数对象
<script>
//function函数对象
/*
Function 函数对象--->方法对象
1.方法的创建
两种方式:
1. var fun=new Function(形参列表,方法体);
2. function 方法名称(形参列表){
//方法体内容
}
2.属性
length:代表方法中形参个数
3.特点
1.方法定义时:形参的参数数据类型不需要,返回值类型也不需要定义,但是想要获取该方法的返回值还需要借助于return语句.
2.方法是一个对象,如果定义的方法名称相同,后面的会把前面定义的方法覆盖掉.
3.在js中,方法中的参数列表个数在调用时可以不用考虑.换就话说方法调用只和方法名称有关,和参数列表无关.
4.在方法声明中有一个隐藏的内置对象arguments,里面封装了所有的实际参数
*/
// 方法创建的第一种方式 java当中定义形参列表 数据类型 参数名称
/*var fun = new Function("num01","num02","num03","alert(num01+num02);");
// 调用方法
fun(123,124,125);*/
// 方法创建的第二种方式
var d;
function show(a,b,c) {
document.write(a + "<br>");
document.write(b + "<br>");
document.write(c + "<br>");
document.write(d + "<br>");// 一个未定义的变量被引用了
alert(show.length);// 获取形参的个数
// 返回a、b、c三个变量的和
return a+b+c+d;
}
// 方法调用
var result = show(1,2,3);
document.write(result + "<br>");// 6
document.write("<hr>");
function show(str01,str02){
document.write(str01 + "<br>");//
document.write(str02 + "<br>");
return str01 + str02;
}
document.write("<hr>");
// 方法调用
var result02 = show("Hello","World");
document.write(result02 + "<br>");
// 方法调用
var result03 = show();// undefined + undefined --->NaN
document.write(result03 + "<br>");// NaN
// 方法调用
var result04 = show(123);
document.write(result04 + "<br>");// abcundefined
//4. 在方法声明中有一个隐藏的的内置对象，参数对象 arguments(数组),封装了所有的实际参数。
// 求一下1~10的和
document.write("<hr>");
function sum() {
//
var sum = 0;
for (var i = 0; i < arguments.length; i++) {
sum += arguments[i];
}
document.write(arguments[0] + "<br>");
document.write(arguments[1] + "<br>");
document.write(arguments[2] + "<br>");
return sum;
}
// 求一下1~10的和
var sum = sum(1,2,3);
alert(sum);// 55
</script>Array对象
<script>
//Array数组对象
/*
1.创建 (三种方式)
1. var array=new Array(数组长度);
2. var array02=new Array(元素列表)
3. var array03=[元素列表];
2. 方法
join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
pop() 删除并返回数组的最后一个元素
push() 向数组的末尾添加一个或更多元素，并返回新的长度。
3.属性：
length：数组的长度
4.js中的数组特点
1. 数组元素的数据类型不限制
2. 数组的长度是可变的。
*/
// 1.var array = new Array(数组长度);
// 创建一个数组长度为5的容器
var array = new Array(5);
//alert("array数组长度值为：" + array.length);
// 第二种 var array02 = new Array(元素列表);
var arr02 = new Array(1,2,3,4);
document.write(arr02 + "<br>");
document.write("<hr>");
// 第三种 var array03 = [元素列表];
var array03 = [1,true,null,undefined,NaN,new Date(),"abc"];
document.write(array03 + "<br>")
// join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
var arr01 = [1,2,3,4,5];
/*var result01 = arr01.join("-");
document.write("<hr>");
document.write(result01 + "<br>");*/
var result = arr01.pop();
var length = arr01.length;
document.write("删除并获取最后一个元素：" + result + "<br>");
document.write( "此时数组长度为：" +length + "<br>");// 4
document.write( arr01 + "<br>");
// arr01 ----> 1,2,3,4
// push() 向数组的末尾添加一个或更多元素，并返回新的长度。
var newLength = arr01.push(5,6,7,8);
document.write("<hr>");
document.write( "此时数组长度为：" +newLength + "<br>");// 8
document.write( arr01 + "<br>");
document.write("<hr>");
// 构建一个数组
var arr05 = new Array(5);
arr05[10] = 123;
document.write(arr05 + "<br>");
document.write(arr05[4] + "<br>");
document.write(arr05[10] + "<br>");
document.write(arr05.length + "<br>");
</script>-
Math数学对象：操作和Java语法一样
-
<script> /* Date对象,日期对象 1. 创建日期对象 new Date() 2. 方法 1.getTime();获取距离1970年1月1日零时至今的毫秒值 2.toLocalString():返回当前date对象对应的时间本地字符串格式 */ var date = new Date(); document.write(date + "<br>"); document.write(date.getTime() + "<br>"); document.write(date.toLocaleString() + "<br>"); </script> -
Date日期对象：操作和Java语法一样
-
<script> /* Math数学对象不用创建,直接使用,格式:Math.方法名()//属性名 属性: PI:圆周率 方法: random():随机数[0,1) number小数 round():四舍五入 ceil():向上取整 floor():向下取整 pow(x,y):返回x的y次方 */ document.write(Math.PI + "<br>"); document.write(Math.round(5.5) + "<br>");//6 document.write(Math.ceil(6.3) + "<br>");//7 document.write(Math.floor(3.3) + "<br>");//3 document.write(Math.pow(4, 3) + "<br>");//64 document.write("<hr>"); </script>
RegExp正则表达式对象
1.正则表达式：定义字符串的组成规则
1.单个字符：[]
如：[a],[ab],[a-z],[a-zA-Z],[a-zA-Z0-9]，[a-zA-Z0-9_#￥@]
特殊字符：可以表示特殊含义的单个字符:
\d:单个数字字符 等价于[0-9]
\w:单个单词字符 等价于[a-zA-Z0-9_#￥@...]
2.量词符号：
？：表示出现0次或者1次
* ：表示出现0次或者多次>=0
+ : 出现1次或者多次 x>=1
{m,n}：表示---->最少m次，最多n次 m<=x<=n
缺省配置：
{m,}:最少m次 x>=m
{,n} :最多n次 x<=n
3.开始和结束符号
^:代表正则表达式的开始
$:代表正则表达式的结束
2.正则对象的创建
1.var reg=new RegExp("正则表达式");//不建议使用
2.var reg=/正则表达式/；
方法：
test（参数）：用来验证指定的字符串是否符合正则表达式的规则，符合为true，不符合为false
//创建正则表达式
//第一种方式
//6-12位的字母数字和其他符号
var reg01 = new RegExp("^\\w{6,12}$");
var str = "fghkljkji";
var str1 = "fghkljkji.";
document.write(reg01.test(str) + "<br><hr>");
//第二种方式
var reg02 = /^\w{6,12}$/;
document.write(reg02.test(str1) + "<br><hr>");Global对象
<script>
/*
Global:全局对象,它也没有对应的构造方法,所以也是直接通过名字直接调用 方法名称();
1.方法
decodeURI():解码某个编码的URI
decodeURIComponent() 解码一个编码的URI组件
encodeURI() 把字符串编码为URI
encodeURIComponent() 把字符串编码为URI组件
eval() 计算JavaScript字符串,并把它作为脚本代码执行
parseInt() 解析一个字符串并返回一个整数 逐一判断每一个字符串是否是数字.直到不是数字为止,
*/
var str01 = "中国制造";
var str02 = encodeURI(str01);
document.write(str02);//%E4%B8%AD%E5%9B%BD%E5%88%B6%E9%80%A0
document.write(decodeURI(str02));//中国 0制造
//下面方法比上面方法容纳长度更大
document.write(encodeURIComponent(str01));//%E4%B8%AD%E5%9B%BD%E5%88%B6%E9%80%A0
document.write(decodeURIComponent(str02));//中国制造
// eval() 计算JavaScript字符串,并把它作为脚本代码执行
var jsScript = "alert('abc')";
eval(jsScript);
</script>
1133
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
