笔记-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)+"&nbsp &nbsp &nbsp");

                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>

笔记-JavaWeb学习之旅7的更多相关文章

笔记-JavaWeb学习之旅5
CP30的演示 package cn.itcast.datasourcejdbc; import com.mchange.v2.c3p0.ComboPooledDataSource; import j ...
笔记-JavaWeb学习之旅19
Redis:redis是一款高性能的NOSQL系列的非关系型数据库 NOSQL: Not Only SQL ,意即"不仅仅是SQL",是一项全新的数据库理念,泛指非关系型数据库 r ...
笔记-JavaWeb学习之旅18
AJAX:ASynchronous JavaScript And XML 异步的JavaScript 和XML 异步和同步:客户端和服务器端相互通信的基础上同步:客户端操作后必须等待服务器端的响应, ...
笔记-JavaWeb学习之旅17
1.过滤选择器首元素选择器:first 获得选择的元素中的第一个元素尾元素选择器:last获得选择元素中的最后一个元素非元素选择器:not(selector) 不包括指定内容的元素偶数选择器: ...
笔记-JavaWeb学习之旅16
增强对象的功能动态代理:在内存中形成代理类实现步骤: 代理对象和真实对象实现相同的接口代理对象 = Proxy.newProxyInstance(); 使用代理对象调用真实对象的方法增强方法 ...
笔记-JavaWeb学习之旅15
Filter:过滤器概念:当访问服务器的资源是,过滤器可以将请求拦截下来,完成一些特殊的功能快速入门: 步骤: 定义一个类,实现接口Filter 复写方法配置拦截路径 package com.d ...
笔记-JavaWeb学习之旅14
JSTL:JavaServer Pages Tag Library JSP标准标签库 if标签 <%@ page import="java.util.ArrayList" % ...
笔记-JavaWeb学习之旅10
Servlet server applet运行在服务器端的小程序,servlet就是一个接口,定义了Java类被浏览器访问到的规则(Java类重写这个接口,就可以被浏览器(tomcat)识别) Ser ...
笔记-JavaWeb学习之旅13
验证码案列昨天晚上出现的500错误原因在于验证码没有获取到,获取验证码是应该获取的是共享域中的验证码,而我把获取值得键给写成了jsp中的键,而不是内存生成图片中,然后把图片上传到共享域中的键.这两个 ...

随机推荐

mybatis入门小结（六）
入门小结---查询 1.1.1.1.1 #{}和${} #{}表示一个占位符号,通过#{}可以实现preparedStatement向占位符中设置值,自动进行java类型和jdbc类型转换,#{}可以 ...
使用MSSQL同步&发布数据库快照遇到错误：对路径“xxxxx”访问被拒绝的解决方法
使用MSSQL同步数据库同步做后后测试:先在同步那台服务器(服务器A)数据库里修改里面数据库,然后再去被同步那台服务器(服务器B)看下数据有没被同步过去发布数据库快照遇到错误:对路径“xxxxx” ...
emoji字符不能插入MySQL数据库，提示“'\xF0\x9F\x98\x84' for column 'XXXX' at row 1”
从网络中取下的数据解析后不能插入数据库,提示某个字段有问题,问题提示如下: SQLException: Incorrect string value: '\xF0\x9F\x98\x84' for c ...
appium(5)-Appium capabilities
Appium Capabilities Appium server capabilities Capability Description Values automationName Which au ...
jquery DataTables表格插件的使用(网页数据表格化及分页显示)
DataTables - 非常强大的 jQuery 表格插件,可变宽页码浏览,现场过滤. 多列排序,自动探测数据类型,智能列宽,可从几乎任何数据源获取数据. 那么在Bootstrap下如何使用Data ...
struts2中<s:if>标签的使用
转载:http://blog.sina.com.cn/s/blog_5f9938640100v2kr.html A:<s:if>判断字符串的问题: 1.判断单个字符:<s:if te ...
juery的跨域请求2
时间过得好快,又被拉回js战场时, 跨域问题这个伤疤又开疼了. 好在,有jquery帮忙,跨域问题似乎没那么难缠了.这次也借此机会对跨域问题来给刨根问底,结合实际的开发项目,查阅了相关资料,算是解决了 ...
HDU5919 Sequence2
传送门这道题是主席树好题啊-- 题目大意:给定一个序列,每次给定一段区间,区间内所有不同的数第一次出现的位置排成一个序列,求这个序列的中位数. 其实求中位数并不是很难,只要我们能把这个序列中不同的数 ...
poj2226Muddy Fields——二分图匹配
题目:http://poj.org/problem?id=2226 把行连通块作为左部点,列连通块作为右部点,行列连通块有相交的格子就连边: 则问题转化为求最小点覆盖,即最大匹配. 代码如下: #in ...
saltstack api安装使用
Salt自然也是提供api的,使用api对自动化有极大的帮助,我们使用rest风格的api,当然大家都知道salt是python写的,那么自然也就提供了对应的api,但是并不建议使用,因为调用pyth ...