JavaScript
ECMAScript：客户端语言的标准
1 基本语法：
1 与html的结合方式
1 内部JS
定义<script>,标签体内容就是js代码
2 外部JS
定义<script>,同过src属性引入外部的js文件
*注意：1 <script>可以定义在html页面的任何地方，但是定义的位置会影响执行顺序
2 <script>可以定义多个
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script> alert("helloworld")</script> <!-- 内部JS -->>
<script src=h.js></script> <!-- 外部JS -->>
</body>
</html>
2 注释
1 单行注释： //
2 多行注释： /* */
3 数据类型
1 原始数据类型(基本数据类型)
1 number：数字 整数/小数/NaN(not a number 一个不是数字的数字类型)
2 string：字符串 字符串
3 boolean：true和false
4 null：一个对象为空的占位符
5 undefined：未定义。如果一个变量没有给初始化值，则会被默认赋值为undefined
2 引用数据类型：对象
4 变量
*变量：一小块存储数据的内存空间
*Java语言是强类型语言，而JavaScript是弱类型语言
*强类型：在开辟变量存储空间时，定义了空间将来存储的数据的数据类型。只能存储固定类型的数据
*弱类型：在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放任意类型的数据
*语法：
*var 变量名 = 初始化值;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
//number类型
var num1=1;
var num2=1.1;
var num3=NaN;
//string类型
var str1="abc";
var str2='abc';
var str3=null;
//boolean类型
var flag=false;
//null和undefined
var obj=null;
var obj1=undefined;
var obj2;
//输出
document.write(num1+"---"+typeof(num1)+"<br>");
document.write(num2+"<br>");
document.write(num3+"<br>");
document.write(str1+"<br>");
document.write(str2+"<br>");
document.write(str3+"<br>");
document.write(flag+"<br>");
document.write(obj+"<br>");
document.write(obj1+"<br>");
document.write(obj2+"<br>");
</script>
</body>
</html>
5 运算符
1 一元运算符：只有一个运算数的运算符
++ --，
+(正号) -(负号)
*注意：在JS中，如果运算数不是运算符所要求的类型，那么JS引擎会自动的将运算数进行类型转换
*其他类型转number：
* string转number：按照字面值转换。如果字面值不是数字，则转为NaN
*boolean转number: true转为1，false转为0
2 算数运算符
+ - * / % ...
3 赋值运算符
= +=...
4 比较运算符
> < >= <= == ===(全等于)
*比较方式：
1 类型相同，直接比较
*字符串，按照字典顺序比较，按位逐一比较，直到得出大小为止。
2 类型不同，先进行类型转换，再比较
*===，全等于，在比较之前，先判断类型，如果类型不一样，直接返回false
5 逻辑运算符
&& || !
*其他类型转boolean
1 number，0或NaN为假，其他为真
2 string 除了空字符串(“”)，其他都是true
3 null和undefined 都是false
4 对象 所有对象都为true
6 三元运算符
? :
var a=3;
var b=4;
var c=a>b?1:0;
6 流程控制语句
1 if...else
2 switch
*在java中，switch语句可以接收的数据类型：byte,int,short,char,枚举，String
*在js中，switch语句可以接收任意的原始数据类型
3 while
4 do...while
5 for
2 基本对象：
Function：函数对象
1 创建
2 方法
3 属性
4 特点
5 调用
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <script> /* Function:函数对象 1 创建 1. function 方法名称(形参列表){ 方法体 } 2. var 方法名=function(形参列表){ 方法体 } 2 方法 3 属性 length:代表形参的个数 4 特点 1. 方法定义时，形参的类型不用写,返回值类型不用写 2. 方法是一个对象，如果定义名称相同的方法，会覆盖 3. 在js中，方法的调用只与方法的名称有关，和参数列表无关 4. 在方法声明中有一个隐藏的内置对象(数组)，arguments，封装所有的实际参数 5 调用 方法名称(实际参数列表); //创建方式 function fun2(a,b){ alert(a+b); } fun(3,4); * */ //创建方式1 function fun1(a,b){ alert(a+b); } fun1(3,4); //创建方式2 var fun2=function(a,b){ alert(a+b); } fun2(3,4); //求任意个数的数的和 function fun3(){ var sum=0; for(var i=0;i<arguments.length;i++) { sum+=arguments[i]; } return sum; } var sum=fun3(1,2,3); alert(sum); </script> <body> </body> </html>
Array
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <script> /* * Array:数组对象 1. 创建 1. var arr=new Array(默认长度); 2. var arr=[元素列表]; 3. var arr=new Array(元素列表); 2. 方法 1. join(参数):将数组中的元素按照指定的分隔符拼接为字符串 2. push():向数组的末尾添加一个或更多的元素 3. 属性 1. length 数组的长度 4. 特点 1. js中，数组元素的类型是可变的 2. js中，数组的长度可变 */ //1. 创建方式 var arr1=new Array(1,2,3); var arr1=new Array(5); var arr1=new Array[1,2,3,4]; </script> <body> </body> </html>
Boolean
Date
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <script> /* * Date: 日期对象 1 创建： var Date=new Date(); 2 方法： toLocaleString():返回当前date对象对应的时间本地字符串格式 getTime():获取毫秒值。返回当前日期对象描述的时间到1970年1月1日零点的毫秒值差 */ var date=new Date(); document.write(date+"<br>"); document.write(date.toLocaleString()+"<br>"); document.write(date.getTime()+"<br>"); </script> <body> </body> </html>
Math
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <script> /* Math:数学 1 创建： *特点：Math对象不用创建，直接使用 Math.方法名(); 2 方法： 1 random() 返回0~1之间的随机数,左闭右开 2 ceil(x); 对数进行上舍入 3 floor(x); 对数进行下舍入 4 round(x); 把数四舍五入为最接近的整数 3 属性： PI */ document.write(Math.random()+"<br>"); document.write(Math.PI+"<br>"); document.write(Math.round(3.14)+"<br>"); document.write(Math.random()+"<br>"); document.write(Math.random()+"<br>"); /* 取1~100之间的随机整数 */ var ran=Math.random()*100; ran=Math.floor(ran)+1; document.write(ran); </script> <body> </body> </html>
Number
String
RegExp
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script>
/*
RegExp:正则表达式对象
1 正则表达式：定义字符串的组成规则
1 单个字符:[]
如： [a] [ab] [a-zA-Z0-9_]
*特殊符号代表特殊含义的单个字符：
\d:单个数字字符 [0-9]
\w:单个单词字符 [a-zA-Z0-9_]
2 量词符号：
* 表示出现0次或多次
+出现1次或多次
? 表示出现0次或1次
{m,n}:表示m<=数量<=n
* m如果缺省 {,n}:最多n次
* n如果缺省 {m,}:最少m次
\w* 单个字符出现0次或多次
2 正则对象
1 创建
1 var reg=new RegExp("正则表达式");
2 var reg=/正则表达式/;
2 方法
1 test(参数):验证指定的字符串是否符合正则定义的规范
3 开始结束符号
^:开始
$:结束
*/
var reg=new RegExp("^\\w{6,12}$");
var reg2=/^\w{6,12}$/;
//alert(reg);
//alert(reg2);
var username="zhangsan";
var flag=reg2.test(username);
alert(flag);
</script>
<body>
</body>
</html>
Global
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script>
/*
Global
1 特点：全局对象，这个Global中封装的方法不需要对象就可以直接调用
2 方法：
1 encodeURI() url编码
2 decodeURI() url解码
3 encodeURIComponent() url编码,编码的字符更多
4 decodeURIComponent() url解码,解码的字符更多
5 parseInt():将字符串转为数字
* 逐一判断每一个字符是否是数字，直到不是数字为止，将前面的数字部分转为number
6 eval():将JavaScript字符串，并把它作为脚本代码来执行
3 URL编码
*/
var str="嘿哈";
var encode=encodeURI(str);
document.write(encode+"<br>");
var s=decodeURI(encode);
document.write(s+"<br>");
var str1="嘿哈";
var encode1=encodeURIComponent(str1);
document.write(encode1+"<br>");
var s1=decodeURIComponent(encode1);
document.write(s1+"<br>");
var str="123abc";
var number=parseInt(str);
alert(number+1);
var str="a123abc";
var number=parseInt(str);
alert(number+1);
var jscode="alert(123)";
eval(jscode);
</script>
<body>
</body>
</html>
DOM简单学习
*功能：控制html文档的内容
*代码：获取页面标签(元素)对象 Element
* document.getElementById("id值"):通过元素的id获取元素对象
*操作Element对象：
1 修改属性值
1 明确获取的对象是哪一个
2 查看API文档，找其中有哪些属性可以设置
2 修改标签体内容
* 属性：innerHTML
1 获取元素对象
2 使用innerHTML属性修改标签体内容
事件简单学习
* 功能：某些组件被执行了某些操作后，触发某些代码的执行
*如何绑定事件
1 直接在html标签上，指定事件的属性(操作)，属性值就是js代码
1 事件：onclick---单击时间
2 通过js获取元素对象，指定事件属性，设置一个函数
BOM
1 概念：Browser Object Model 浏览器对象模型
*将浏览器的各个组成部分封装成对象
2 组成：
Window：窗口对象
History：历史记录对象
Location：地址栏对象
Navigator：浏览器对象
Screen：显示器屏幕对象
3 Window对象
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <input id="openBtn" type="button" value="打开窗口"> <input id="closeBtn" type="button" value="关闭窗口"> </body> <script> /* * Window：窗口对象 1 创建 2 方法 1 与弹出框有关的方法 alert():显示带有一段消息和一个确认按钮的警告框 confirm():显示带有一段信息以及确认按钮和取消按钮的对话框 * 点击确定按钮，方法返回true *点击取消按钮，方法返回false prompt(): *返回值：获取用户输入的值 2 与打开关闭有关的方法 close() 关闭浏览器窗口 * 谁调用就关闭谁 open() 打开一个新的浏览器窗口 * 返回一个新的Window对象 3 与定时器有关的方式 1 setTimeout() 参数： 1 js的代码或者方法对象 2 毫秒值 2 claerTimeout() 3 setInterval() 4 clearInterval() 3 属性 1 获取其他BOM对象 history location Navigator scrren 3 获取DOM对象 document 4 特点 *Window对象不需要创建，可以直接使用 window.方法名(); *window引用可以省略 方法名(); */ alert("hello window"); window.alert("hello window"); //确认框 var flag=confirm("确定退出?"); if(flag) { alert("退出"); } else{ alert("返回"); } //输入框 var a=prompt("请输入用户名"); alert(a); //打开新窗口 var openBtn=document.getElementById("openBtn"); var newWindow; openBtn.onclick=function(){ //打开新窗口 newWindow=open(); } //关闭新窗口 var closeBtn=document.getElementById("closeBtn"); closeBtn.onclick=function(){ //关闭新窗口 newWindow.close(); } //一次性定时器 var id=setTimeout(fun,3000); clearTimeout(id); function fun(){ alert("boom"); } //循环定时器和上面一样 //获取history var h1=window.history; var h2=history; </script> </html>
4 Location 地址栏对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<input type="button" id="btn" value="刷新">
<input type="button" id="btn" value="去百度">
</body>
<script>
/*
Location：地址栏对象
1 创建(获取)
1 window.location
2 location
2 方法：
reload() 刷新
3 属性：
* href 设置或返回完整的url
*/
//reload方法，定义一个按钮，点击这个按钮，刷新页面
//获取按钮
var btn=document.getElementById("btn");
//绑定单击事件
btn.onclick=function(){
location.reload();
}
//获取href
var href=location.href;
//alert(href);
//点击按钮，访问百度
//获取按钮
var goBaidu=document.getElementById("btn");
//绑定单击事件
goBaidu.onclick=function(){
location.href="https://www.baidu.com";
}
</script>
</html>
5 History：历史记录对象
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <input type="button" id="btn" value="历史记录个数"> <a href="location.html">window页面</a> <input type="button" id="forward" value="前进"> </body> <script> /* * History:历史记录对象 1 创建 1 window.history 2 history 2 方法 back() 后退 forward() 前进 go(参数) 加载history列表中的某个具体页面 * 正数 前进几个历史记录 * 负数 后退几个历史记录 3 属性 * length 返回当前窗口历史列表中的url记录 */ var btn=document.getElementById("btn"); btn.onclick=function(){ var len=history.length; alert(len); } var forward=document.getElementById("forward"); forward.onclick=function(){ history.forward(); } </script> </html>
DOM
* 概念：Document Object Model 文档对象模型
* 将标记语言文档的各个组成部分，封装为对象，可以使用这些对象，对标记语言文档进行CRUD的动态操作
*核心DOM模型
* Document：文档对象
* Element：元素对象
* Node：节点对象，其他5个的父对象
*HTML DOM
浙公网安备 33010602011771号