本文轉載自：https://blog.csdn.net/xiaogeldx/article/details/85390757 註在pycharm中快速註釋HTML的方法（用於註釋方法不正確時）： File Settings Languages&Frameworks Python Template ...

本文轉載自：https://blog.csdn.net/xiaogeldx/article/details/85390757

註

在pycharm中快速註釋HTML的方法（用於註釋方法不正確時）：
- File--Settings--Languages&Frameworks--Python Template Languages--Template Languages改為None，HTML和JavaScript註釋方法就都正確了
  
  JavaScript基礎知識
網頁三要素：HTML，css，js
JavaScript和Java沒有任何關係，最多語法看起來有點像
JavaScript原名ivescript，是一門動態類型，弱類型基於原型的腳本語言
和HTML複合使用，不能單獨使用
大部分瀏覽器都支持

JavaScript作用：
頁面特效
前後交互
後臺開發（node）

JavaScript寫在哪裡
寫在script標簽里

外部js文件引入

寫在script標簽里

  1.
  <head>
  <meta charset="UTF-8">
  <title>try</title>
  <script>
      alert("wer");
  </script>
  </head>
  <body>
  <div>
      <input type="button" value="點我" onclick="alert('bug')">
  </div>
  2.
  <head>
  <meta charset="UTF-8">
  <title>try</title>
  </head>
  <body>
  <div>
      <input type="button" value="點我" onclick="alert('bug')">
  </div>
  <script>
      alert("wer");
  </script>

在這裡插入圖片描述

外部的js文件內，然後引入

  <head>
  <meta charset="UTF-8">
  <title>try</title>
  <script src="js/a.js"></script>
  </head>
  <body>
  <div>
      <input type="button" value="點我" onclick="alert('bug')">
  </div>

a.js的代碼:
```
  alert("wer");
```
JS一些註意事項
嚴格區分大小寫
每一行完整語句後面加分號
變數名不能使用關鍵字和保留字
代碼要縮進，保持可讀性
註釋用//

JS修改元素內容
首先獲取id為xxx的元素 document.getElementByld(" ")
var 是js定義變數的關鍵字,創建（聲明變數），如果不加為全局變數
innerHTML和innerText可以修改/獲取

JS獲取元素
通過id獲取元素:id
```
  document.getElementById(" ");
```
通過class名字獲取元素:class
```
  document getElementsByClassName(" ");
```
通過標簽名獲取元素:tagName
```
  document.getElementsByTagName(" ");
```
通過name的屬性獲取元素，一般用於input:name
```
  document.getElementsByName(" ");
```
通過css選擇器獲取一個
```
  document.querySelector(" ");
```

通過css選擇器獲取所有

  document.querySelectorAll(" ");

案例

          <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>Title</title>
  </head>
  <body>
      <div id="div1">
          <p id="p1"><span>111</span></p>
          <p class="c1">2222</p>
          <span name="span1">3333</span>
      </div>
      <div class="div2">
          <p class="c1">5555</p>
          <span name="span1">6666</span>
          <p name="span1">7777</p>
          <span class="c1">8888</span>
      </div>
      <div>
          <p>9999</p>
          <span>0000</span>
      </div>
      <script type="text/javascript">
          //通過id獲取元素,一個網頁中一個id命名使用一次,所以不用加索引
          var a = document.getElementById('p1');
          a.onclick = function () {
              alert('bug');
          };
          //通過標簽名獲取元素,需要加索引
          var b = document.getElementsByTagName('span')[0];
          b.onclick = function () {
              alert('bug');
          };
          // 通過name獲取元素,需要加索引
          var c = document.getElementsByName('span1')[1];
          c.onclick = function () {
              alert('bug');
          }
          // 通過classname獲取元素,需要加索引
          var d = document.getElementsByClassName('c1')[1];
          d.onclick = function () {
              alert('bug');
          };
          // 通過css選擇器獲取一個元素
          // 單獨的標簽獲取第一個,如果選擇器里還嵌套標簽,第一個選擇器裡面的所有標簽都能獲取,不能索引
          // 選div時,第一個div標簽里的標簽都能獲取
          var e = document.querySelector('div');
          e.onclick = function(){
              alert('bug');
          };
          // 通過class標簽獲取所有
          // 此時獲取的是id為div1下的所有的span標簽
          // div標簽里嵌套其他標簽時需要索引,表示第幾個div里的所有標簽都可以獲取
          // 單獨的標簽可以直接索引獲取
          // #div1或者.div2加上裡面的標簽需要索引獲取
          var f = document.querySelectorAll('div')[0];
          f.onclick = function () {
              alert('bug');
          };
      </script>
  </body>
  </html>

JavaScript簡單事件

JS的基礎事件

單擊事件：onclick
雙擊事件:ondblclick
滑鼠劃入:onmouseenter
滑鼠划出:onmouseleave

視窗變化:onresize

  // 瀏覽器視窗有變化時就會出現
  window.onresize = function () {
     alert("3245");
  };

改變下拉框:onchange

  <select>
      <option value="1">蘋果</option>
      <option value="1">橘子</option>
      <option value="1">橙子</option>
  </select>
  <script type="text/javascript">
      var h = document.getElementsByTagName('select')[0];
      //改變下拉框里的值就會彈出
      h.onchange = function () {
          alert('改變了');
          };
  </script>

操作標簽屬性

合法屬性的增刪改查

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>try</title>
  </head>
  <body>
  <div>
      <p id="p1" class="s1">我是一句話</p>
  </div>
  <script type="text/javascript">
     var a = document.getElementById("p1");
     // 增/改：無則增，有則改
     a.className="hahaha";
     // 查
     console.log(a.className);
     // 刪除
     a.removeAttribute("class");
     console.log(a);
  </script>
  </body>
  </html>

自定義屬性的增刪改查

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>try</title>
  </head>
  <body>
  <di
      <p id="p1" class="s1">我是一句話</p>
  </div>
  <script type="text/javascript">
     var a = document.getElementById("p1");
     // 增/改　無則增，有則改
     a.setAttribute("age","m");
     // 查，查到返回true，沒查到返回false
     console.log(a.hasAttribute("age"));
     // 刪除
     a.removeAttribute("age");
     console.log(a);
  </script>
  </body>
  </html>

JS修改樣式

Obj.style.變數=變數值

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>try</title>
  </head>
  <body>
  <div id="div2" style="width: 100px;height: 100px;color: red;border:1px solid blue">
      <p id="p1" class="s1">我是一句話</p>
  </div>
  <script type="text/javascript">
     var b = document.getElementById("div2");
     b.style.width = "50px";
     b.style.height = "50px";
     console.log(b)
  </Script>
  </body>
  </html>

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>try</title>
  </head>
  <body>
  <div id="div2" style="width: 100px;height: 100px;color: red;border:1px solid blue">
      <p id="p1" class="s1">我是一句話</p>
  </div>
  <script type="text/javascript">
     var a = document.getElementById("div2");
     var b = document.getElementById("div2");
     b.onclick=function() {
             a.style.width = "50px";
             a.style.height = "50px";
         }
     console.log(b)
  </Script>
  </body>
  </html>

數據類型

js提供了一種檢測當前變數的數據類型的方法，也就是typeof關鍵字

JS的數據類型
五種基本類型＋object（複雜型）

Number類型
Number類型包含整數和浮點數（浮點數數值必須包含一個小數點，且小數點後面至少有一位數字）兩種值
```
  var a = 123;
  console.log(typeof a);
```
NaN:非數字類型
isNaN() 函數用於檢查其參數是否是非數字值
```
  isNaN(123)  //false   
  isNaN("hello")  //true
```
String類型
字元串有length屬性
字元串轉換：轉型函數String(),適用於任何數據類型（null,undefined 轉換後為null和undefined）；toString()方法（null,defined沒有toString()方法）

字元串要用引號

  var a = "123";
  console.log(typeof a);

Boolean類型

該類型只有兩個值，true和false
```
  var a = true;
  console.log(typeof a);
```
Undefined類型
只有一個值，即undefined值。使用var聲明瞭變數，但未給變數初始化值，那麼這個變數的值就是undefined
```
  var a;
  console.log(typeof a);
```
Null類型
null類型被看做空對象指針，前文說到null類型也是空的對象引用
```
  var a = null;       //object
  console.log(typeof a);
```
null類型進行typeof操作符後，結果是object，原因在於null類型被當做一個空對象引用

Object類型
js中對象是一組屬性與方法的集合,這裡就要說到引用類型了，引用類型是一種數據結構，用於將數據和功能組織在一起,引用類型有時候也被稱為對象定義，因為它們描述的是一類對象所具有的屬性和方法

引用類型

Object類型
我們看到的大多數類型值都是Object類型的實例
創建Object實例的方式有兩種
- 第一種是使用new操作符後跟Object構造函數，如下所示
```
  var person = new Object();
  person.name = "Micheal";
  person.age = 24;
```
- 第二種方式是使用對象字面量表示法，如下所示
```
  var person = {
  　　name : "Micheal",
  　　age : 24
  };
```
  Array類型
數組的每一項可以用來保存任何類型的數據，也就是說，可以用數組的第一個位置來保存字元串，第二個位置保存數值，第三個位置保存對象等等
數組的大小是可以動態調整的
創建數組的基本方式有兩種
- 第一種是使用Array構造函數，如下所示
```
  var colors = new Array("red","blue","yellow");
```
- 第二種是使用數組字面量表示法，如下所示
```
  var colors = ["red","blue","yellow"];
```
  Function類型
每個函數都是Function類型的實例，而且都與其他引用類型一樣具有屬性和方法，函數通常是使用函數聲明語法定義的，如下所示
```
  function sum(num1,num2){
  　　return num1 + num2;
  };
```

這和使用函數表達式定義函數的方式相差無幾

  var sun = function (){
  　　return sum1 + sum2;
  };

案例

  var name = 'xiaoge';
  alert(typeof name);//string
  var age = 15;
  alert(typeof age);//number
  var flag = true;
  alert(typeof flag);//boolean
  var a;//undefined
  alert(typeof a);
  var b = null;
  alert(typeof b);//object
  var arr = [1,2,3];//object
  alert(typeof arr);
  var user = {
      name:'xiaoge',
      age:18
  };
  alert(typeof user);//object
  alert(typeof console.log());//undefined
  var say = function () {
      alert(name+'很帥');
  };
  alert(typeof say);//function
  alert(say())//xiaoge很帥//undefined

練習

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <link rel="stylesheet" href="css/reset.css">
      <link rel="stylesheet" href="css/test.css">
      <script src="js/test.js"></script>
  </head>
  <body>
  <div class="d1">
      屬性名：<input type="text" class="an"><br>
      屬性值：<input type="text" class="av"><br>
      <input type="button" value="設置" class="set1">
  </div>
  <div class="d2" style="width: 200px; height: 200px; background-color: yellow; line-height: 200px; text-align: center;">我就是我</div>
  <script type="text/javascript">
      var moumov = document.getElementsByClassName('d2')[0];
      moumov.onmouseenter = function () {
          moumov.innerText = '是我還是我';
          moumov.style.background = 'blue';
      };
      moumov.onmouseleave = function () {
          moumov.innerText = '我就是我';
          moumov.style.background = 'yellow';
      };
      var inp = document.getElementsByTagName('input');
      inp[2].onclick = function () {
          var attr = inp[0].value;
          var attrs = inp[1].value;
          moumov.style[attr] = attrs;
      };
  </script>
  </body>
  </html>

在這裡插入圖片描述

JavaScript(一)

註

JavaScript基礎知識

JavaScript作用：

JavaScript寫在哪裡

寫在script標簽里

外部的js文件內，然後引入

JS一些註意事項

JS修改元素內容

JS獲取元素

案例

JavaScript簡單事件

JS的基礎事件

操作標簽屬性

JS修改樣式

數據類型

JS的數據類型

Number類型

String類型

Boolean類型

Undefined類型

Null類型

Object類型

引用類型

Object類型

Array類型

Function類型

案例

練習