HTML基礎第六課（js基礎語法，js原生對象，DOM語法)

一、基礎語法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基礎語法</title>
    <!-- 讓html實現與用戶產生交互 -->

</head>
<body>
<!-- 內部引入 -->
    <script type="text/javascript">
      //變量 - 內存
      //JS聲明變量都用var關鍵字
      //五種基本類型

      // 變量名要求
      //1.數字 字母 下劃線 和$符號
      //2.不能以數組開頭
      //3.不能是關鍵字和保留字
      //4.區分大小寫
     //規範：可以使用駝峯命名法

      var a = 10;//數值 Number
      var b = "123";//字符串 String
      var c = '456';//字符串 String
      var d = true; //布爾類型 boolean
      var e = false; //布爾類型 boolean

      var f = null ;//空對象
      var g; //未定義烈類型 undefined
      //強類型語言
      //short int double string char
      //JS弱類型語言
      //var

      //判斷相等 ==  ===
      //== 會判斷兩個值是否相等
      //=== 除了判斷值之外，還會判斷類型

      console.log("5" == 5);//true
      console.log("5" === 5)//false
      console.log("5" != 5);//false
      console.log("5" !== 5)//true

       for (var a = 3; a < 10; a +=5) {
       setTimeout(function(){
             console.log(a);
       },1000);

       }
       // console.log(a);
       // a=100;
    //類型轉換
    //查看類型
    console.log(typeof a);
  //轉數字(true(1) false(0))
  // NaN :Not a Number
   console.log(Number(true)); //1
   console.log(Number(false));//0
   console.log(Number("5")); //5
   console.log(Number("a"));//NaN
   console.log(Number("b1"));//NaN
   console.log(Number(""));//0
   console.log(Number(" "));//0
   console.log(Number("99"));//99

  //轉字符串
  console.log(String(true))//true


   //轉布爾值
   //對於數字--非0爲真

  console.log(Boolean(1))

//對於字符串--非空爲真
console.log(String(" "));//這個爲空字符串 false
//console.log(String(" "));//這個不爲空，中間有個空格（空格字符）

//隱式轉換
//加號兩邊如果有一個字符串，就是拼接字符串
//其他算數運算符轉換爲數值計算
 console.log(3 + true);
 console.log(null + 5);
 console.log( false + "2");
 console.log(5 - true);
 console.log(7 + null);
 console.log(6 + undefined);//NaN

//轉數字 parseInt()
console.log(parseInt(5.6));//5
console.log(parseInt("5.6"));//5
console.log(parseInt("34abd"));//34
console.log(parseInt("23ab34"))//23
console.log(parseInt("a33"))//NaN

//10進制 -》2進制

console.log(parseInt(15,8));//13(15(數值),8（進制類型))

//生成隨機數
var num = parseInt(Math.random()*(30 -20 +1)+20);
console.log(num)


//函數  JS裏面的變量只分爲函數內部的局部變量，和函數外面的全局變量

function test(a,b){
   console.log(a + b);
   return a * b;
}
//調用函數
var c = test(10,20);
console.log(c);
test();

//匿名函數
//把匿名函數保存在變量裏面--第一種
var fn = function(){
    console.log("我是匿名函數第三執行順序");
};

//3
//匿名函數自執行--第二種寫法
 (function(){
    var t = 100;
    console.log("我是匿名函數第一執行順序1");
})();
//1
 (function(){
    console.log("我是匿名函數第二執行順序2");
}());
//2

fn();
var shuzu = [2,8,3,5,12];
  for (var i = 0; i < shuzu.length; i++) {
    for (var j = 1+i; j < shuzu.length+i; j++) {
        if (shuzu[i]<shuzu[j]) {
        var a1 = shuzu[i];
        shuzu[i] = shuzu[j];
        shuzu[j] = a1;

  }
    }
  }
  console.log(shuzu);
   console.log(shuzu[1]);

  // 生成0-29不重複的隨機數
 function text(){

 }
  var suiji = [];
 for (var i = 0; ; i++) {
     if (suiji.length<10) {
        suijf();
    }else{
        break;
    }
 }

 function suijf(){
     var num = (parseInt)(Math.random()*(29-0+1)+0);
     for (var i = 0; i < suiji.length; i++) {
        if (suiji[i] == num) {
            return false;
        }
     }
     suiji.push(num);
 }
      console.log(suiji);
    </script>
    <!-- 外部引入 -->
    <script type="text/javascript" src="xx.js" >
    </script>
     <!-- css引入方式 3種 -->
    <!-- js引入三種 -->
</body>
</html>

二、DOM語法（創建，設置，添加，替換，刪除，獲取，修改)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM</title>
    <style type="text/css">
        .item{
            width: 200px;
            height: 200px;
            margin: 10px;
            border: 10px blue solid;
            /*處理超出部分*/
            overflow: scroll;
            font-size: 50px;
        }
    </style>
</head>
<body>
    <div class="box">
    我是box
<!-- 這是一個註釋 -->
    <p>P</p>
    </div>
</body>
<script type="text/javascript">

    //1、創建元素(createElement)
  var newDiv = document.createElement("div");

   //設置類名
   newDiv.className = "item";
   // 設置id名
   newDiv.id = "first";
   newDiv.style.background = "red";

    //2、添加元素 (appendChild)
    var body = document.getElementsByTagName("body")[0];

     var box = document.getElementsByClassName("box")[0];
     //2.1body最後面添加
     body.appendChild(newDiv);

     //2.2把newDiv插入到box的前面
     body.insertBefore(newDiv,box);

      //替換掉一個元素-replaceChild
      body.replaceChild(newDiv,box);

    //3、刪除元素
     // body.removeChild(box);
     box.remove();

  //DOM(元素/div。。)屬性
  //JS 基礎語法。 DOM
  //原生的對象
  var obj = {
    name:"丁鵬",
    age:18,
    gender:"man",
    eat:function(){
        console.log("開始吃飯");
    }
  };

  obj.add = 1;//加一個屬性
  console.log(obj);
  console.log(obj.age);
  obj.eat();//調用obj方法

 //宿主對象  瀏覽器自己添加的對象（div）
 console.log(newDiv);


//節點   標籤、文本、註釋、聲明（doctype）
//獲取元素下所有子節點
 console.log(box.childNodes);
//獲取標籤類型的子節點
console.log(box.children[0]);


//尺寸和位置
//尺寸
//寬
 console.log(newDiv.offsetWidth);//包含邊框
 console.log(newDiv.clientWidth);//不含邊框
//高
 console.log(newDiv.offsetHeight);//包含邊框
 console.log(newDiv.clientHeight);//不含邊框和滾動條--可視區域
 console.log(newDiv.scrollHeight);//是內容的大小--滾動的高度

//位置
console.log(newDiv.offsetTop);
//相對於定位父級的一個位置
console.log(newDiv.offsetLeft);

//子元素滾動上去的一段距離

console.log(newDiv.scrollTop);
//除了scrollTop之外，以上屬性都是隻讀的
setInterval(function(){

newDiv.scrollTop= 2000;
},1000);
console.log(newDiv.scrollLeft);

</script>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM操作</title>
    <style type="text/css">
        #first{
            width: 200px;
            height: 200px;
            background-color: red;
            color: white;

        }
    </style>
</head>
<body>

    <!-- 對象模型 -->
    <div id="first"></div>
    <input type="text" class="uName">
    <input type="button" values ="點我呀">

</body>
<script type="text/javascript">
    // 獲取元素，並修改背景·顏色
    var first = document.getElementById("first");
    first.style.backgroundColor="blue";
    first.style.border="5px black solid";
    first.style.margin="0px auto";
    // first.style.transform: "rotate(45deg)";

    //修改內容  first.innerHTML可以解析字符串裏面的標籤
    // first.innerText不能解析，可以寫留言板
     first.innerHTML = "<p>福</p>";
    first.innerText = "<p>福</p>";
    console.log(first.innerHTML);
    // 通過類名獲取一組元素
    var uNames = document.getElementsByClassName("uName");
    // uNames是所有uName的集合（先當成數組使用)
  //獲取。修改輸入框都是用value
     uNames[0].value = "我是一個輸入框";
       console.log(uNames[0].value);
      // 兩種獲取方式，三種修改內容 一種修改樣式
      // 通過標籤名獲取
     var button =  document.getElementsByTagName("input")[1];
     var a = 1;
     // 添加點擊方法。每次點擊都會執行下面這個函數
      button.onclick = function(){
        console.log(123);
        uNames[0].value = a++;
        first.style.transition ="1s";
        first.style.width = a *10 +"px";
        first.style.height = "100px";
      }
</script>
</html>

HTML基礎第六課（js基礎語法，js原生對象，DOM語法)

一、基礎語法

二、DOM語法（創建，設置，添加，替換，刪除，獲取，修改)

EXCEL中下拉菜單中添加新選項或者刪除選項

號稱能打敗MLP的KAN到底行不行？數學核心原理全面解析

同事使用 insert into select 遷移數據，開開心心上線，上線後被公司開除！

Git使用經驗總結5-修改提交信息

Python 爬蟲：Spring Boot 反爬蟲的成功案例

京東科技數字化營銷能力的演進與最佳實踐| 京東雲技術團隊

Git使用經驗總結4-撤回上一次本地提交

Java中止線程的方式

壓榨數據庫的真實處理速度

[轉帖]Oracle Exadata 學習筆記之核心特性Part1

Wampserver下載

HTML基礎第七課（js原生對象）

orcal數據庫

HTML基礎第五課（表格，表單，行塊對齊方式）

HTML基礎第四課（2D形變，定位）

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結