笔记-JavaWeb学习之旅7
JavaScript基础
概念：一门客户端脚本语言，运行在客户端浏览器中，每一个浏览器都有JavaScript的解析引擎，是一个脚本语言，不需要编译，直接就可以被浏览器解析执行。
JavaScript = ECMAScript+JavaScript自己特有的东西(BOM+DOM)
ECMAScript:客户端脚本语言的标准
基本语法：
与html结合的方式有两种内部JS和外部JS
注释：单行注释//，多行注释/**/
数据类型：1.原始数据类型（number,string,boolean,null,undefined）2.引用数据类型：对象
九九乘法表练习
<!DOCTYPE html>
<!--suppress JSAnnotator -->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
td{
border:1px solid;
}
</style>
<script>
document.write("<table align='center'>");
for(var i= 1;i<=9;i++){
document.write("<tr>");
for(var j=1;j<=i;j++){
document.write("<td>");
var stri = i+"";
var strj = j+"";
var str = strj+"*"+stri+"=";
document.write(str+(i*j)+"     ");
document.write("</td>");
}
document.write("</tr>");
}
document.write("</table>");
</script>
</head>
<body>
</body>
</html>
JavaScript:Function对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//创建Function对象的方式
//第一种方式创建对象
function fun1(a,b){
document.write(a+b);
}
// 调用第一种方法
//fun1(2,5);//7
//第二种方式创建对象
var fun2=function(a,b){
document.write(a+b);
}
//调用第二种方法
fun2(2,8);//10
//Function的length属性,代表形参的个数
document.write(fun2.length);//2
//定义一个相同名称的方法，会覆盖之前的
function fun1(a,b){
document.write(a-b);
}
fun1(2,3)//-1
//求任意个数的和
//在啊方法的声明中有一个隐藏的内置对象(数组)
//他会封装所有的实际参数
function add(){
var sum= 0;
for(var i =0 ;i < arguments.length;i++){
sum+=arguments[i];
}
return sum;
}
var sum = add (1,2,3);
alert(sum);
</script>
</head>
<body>
</body>
</html>
Array对象
Array对象创建的三种方式
var arr = new Array(元素列表);
var arr = new Array(默认长度);
var arr = [元素列表];
Array对象的常用方法
join(参数):将数组中的元素按照指定的元素进行拼接
特点：js中，数组元素的类型是可变的，数组长度是可变的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//创建对象
var arr1 = new Array(1,2,3,"hahhaha");//数组也可以存放不同的数据类型
var arr2 = new Array(5);//只有一个元素时候代表的是数组的长度
var arr3 = [1,2,3,4];
//输出数组,将会直接打印数组的内容
document.write(arr1+"<br>");//1,2,3,"hahhaha"
document.write(arr2+"<br>");//,,,,
document.write(arr3+"<br>");//1,2,3,4
//调用Array的join方法，将会按照指定格式打印数组
document.write(arr1.join("$"));
</script>
</head>
<body>
</body>
</html>
Date对象
创建方式 :var date = new Date();
常用方法：
toLocaleString():返回当前date对象对应的本地字符串格式
getTime()：获取毫秒值，返回当前如期对象描述的时间到1970年1月一日0点的毫秒值差
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var date = new Date();
document.write(date+"<br>");//Wed Jun 05 2019 16:09:06 GMT+0800 (中国标准时间)
document.write(date.toLocaleString()+"<br>");//2019/6/5 下午4:09:06
document.write(date.getTime()+"<br>")//1559722146361
</script>
</head>
<body>
</body>
</html>
Math对象：
不需要创建，直接可以调用方法
常用方法：
random()返回0~1之间的随机数，含0不包含1
ceil(x):对数字进行向上舍入，
floor(x);对数字进行向下舍入
round(x)，把数四舍五入
去1~100之间多的随机整数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var number = Math.round(Math.random()*100)+1;
document.write(number)
</script>
</head>
<body>
</body>
</html>
RegExp:正则表达式对象
正则表达式：定义字符串的组成规则
1.单个字符：[],比如[a],[ab],[a-zA-z0-9],特殊符号代表的单个字符，\d:单个数字字符[0-9],\w:单个单词字符[a-zA-z0-9_]
2.量词符号：
？：代表出现0次或1次，
*：表示出现0次或多次
+：出现1次或多次
{m,n}：表示 m<=数量 <=n
{,n}:最多n次
{m,}最少m次
开始结束符号 ：^表示开始，$表示结束
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//验证字符串是否符合正则表达式
var reg = /^\w{6,12}$/;
var name="zhangsan";
var flag = reg.test(name);
alert(flag);
</script>
</head>
<body>
</body>
</html>
Global对象
特点：全局对象，这个Global中封装的方法不需要对象就可以直接调用
常用方法:
encodeURI():url编码
decodeURL():url解码
encodeURIComponent():url编码，编码的字符更多
decodeURIComponent();url解码
parseInt：将字符串转为数字，会逐一判断每一个字符是否是数字，直到不是数字为止，会将前边数字部分转为number
isNaN():判断一个值是否是NaN
eval():将JavaScript字符串，并把它作为脚本代码来执行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var str = "云想衣裳花想容";
//编码
var encode = encodeURI(str);
document.write(encode+"<br>");
var s = decodeURI(encode);//%E4%BA%91%E6%83%B3%E8%A1%A3%E8%A3%B3%E8%8A%B1%E6%83%B3%E5%AE%B9
document.write(s+"<br>");
//编码
var encode1 = encodeURIComponent(str);
document.write(encode1);
//将字符串装换为数字
var str1 = "123abc";
var number = parseInt(str1);
alert(number);//123
//如果是a123abc会变成NaN类型
</script>
</head>
<body>
</body>
</html>
DOM简单学习：控制HTML文档的内容
绑定事件的两种方式
1.直接在html标签上，指定事件的属性操作，属性值就是代码
2.通过js获取元素对象，指定事件属性，设置一个函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--//onclick单击事件-->
<!--//直接在html标签上，指定事件的属性，属性值就是代码-->
<!--只要图片一接触到单击就会执行相应的代码-->
<img src="img/off.gif" onclick="fun();">
<img id="light2" src="img/on.gif">
<script>
function fun(){
for(var i=0;i<100;i++){
alert("你还可以点我最后一次");
}
}
function fun2(){
alert("咋老点我?")
}
var ligth2 = document.getElementById("light2");//获取id为light2元素对象
ligth2.onclick= fun2;//操作元素对象
</script>
</body>
</html>
电灯开关案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--导入图片-->
<img src="img/off.gif" id="hight">
<!--获取元素对象，改变属性-->
<script>
var hight = document.getElementById("hight");
//绑定事件,添加要执行的代码
var flag = false;
hight.onclick=function(){
//灯off代表状态为false
if(flag){
hight.src="img/off.gif";
flag=false;
}else{
//当单击的时候，灯如果状态为on,则单击后关闭灯
hight.src="img/on.gif";
flag=true;
}
}
</script>
</body>
</html>
BOM
1.概念：Browser Object Model 浏览器对象模型
将浏览器的各个组成部分封装成对象
2.组成：
window:窗口对象
Navigator:浏览器对象
Screen:显示器屏幕对象
History:历史记录对象
Location:地址栏对象
window：窗口对象
创建方式:无需创建，可以直接方法名调用
常用方法:alert(),confirm(),prompt()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="CloseWindow">关闭窗口</button>
<button id="NewWindow">打开窗口</button>
<script>
var newwindow;
var nw = document.getElementById("NewWindow");
nw.onclick=function(){
//这个open方法返回的是window对象
newwindow=open("https://www.baidu.com");
}
//document对象的方法getElementById会返回参数指定ID的对象
var cw = document.getElementById("CloseWindow");
function fun(){
//关闭打开的新窗口
newwindow.close();
}
//绑定元素对象
cw.onclick=fun;
</script>
</body>
</html>
最新文章
- 【转载】实时监听输入框值变化的完美方案：oninput & onpropertychange
- 一个简单的Windows下的socket程序
- 学习angular.js的一些笔记想法(上)
- XCL-Charts图表库简要教程及常见问题
- 二模07day1解题报告
- 几种常见SQL分页方式效率比较(转)
- 利用 ELK系统分析Nginx日志并对数据进行可视化展示
- 分布式java应用
- devi into python 笔记（三）callable getattr lambda表达式
- 动态规划——G 回文串
- Unity 3d 实施刚体力
- 记录一次webbrowser无法加载 activex 遇到的问题
- Gradle 1.12 翻译——第十七章. 从 Gradle 中调用 Ant
- DO,DTO和VO的使用
- iOS------教你如何APP怎么加急审核
- [arc066f]Contest with Drinks Hard
- SpaceVim的基本安装和常见问题
- BOS物流项目第十三天
- 大数据分析界的“神兽”Apache Kylin有多牛？【转】
- 使用C#把发表的时间改为几个月,几天前,几小时前,几分钟前,或几秒前
热门文章
- jquery 通过ajax 提交表单
- 九度OJ 1087：约数的个数 （数字特性）
- Find out when memory leaks are a concern and how to prevent them
- java之选择排序
- 怎样解决 no jzmq in java.library.path
- SpringBoot-(1)-IDEA创建SpringBoot项目并运行访问接口
- Android系统编译错误Note: Some input files use or override a deprecated API. 解决办法【转】
- Python作业之用户管理
- c++程序书写原则
- linux安装flume及问题