了解js-javaScript一篇足矣

时间  2021-03-16
标签 javascript html java 正则表达式 api 数组 浏览器 服务器 app dom 栏目 JavaScript 繁體版
原文   原文链接

1.javaScript

js.后台打印日志

  • console.log() --->控制台正常语句
  • document.write();文档打印，向页面输出内容

基本的语法

变量 定义变量须要 用关键字 ‘var’
int  i =10; var i=10 
 有五种类型： number 数值类型，boolean类型 String类型，object 对象类型，undefined 未定义类型  
注意:
	1.var能够省略不写,建议保留
	2.最后一个分号能够省略,建议保留
	3.同时定义多个变量能够用","隔开，公用一个‘var’关键字. var c = 45,d='qwe',f='68';

  • typeof操做符javascript

    • 写法：typeof(变量名) 或 typeof 变量名html

    • null与undefined的区别：java

      ​ null: 对象类型，已经知道了数据类型，但对象为空。
      undefined：未定义的类型，并不知道是什么数据类型。正则表达式

  • 转换函数api

    • parseInt();将一个字符串转成整数 若是一个字符串包含非数字符则返回一个NAN
    • inNAN()：转换判断是否能换一个数字若是是非数据返回true isNAN=is not a number
代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript">
    var i = 5;   //整数
    var f = 3.14;  //浮点
    var b = true;  //布尔
    var c = 'a';  //字符串
    var str = "abc";   //字符串
    var d = new Date();  //日期
    var u;   //未定义类型
    var n = null; //空
    document.write("整数：" + typeof(i) + "<br/>");
    document.write("浮点 ：" + typeof(f) + "<br/>");
    document.write("布尔：" + typeof(b) + "<br/>");
    document.write("字符：" + typeof(c) + "<br/>");
    document.write("字符串：" + typeof(str) + "<br/>");
    document.write("日期：" + typeof(d) + "<br/>");
    document.write("未定义的类型：" + typeof(u) + "<br/>");
    document.write("null：" + typeof(n) + "<br/>");
</script>
</body>
</html>
  • ==和=== 的区别
var i = 2;
var j = "2"; 
alert(i==j); // ==比较的仅仅是数值, true
alert(i===j); // ===比较的是数值和类型.false

函数

什么是函数函数相似于java里的方法用于封装一些可重复使用的代码块

  • 普通函数数组

    function 函数名（形参列表）{
    函数体
    [return 返回值]--》可加
}
调用函数
var resule = 函数名（实参列表）
</实例>
       //定义一个函数：计算两个数字之和
    function add(a, b) {
        return a+b;
    }

    //调用函数
    var v = add(1, 2);

    document.write("1, 2之和：" + v);
   </实例>

  • 匿名函数：也叫回调函数，相似于java里的函数接口里的方法浏览器

    function(形参列表){
    函数体
    [return 返回值;]
}

    特色服务器

    参数列表里面直接写参数的变量名，不写varapp

    函数没有重载，后面的直接把前面的覆盖了dom

js事件

事件介绍：
  • HTML 事件是发生在 HTML 元素上的“事情”， 是浏览器或用户作的某些事情
  • 事件一般与函数配合使用，这样就能够经过发生的事件来驱动函数执行。
属性 此事发生在什么时候
onclick 用户点击于事件
ondblclick 用户双击事
onchange 内容被改变
onblur 失去焦点
onfocus 得到焦点
onload 加载完成后（一张页面或图片加载）
onsubmit 肯定按钮被点击表单提交
onkeydown 某个键盘键按下
onkeypress 某个键盘被按住
onkeyup 某个键盘被松开
onmousedown 鼠标按钮被按下。
onmouseout 鼠标从某元素移开。
omouseover 鼠标移到某个元素之上
onmousemove 鼠标被移动

事件绑定

使用事件的二种方式
  • 普通函数方式

<标签 属性="js代码，调用函数"></标签>

  • 匿名函数方式
<script>
    标签对象.事件属性 = function(){
        //执行一段代码
    }
</script>

  • 点击事件

    需求：每点击一次按钮弹出hello

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<!--方式一：设置标签的属性-->
<input type="button" value="点我吧" onclick="sayHello()"/>
<!--方式二：派发事件匿名函数标签对象事件属性 =function(){}-->
<input id ="inputId" type="button" value="干我吧"/>
<script>
        function sayHello() {
            document.write("hello");
        }
       //这个方法中的getElementById会介绍到
    document.getElementById("inputId").onclick =function () {
            document.write("你好")
    }
</script>
</body>
</html>
<script src="my.js"></script>

  • 得到焦点（onfocus）和失去焦点

    • 需求：给输入框设置和失去焦点
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<input id ="inputId" type="text" onfocus="onfou(this)" onblur="onblu()" value="hello..">

<script>
function onfou(t){
    //this 表示形参指的是input里的内容 ,t实参调用this
    console.log(t.value);
   // document.write(t.value);
}
function onblu() {
    console.log("你好");
}
</script>
</body>
</html>
<script src="my.js"></script>

  • 内容改变

    需求：给select设置内容改变事件

    <body>
    <!--内容改变(onchange)-->
    <select onchange="changeCity(this)">
        <option value="bj">北京</option>
        <option value="sh">上海</option>
        <option value="sz">深圳</option>
    </select>

</body>
<script>
    function changeCity(obj) {
        console.log("城市改变了"+obj.value);
    }
</script>

    等xx加载完成(onload) 能够把script放在body的后面/下面, 就能够不用了

    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function initData() {
            // 标签对象.value = "";
            var inputEle = document.getElementById("inputId");
            inputEle.value = "你好..";
        }

    </script>
</head>
<!--onload: 等xx加载完成-->
<body onload="initData()">
    <input id="inputId" type="text" value="hello..."/>
</body>

    正则表达式

    正则表达的语法

    对象形式：var len =new RegExp(正则表达式)

    直接定义：var reg =/正则表达式/;

    经常使用方法

    test(string) String为要校验的字符串 返回值为bolean类型 正确返回true

常见正则表达式

符号 做用
\d 数字
\D 非数字
\w 单词：a-zA-z0-9
\W 非单词
. 任意字符匹配
{n} 匹配n次
{n,} 大于或等于n次
{n,m} 在n次和m次之间
+ 1~n次
* 0-n次
? 0-1次
^ 匹配开头
$ 匹配结尾
[a-zA-Z] 英文字母
[a-zA-Z0-9] 英文字母和数字
[xyz] 字符集合, 匹配所包含的任意一个字符
没了
使用示例

需求:

  1. 出现任意数字3次
  2. 只能是英文字母的, 出现6~10次之间
  3. 只能由英文字母和数字组成，长度为4～16个字符，而且以英文字母开头
  4. 手机号码: 以1开头, 第二位是3,4,5,6,7,8,9的11位数字

步骤:

  1. 建立正则表达式

  2. 调用test()方法

    <SCRIPT>
^和$没有啥特殊的含义只是表示开头和结尾哦
//出现任意数字3次
var len =/^/d{3}$/
//校验字符串
len.text(123)->true
//只能是英文字母出现6-10次
var len1 =/^[a-zA-Z[6-10]]$/
//3 用户名：只能由英文字母和数字组成，长度为4～16个字符，而且以英文字母开头
    var reg3  =/^[a-zA-Z][a-zA-Z0-9]{3,15}$/;
    var str3 = "zs";
   // alert(reg3.test(str3));
//4. 手机号码: 以1开头, 第二位是3,4,5,6,7,8,9的11位数字
    //var reg4  =/^1[3456789]\d{9}$/i; //忽略大小写的
    var reg4  =/^1[3456789]\d{9}$/; //不忽略大小写的
    var str4 = "188245899";
 alert(reg4.test(str4));
</script>

    内置对象Array数组【重点】

    和java的数组不一样它相似像java中的全部的存对象的合集整合了java中list，array和map

语法

  • var arr = new Array(size)
  • var arr =new Array(elment1,element2,element3,.....)
  • var arr=[element1,element2,element3,.....];最经常使用
数组的特色为
  • 数组 中的每一个元素能够是任意类型比较开放
  • 数组的度能够变动加像java中的List
<script>
//方式一new Array(Size)
    var array01 = new Array(4);
   array01[0]=1;
   array01[1]=2;
    //方式二 new Array(ele,ele...)
    var array02 = new array02(1,2,34,5,6);
    //方式三
    var array02=[2,34,566,45,90];
    //任意类型
var array04 = [1, 2, 3, "哈哈"];
</script>

数组常见的方法

ApI介绍

concat():链接两上或更多的数组，并返回结果

join：把数组的全部元素放入一个字符串。元素经过指定的分隔符进行分隔

reverse 颠倒数组中的元素的顺序

//3.经常使用的方法
    //3.1 concat() 链接两个或更多的数组，并返回结果。【重点】
    var array05 = [1, 2, 3, 4];
    var array06 = ["哈哈", "你好", 100, 200];
    var array07 = array05.concat(array06);
    console.log(array07);

    //3.2 join() 把数组的全部元素放入一个字符串。元素经过指定的分隔符进行分隔。
    var str =   array05.join("**");
    console.log(str);

    //3.3 reverse() 颠倒数组中元素的顺序。
    array06 =  array06.reverse();
    console.log(array06);
数组里面再入数组就是二维数组
//4.二维数组
    //方式一:
    var citys = new Array(3);
    citys[0] = ["深圳", "广州", "东莞", "惠州"];
    citys[1] = ["武汉", "黄冈", "黄石", "鄂州", "荆州"];
    citys[2] = ["济南", "青岛", "烟台", "淄博", "聊城"];

    var citys02 = [
        ["深圳", "广州", "东莞", "惠州"],
        ["武汉", "黄冈", "黄石", "鄂州", "荆州"],
        ["济南", "青岛", "烟台", "淄博", "聊城"]
    ];

    for (var i = 0; i < citys02.length; i++) {
        var cityArray = citys02[i];
        
        console.log(cityArray);

        for(var j = 0;j<=cityArray.length;j++){
            console.log(cityArray[j]);
        }
    }

3.2. 日期经常使用方法

3.2.1API介绍
方法 描述
Date() 返回当日的日期和时间。
getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。
getMonth() 从 Date 对象返回月份 (0 ~ 11)。
getFullYear() 从 Date 对象以四位数字返回年份。
getHours() 返回 Date 对象的小时 (0 ~ 23)。
getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。
getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。
getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)。
getTime() 返回 1970 年 1 月 1 日至今的毫秒数。
parse() 返回1970年1月1日午夜到指定日期（字符串）的毫秒数。
setDate() 设置 Date 对象中月的某一天 (1 ~ 31)。
setMonth() 设置 Date 对象中月份 (0 ~ 11)。
setFullYear() 设置 Date 对象中的年份（四位数字）。
setYear() 请使用 setFullYear() 方法代替。
setHours() 设置 Date 对象中的小时 (0 ~ 23)。
setMinutes() 设置 Date 对象中的分钟 (0 ~ 59)。
setSeconds() 设置 Date 对象中的秒钟 (0 ~ 59)。
setMilliseconds() 设置 Date 对象中的毫秒 (0 ~ 999)。
setTime() 以毫秒设置 Date 对象。
toLocaleString() 根据本地时间格式，把 Date 对象转换为字符串。 
<script>
    //1.建立日期对象
    var myDate =  new Date();

    //2.调用方法
    console.log("年:" + myDate.getFullYear());
    console.log("月:" + (myDate.getMonth()+1));
    console.log("日:" + myDate.getDate());
    console.log("时:" + myDate.getHours());
    console.log("分:" + myDate.getMinutes());
    console.log("秒:" + myDate.getSeconds());
    console.log("毫秒:" + myDate.getMilliseconds());

    console.log(myDate.toLocaleString()); //打印本地时间    2019-12-06 12:02:xx
    //console.log(myDate);


</script>

js的BOM

Browser Object Model ,浏览器对象模型. 为了便于对浏览器的操做，JavaScript封装了对浏览器中各个对象，使得开发者能够方便的操做浏览器中的各个对象。

3.2.BOM里面的五个对象

3.2.1window: 窗体对象
方法 做用
alert() 显示带有一段消息和一个确认按钮的警告框
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框
setInterval('函数名()',time) 按照指定的周期（以毫秒计）来调用函数或计算表达式
setTimeout('函数名()',time) 在指定的毫秒数后调用函数或计算表达式
clearInterval() 取消由 setInterval() 设置的 Interval()。
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。 
<body>
    <input type="button" value="开始" onclick="startSayHello()"/>
    <input type="button" value="结束" onclick="stopSayHello()"/>

<script>
    //1.弹出警告框  window.alert("不能删除!!!");widow能够省略
    //alert("不能删除!!!");

    //2.弹出确认框
    //var flag = confirm("您确认删除吗?");
    //console.log("flag="+flag);
    //if(flag){
        //请求服务器 删除
    //}

    //3.周期执行 setInterval('函数名()',time)  eg: setInterval("sayHello()",1000);
    //setInterval("sayHello()",10000);

    //4.延迟执行  5s以后调用sayHello()
    //setTimeout("sayHello()",5000);
    var intervalFlag;
    function startSayHello() {
        //每隔1s开始打印hello...
        intervalFlag = setInterval("sayHello()",100);
    }
    function stopSayHello() {
        //中止打印sayHello()
        clearInterval(intervalFlag);
    }
    function sayHello() {
        console.log("hello..");
    }
</script>
location.href:获取路径

location.href = "http://www.baidu.com"; 设置路径,跳转到百度页面

dom介绍（重要）

1. 什么是dom

  • DOM：Document Object Model，文档对象模型。是js提供的，用来访问网页里全部内容的(标签,属性,标签的内容)

2. 什么是dom树

  • 当网页被加载时，浏览器会建立页面的DOM对象。DOM对象模型是一棵树形结构：网页里全部的标签、属性、文本都会转换成节点对象，按照层级结构组织成一棵树形结构。
    • 整个网页封装成的对象叫document
    • 标签封装成的对象叫Element
    • 属性封装成的对象叫Attribute
    • 文本封装成的对象叫Text

image

一切皆节点，一切为对象

3.1. 获取标签

方法 描述 返回值
document.getElementById(id) 根据id获取标签 Element对象
document.getElementsByName(name) 根据标签name获取一批标签 Element类数组
document.getElementsByTagName(tagName) 根据标签名称获取一批标签 Element类数组
document.getElementsByClassName(className) 根据类名获取一批标签 Element类数组 
//1.根据id得到
    var inputEle = document.getElementById("inputId");

    //2.根据标签名得到
    var inputELes = document.getElementsByTagName("input");
    console.log(inputELes.length); //8

    //3.根据类名得到
    var inputELes02 =  document.getElementsByClassName("inputClass");
    console.log(inputELes02.length); //4

3.2. 操做标签

方法 描述 返回值
document.createElement(tagName) 建立标签 Element对象
parentElement.appendChild(sonElement) 插入标签
element.remove() 删除标签
document.createTextNode() 建立文本 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操做标签体</title>
</head>
<body>
<input type="button" value="获取d1的标签体内容" onclick="getHtml()">
<input type="button" value="设置d1的标签体内容" onclick="setHtml()">
<div id="d1">
   你好
    <p>嘿小黑马你好</p>
</div>

<script>
    var d1 = document.getElementById("d1");
    function getHtml() {
        var html = d1.innerHTML;
        alert(html);
    }

    function setHtml() {
        d1.innerHTML = "<h1>深圳大马哥JavaEE</h1>";
    }
</script>
</body>
</html>

做操属性

  • 每一个标签Element对象提供了操做属性的方法
方法名 描述 参数
getAttribute(attrName) 获取属性值 属性名称
setAttribute(attrName, attrValue) 设置属性值 属性名称, 属性值
removeAttribute(attrName) 删除属性 属性名称

好了就介绍到这里啦，欢迎留言呀！

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程