瞭解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教程