为什么要学习javascript
1.表单验证 - 减轻服务器端压力
2.页面的动态交互
3.页面动态效果
什么是javascript
JavaScript是一种基于对象和事件驱动的 , 并具有安全性能的脚本语言
JavaScript的特点
向HTML页面中添加交互行为
脚本语言 , 语法和Java类似
解析型语言 , 边执行边解释
- 核心（ECMAScript）
- 文档对象模型（DOM）
- 浏览器对象模型（BOM）
发展史：
* 1992年，nombas公司 C--,最早的客户端脚本语言。专门用于表单验证。 后更名为 scriptEarth
* 网景 scriptlive，后来找到sun公司合作，共同开发出 JavaScript
* 微软抄袭JavaScript 定义了 JScript
* ECMA(欧洲计算机制造商协会)定义了一套客户端脚本语言的规范 ECMAScript规范
JavaScript = ECMAScript规范 + js自己特有的东西(BOM/DOM)
js与html结合方式
* 内部js：
* 定义<script>标签，标签体书写js代码
* 注意：<script>标签定义的位置，会影响执行顺序,可以放到任意位置上
* 外部js:
* 定义<script>标签,通过src属性导入外部js文件
- 基本数据类型：
ECMAScript规范
语法：
常量：
- 基本数据类型：
Java中：
整型：byte short int long
浮点型：float double
布尔型：boolean
字符型：char - js原始数据类型:
Number 整数+小数
undefined 未定义
Boolean:true+false
String:字符型+字符串
Object :引用类型+引用对象
变量:
语法:
使用 var定义变量: var i = “abc”;
使用 var定义常量: Const i = “abc”
判断原始类型: alert ltypeof 变量名
* typeof运算符：获取变量的数据类型
* var关键字如果不书写，该变量则为全局变量
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 在页面上写一对script 标签，js代码放到这对标签内部
script这对标签，要放哪里，这对表可以放到页面的任何位置
script这对标签放在前面和放到最后，是由区别的，代码的执行顺序是有区别
-->
<script type="text/javascript">
/*
数据类型：Java 中的基本数据类型：四类八种
整数型：byte short int long
小数型: flaot double
布尔型：boolean
字符型：char
引用类型：类，接口，枚举，数组
JS:是一门弱类型语言
他有几个原始数据类型：
Number 数字型 整数，小数
undefined 未定义
Boolean 布尔型
String 字符串类型 字符 字符串
Object 引用类型 对象 null
*/
//定义变量 java中 数据类型 变量名=值
//JS中 定义变量使用一个关键字 var
var num=100;
var num2=3.14;
var str="abc";
var obj=new Object();
var flag=true;
//有一个运算符 typeof 可以知晓他是什么原始数据类型
alert(typeof num);
alert(typeof num2);
alert(typeof str);
alert(typeof obj);
alert(typeof flag);
//ES5
//ES6 规范 可以定义常量 const
const a=100; //定义常量
alert(a);
</script>
</head>
<body>
</body>
</html>
语句
if
switch
while
do…while
for
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//语句
/*
if
for
while
do while
switch
语法跟Java中一样
*/
for (var i = 0; i < 10; i++) {
//alert(i);
document.write("<div style='color:red;font-size: 30px;'>" + i + "</div>");
}
//计算 1---100的和
var sum = 0;
var num = 1;
while (num <= 100) {
sum += num;
num++;
}
document.write(sum);
/* switch (){
case value:
break;
default:
break;
} */
</script>
</head>
<body>
</body>
</html>
运算符:自动类型转换
-
一元运算符
++ – +(正) -(负)
* 注意：在js中，如果传递给运算符的值，和 运算符想要接受的 值 的类型不匹配，则会自动类型转换其他类型转为number
string：将字符串的字面值，转为number，如果字面值不是数字，则 转为NaN
boolean： true为1 false 为0
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//数学运算符: + - * / % ++ --
//自动类型转换:当这个运算符运算的值,和他期望的值不一样,就会发生自动类型转换
var a="a2"; //"a2"从字面上转不了数字的时候,就转成 NaN 不是数字的数字
var b=3;
var c=a*b; //NaN*3 NaN 参与数学运算,结果都是NaN
alert(c);
//字符串转数字,字面能转数字,就转成数字,转不了,转NaN
var num=+"aaa10";
//var num2=num*1;
alert(num+1);
//布尔类转数字 true 转1 false转成0
var flag=false;
var num3=flag+1;
alert(num3);
</script>
</head>
<body>
</body>
</html>
-
比较运算符
* > < >= <=:
* NaN参与的运算，结果都为fasle，除了(!=)
* 字符串比较小大：如果长度一致按照字典顺序比较 长度不一致 那谁的长度长那就谁大
* !=:
* == ===(全等于):
* 全等于比较时，先比较类型，如果类型不一致，直接返回false -
逻辑运算符
&& || !
其他类型转boolean
* number：非0为true，0和NaN为false，
* string: 除了空字符串("")，其他都是true
* null 和 undefined:转为false
* 对象:所有对象都为true -
算术运算符：
+ - * / %
注意:NaN 参与数学运算 结果都为NaN -
赋值运算符
= += … -
三元运算符
表达式 ? 值1 : 值2;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
/*
比较运算符：== === >= <= < > != instanceof
*/
var str = "";
var str2 = "d";
//比较两个字符串 内容是否相同
//alert(str==str2);
//字符串转布尔类型: 空串转false 非空串转成true
if (str) {
alert(true)
} else {
alert(false)
}
//数字类型转布尔:0转成false 非0 转成true
if (0) {
alert(true);
} else {
alert(0);
}
var obj = new Object();
obj = null;
if (obj) {
alert("对象非null转成true")
} else {
alert("null 转成false");
}
//undefined 转布尔 转成false
var v;
//alert(v);
if (v) {
alert("true")
} else {
alert(" undefined转成false");
}
var vv = NaN;
//NaN 转布尔类型转成false
if (vv) {
alert("true")
} else {
alert("NaN转成false");
}
// == ===
var aa = 1;
var bb = "1";
/* == 会发生自动类型转换 */
var ff = aa == bb;
alert(ff);
/* === 先比较类型，如果类型不一致，就直接false .如果类型一致，再去比较值 */
var fff = aa === bb;
</script>
</head>
<body>
</body>
</html>
案例:九九乘法表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
for(var i=0;i<=9;i++){
for(var j=0;j<=i;j++){
document.write(j+"*"+i+"="+i*j+" ")
}
document.write("<br>")
}
</script>
</head>
<body>
</body>
</html>
案例:
对象：
js是一门基于对象的语言
基于对象：不能由原生的对象派生出新的对象。换句话说，不存在继承关系
Function(*****): 代表函数
创建方式：
* var fun = new Function(“参数列表”,“方法体”);
* function 方法名称(形参列表){
方法体
}
* var fun = function(){
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
/* 函数：类似于Java中的方法，对一段功能逻辑的封装，以实现重复调用 */
//定义函数的语法
//方式1:
var num=10; //全局变量
function show(){
//封装功能逻辑
//局部变量
var a=10;
var b=20;
alert(a+b);
}
//直接调用函数
show();
//方式2:
var test=function(){
//局部变量
var aa=100;
var bb=200;
alert(aa+bb);
}
//调用函数
test();
//匿名函数
/* function(){
//局部变量
var aa=100;
var bb=200;
alert(aa+bb);
} */
</script>
</head>
<body>
</body>
</html>
-
2属性：
length：形参的个数 -
使用：
* 函数名称(实参列表);
* 特点：
1.函数的调用，只与函数名称有关，与实参列表无关
2.函数内部有内置对象 arguments 封装实参数组
void运算符：拦截返回值，一般结合a标签一起使用
* 注销a标签跳转功能，保留可被点击的功能
<//a href=“javascript:void(0);” οnclick=“exit();”>退出
JS中的内置对象
一：String 对象
-
1.定义方式1： String str=new String(“abckdddd”);
定义方式2：var str=“我爱你爱你”; -
2.属性：length: 字符串的长度
-
3 方法：
charAt() 返回在指定位置的字符。
例子：var v=“abcd”;
var a=v.charAt(2);concat() 连接字符串。 例子：var v="ab"; var a="cd"; var z=v.concat(a); indexOf() 根据字符检索此符在字符串中的索引。 例子：var v="abcde"; var z=v.indexOf("c"); lastIndexOf() 从后向前搜索字符串。 substring() 提取字符串中两个指定的索引号之间的字符。 var v="abcde"; var z=v.substring(0,3); 含头不含尾 toLowerCase() 把字符串转换为小写。 例子： var str = "Hello World!"; document.write(str.toLocaleLowerCase()); toUpperCase() 把字符串转换为大写。 replace() 替换字符串。 例子： var v="abceaaaa"; var z=v.replace("a","h"); 参1：被替换的字符/或字符串 参数2：替换成哪个字符/或字符串 split() 把字符串分割为字符串数组。 例子： var v="a#b#c#d"; var z=v.split("#"); * trim():去除字符串两端的空格 例子： var v=" abcd "; var z=v.trim();
三：Number对象
定义方式：var num=new Number(555.6666);
var num1=Number(5694);
方法：
toString() 把数字类型转成字符串类型
例子：
var v=Number(695444);
var z=v.toString();
toPrecision() 把数字格式化为指定的长度。也就是小数后面保留几位
例子：
var v=Number(3.5999999999999);
var z=v.toPrecision(4);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
//创建对象
var num = new Number(100);
var num2 = Number(45.132432);
// MAX_VALUE 可表示的最大的数。 1.0 4.0
// MIN_VALUE 可表示的最小的数。
//
//
// toString 把数字转换为字符串，使用指定的基数。
var str1 = num.toString()
alert(str1+1);
// toFixed 把数字转换为字符串，结果的小数点后有指定位数的数字。
var str2=num2.toFixed(3);
alert(str2);
// toPrecision 把数字格式化为指定的长度。
var str3=num2.toPrecision(1);
alert(str3)
</script>
</head>
<body>
</body>
</html>
四：Date 对象
定义方式： var myDate=new Date();
方法：
getTime() 获取从1970-01-01 00:00：00 到当前的毫秒值
toLocaleString() 将时间转化成本地格式 利于阅读
例子
var myDate=new Data();
var time=myDate.getTime();
var localTime=time.toLocaleString();
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
//定义对象
var data=new Date();
//获取年份
var year=data.getFullYear();
document.write(year);
//获取当前毫秒值
var time=data.getTime();
document.write(time);
//获取当前时间
var local=data.toLocaleString();
document.write(local);
</script>
</head>
<body>
</body>
</html>
五：Math 对象
特点： 该对象不需要创建 直接对象名点上方法
Math.random()；随机产生0----1 之间的随机数 var num=Math.random()*100;
Math.round(2.36); 对小数进行四舍五入 得到一个整数 var n=Math.round(Math.random()*100);
Math.min(15,25); 取最小值
Math.max(15,25);取最大值
Math. abs(-2) 返回数的绝对值。
Math.floor(2.6);向下取整
Math.ceil(3.82);向下取整
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
//产生随机数
var ran = Math.random() * 100;
document.write(ran);
//四舍五入
var si = Math.round(3.54546435);
alert(si);
// Math.min(15,25); 取最小值
var is1 = Math.max(15, 25); //取最大值
var is2 = Math.abs(-2) //返回数的绝对值。
var is3 = Math.floor(2.6); //向下取整
var is4 = Math.ceil(3.82); //向上取整
alert(is1);
alert(is2);
alert(is3);
alert(is4);
</script>
</head>
<body>
</body>
</html>
案例:4个随机数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
var str = "421421342gfdvgdf";
//随机截取4个角标,然后取出值进行拼接
var one = Math.floor(Math.random() * str.length);
var two = Math.floor(Math.random() * str.length);
var three = Math.floor(Math.random() * str.length);
var four = Math.floor(Math.random() * str.length);
var number=str.charAt(one).concat(str.charAt(two)).concat(str.charAt(three)).concat(str.charAt(four));
alert(number);
</script>
</head>
<body>
</body>
</html>
六：数组对象：
-
定义方式： var arr=new Array(2,6,8);
var arr1=[6,“a”,6];
属性： length 数组的长度 -
特点：
在js中数组可以存储任意类型元素
在js中数组的长度可变
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
//Array数组对象
//创建数组对象的方式
//1.JS中的数组长度是可变的
//2.JS中的数组元素可以是任意类型
//方式1：
var arr = new Array();
arr[0] = 12;
arr[1] = "你好";
arr[2] = true;
alert(arr[0]);
//方式2:
var arr2 = new Array(10, 20, 30, 40, 50, 60, "abc");
alert(arr2[arr2.length - 1]);
//方式3
var arr3 = new Array(3);
alert(arr3.length);
alert(arr3[3] = 10);
//简写
var arr4=[20,10,60,90,100];
//一维数组的遍历
for(var i=0;i<arr4.length;i++){
document.write(arr4[i]);
document.write("<br>");
}
//冒泡排序 选择排序
document.write("<hr>")
//二维数组的遍历
var arr5=[[20,50],[20,30],[10,20]];
for(var i=0;i<arr5.length;i++){
for(var j=0;j<arr5.length;j++){
document.write(arr5[i][j]);
document.write("<br>");
}
}
</script>
</head>
<body>
</body>
</html>
- 方法：
-
concat() 连接两个或更多的数组，并返回结果。
例子：var v=[1,2]; var v2=[3,4];
var z=v.concat(v2); -
join()
把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
var v=[1,2,3];
var z=v.join("-"); 给数组元素之间添加分隔符 -
pop() 删除并返回数组的最后一个元素
例子：
var arr = [1, 6, 20];
alert(arr.pop()); -
push() 向数组的末尾添加一个或更多元素，并返回新的数组长度。
例子：var arr = [1, 6, 20];
alert(arr.push(28));
reverse() 颠倒数组中元素的顺序。 -
sort() 对数组的元素进行排序 从小到大
* 默认排序方式：字典顺序
* 要想实现自己的比较方式，需要传入比较器方法对象
例子：var arr = [1, 6, 20, 100];
alert(arr.sort(bijiao));
function bijiao(a, b) {
if(a > b) {
return 1;
} else if(a == b) {
return 0;
} else {
return -1;
}
//return a-b;
}
-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
//concat() 连接两个或更多的数组，并返回结果。
var arr1 = [20, 30, 50];
var arr2 = [20, 30, 50];
var arr3 = arr1.concat(arr2)
alert(arr3);
//把字符串中的字符用指定的拼接符拼接起来
var arr4 = arr3.join("=");
alert(arr4);
//pop() 删除并返回数组的最后一个元素
var arr5 = arr1.pop();
alert(arr5);
//splice() 删除元素，并向数组添加新元素。
arr1.splice(1, 1, 100, 200, 300);
alert(arr1);
//push() 向数组的末尾添加一个或更多元素，并返回新的长度。
arr1.push(400, 500, 600, 700, 800);
alert(arr1);
//unshift() 向数组的开头添加一个或更多元素，并返回新的长度。
var arr7 = arr2.unshift(8, 7, 6, 5, 4, 3, 2, 1);
alert(arr2);
//reverse() 颠倒数组中元素的顺序
arr2.reverse();
alert(arr2);
//slice() 从某个已有的数组返回选定的元素
var arr8 = arr2.slice(0, 3)
alert(arr8);
//sort()不传参 默认按照字典顺序排列
//定义一个比较器
//如果要按照大小排序,那就传入一个比较器
arr1.sort(function(a, b) {
return a - b;
})
alert(arr1);
//简介语法
arr1.sort((a,b)=>a-b);
alert(arr1);
</script>
</head>
<body>
</body>
</html>
七* Global：全局方法对象
* 特点:该对象中的方法调用，不需要对象的引用，可直接使用
* isNaN() 检查某个值是否是NaN。
例子：var v=NaN; var v1="abc"; var v2=123;
var b=isNaN(v);
var b1=isNaN(v1);
var b2=isNaN(v2);
* parseInt() 解析一个字符串并返回一个整数。
* 从左向右依次查找，每一位是否是数字，直到遇到不是数字为止。将前边的值转为数字
比正号强大些 var v=+“123”；
例子： var v=“152abc”
var v="123";
var z=parseInt(v)+1;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
//直接调用即可
var a = NaN;
var b = NaN;
//alert(NaN!=NaN);//true 用==号判断不出来
//判断一个数据是不是NaN
var f = isNaN(a);
//alert(f);//true
// var str="123abcd";
//alert(str*1);//]是NaN
//把字符串转换成数字
var strs = parseInt(str);
//alert(strs);//把不是数组的部分进行剔除
//把字符串转换成浮点数
var str2 = "3.123232";
var str3 = parseFloat(str2);
// alert(str3);
// encodeURI()URL 编码
//decodeURI() URL 解码
// http://127.0.0.1:8848/mydemo?username=%E5%BC%A0%E4%B8%89 URL 编码
//编码
var v=encodeURI("李四");
alert(v);
alert(decodeURI("%E5%BC%A0%E4%B8%89"));
</script>
</head>
<body>
<a href="/mydemo?username=张三">提交</a>
</body>
</html>
八.RegExp(**):正则表达式对象
- 创建：
// 方式一
var regex = new RegExp(“正则表达式”, “标志”);
// 方式二
var regex = /正则表达式/标志
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
//创建正则对象
//方式一
var reg=new RegExp('^[a-z]{6,13}$',i);
//方式二
var regxs=/^[a-z]{6,13}$/i;
//test() 判断这个字符串,是否符合 正则
var str="safdsfs";
var reg=regxs.test(str);
// alert(reg);
//exec() 截取符合正则的数据
//案例:
//查找出三个字符组成的单词。
var str2 ="da jia hao hao xue xi a";
var reg2=/\b[a-z]{3}\b/g;
var line=null;
while((line=reg2.exec(str2))!=null){
alert(line);
}
</script>
</head>
<body>
</body>
</html>
-
正则表达式对象常用的方法：
test() 使用正则对象去匹配字符串 如果匹配成功返回ture，否则返回false.
exec() 根据正则表达式去查找字符串符合规则的内容。 -
模式：
g （全文查找出现的所有 pattern）
i （忽略大小写）var str = “hello123”;
var reg = /1+$/i;
alert(“匹配吗？”+reg.test(str)); -
查找出三个字符组成的单词。
*/
var str =“da jia hao hao xue xi a”;
var reg = /\b[a-z]{3}\b/gi;
var line ="";
while((line = reg.exec(str))!=null){
document.write(line+"
")
}
A-Z0-9 ↩︎
扫一扫
295
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
