No2 JavaScript

一 JavaScript簡介

什麼是JavaScript
- JavaScript是一門廣泛用於瀏覽器客戶端的腳本語言
- 業內一般簡稱JS

腳本語言: 縮短傳統的編寫-編譯-鏈接-運行過程,解釋運行而非編譯運行

JS的常見用途
- HTML DOM操作（節點操作，比如添加、修改、刪除節點）
- 給HTML網頁增加動態功能，比如動畫
- 事件處理：比如監聽鼠標點擊、鼠標滑動、鍵盤輸入
什麼是Node.js
- Node是一個JavaScript運行環境(runtime)，是對Google V8引擎進行了封裝
- V8引擎執行JavaScript的速度非常快，性能非常好
Node.js的優勢
- 可以作爲後臺語言
- 單線程
  - 不新增額外線程的情況下，依然可以對任務進行並行處理（採用事件輪詢）
- 非阻塞I/O、V8虛擬機、事件驅動
JS常見的書寫方式有2種
- 頁內JS：在當前網頁的script標籤中編寫
```
<script type="text/javascript">
</script>
```
- 外部JS <script src="index.js"></script>

二 JavaScript語法

JS 代碼是阻斷式輸出
控制檯輸出格式 console.log("hello World");
定義基本數據類型
- var有點類似泛型

 var age = 10; // number
 var money = 100.99; // number
 var name = 'jack'; // string
 var result = false; // boolean ture
 var score = null; // object

// 輸出
 console.log(age, money, name, result, score);
// 真實類型  typeOf
 console.log(typeof age,typeof money,typeof name,typeof  result,typeof score);

// 拼接
  var newName = name +'-'+ name1;
   console.log(newName);
// 拼接都是從左往右,任何類型的變量和string類型的變量拼接都會被轉爲string
   var str = 10 + 10 + '10'; // 2010
   var str1 = '10' + '10' + 10; // 101010
   var str2 = (10 + '10') + 10; // 101010
   var str3 = 10 + (10 + '10'); // 101010

數組格式

 // 數組
  var dataArr = [10,'121', name, result, score, ['哈哈哈哈']];
 // 數組的長度
  console.log(dataArr.length);
 // 輸出數組
  console.log(dataArr);
     // 遍歷輸出
     for(var i=0; i<dataArr.length; i++){
           console.log(dataArr[i]);
    }

  for(var i in dataArr){
        console.log(i, dataArr[i]);
    }

增加/刪除元素

 // 刪除最後一個元素
    dataArr.pop();
    for(var i in dataArr){
        console.log(i, dataArr[i]);
        }

// 增加一個元素
   var names = ['
xxx'];
   dataArr.push(names);

// 單獨取出元素
  console.log(dataArr[dataArr.length-1]);

數組中最大數和最小數

    var data = [1000, 9, 56666,32];
//        console.log(Math.max(2121,4334,5454));
        console.log(Math.min.apply(null, data));
        console.log(Math.max.apply(null,data));

函數
- 函數的定義格式
  function 函數名（參數列表）{
  // 函數體
  函數沒有返回類型
  }
加法運算

function sum(num1, num2){  // 參數列表不需要標明類型
       return num1 + num2
    }
    cosole.log(sum(1, 2))

寫一個萬能的加法函數

function sum(numbers){
        var count = 0;
        for(var i = 0; i < numbers.count; i++){
            count += numbers[i];
        }
        return count;
     }
     // 改進版
     function sum(){ // arguments函數的內置數組
        var count = 0;
        for (var i = 0; i < arguments.length; i++){
           count += arguments[i];
        }  
        return count
     }

匿名函數

   var result4 = function (){
       console.log('我是匿名函數');
     }
    // 如何調用
    result4();

三 JS中創建對象

創建單個對象

var dog = {
            name : 'wangcai',
            height : 1.55,
            age : 15,
            friends: ['gouyou1','gouyou2'],
            run : function(someWhere){
            // this 它在哪個對象中,然後代表該對象
                console.log(this.name + '-----跑' + someWhere);
            },
            eat : function(someThing){
                console.log(this.name +'-----吃' + someThing);
            }
        };
        // 驗證
        console.log(typeof dog);
        // 調用屬性
        console.log(dog.name, dog.age,dog.height, dog.friends);
        // 調用函數
        dog.eat('骨頭');
        dog.run('操場');

批量產生對象

 function Dog(){
        console.log('------');
     }
// 調用
   Dog();
// 產生對象 new --- > [[Dog alloc] init];
   var dog1 = new Dog();
   var dog2 = new Dog();
   console.log(dog1,dog2);

 // 構造函數
 function Dog(){
    this.name = null;
    this.age = null;
    this.height = null;
    this.friends = [];
    this.eat = function(someThing){
        console.log(this.name + '吃' + someThing);
    };
       this.run = function(someWhere){
         console.log(this.name + '跑' + someWhere);
         }
   }

// 批量產生對象
   var dog1 = new Dog();
   var dog2 = new Dog();
 // 賦值
    dog1.name = 'wangcai';
    dog1.age = 16;
    dog1.height = 1.66;
    dog1.friends = ['hhh', 'xxxxx'];
    dog1.eat('五花肉');
    dog1.run('房間');

另一種寫法：

function Dog(name, age, height, friends){
            this.name = name;
            this.age = age;
            this.height = height;
            this.friends = friends;
            this.eat = function(someThing){
                console.log(this.name + '吃' + someThing);
            };
            this.run = function(someWhere){
                console.log(this.name + '跑' + someWhere);
            }
        }

JS 中邏輯或寫法

  newName = name1 || name2 || name3 || name4;
     console.log(newName);

JS 中邏輯與寫法

// 新寫法 (條件) && {....}
  (age > 20) && console.log('...............可以結婚了');

四 JS內置對象

window

window:
- 1. 所有的全局的變量都是window的屬性
- 1. 所有的全局的函數都是window的函數

// 驗證屬性
   var age = 20;
   console.log(window.age);
// 驗證函數
   function dog(){
           console.log('我是一條狗');
        }
        dog();
        window.dog();

動態跳轉
window.location.href = 'http://baidu.com';

document

document:
- 1.動態的獲取當前網頁中的任何一個節點(標籤)
- 2.對獲取的節點進行CRUD

<script type="text/javascript">
  // 往當前頁面寫入
     document.write('hello world!');
  // 寫入一個標籤
     document.write('<input type="date">');
  // 寫入圖片
     document.write('<img src="https://www.baidu.com/img/bdlogo.png" width="50">');
</script>

DOM 操作-更改圖片

 <script type="text/javascript">
    function changeImg(){
     // 拿到圖片
     var img = document.getElementById('icon');
     // 更改屬性
     img.src = 'images/img_02.jpg';
     }
 </script>

<body>
   <img id="icon" src="images/img_01.jpg">
   <p></p>
   <button onclick="changeImg();">更改圖片</button>
</body>

DOM 操作-更改圖片

<body>
   <img class="icon" src="images/img_01.jpg">
   <p></p>
   <button>切換圖片</button>


   <script type="text/javascript">
       // 拿到要操作的標籤
       var img = document.getElementsByClassName('icon')[0];
       var btn = document.getElementsByTagName('button')[0];

       btn.onclick = function(){

          console.log(img.src);
           // indexOf = lastIndexOf  找到 返回任意正數, 沒有找到,返回-1
          if(img.src.lastIndexOf('images/img_01.jpg') != -1 ){
              img.src = 'images/img_02.jpg';
          }else{
              img.src = 'images/img_01.jpg';
          }
       }
   </script>
</body>

五 JS中常見事件

<script type="text/javascript">
    // 當頁面加載完畢
    window.onload = function (){
//        alert('頁面加載完畢');

      // 拿到img標籤
        var img = document.getElementsByName('icon')[0];
      // 當鼠標進入圖片
       img.onmouseover = function(){
           console.log('當鼠標進入圖片');
       }
      // 當鼠標在圖片中移動
       img.onmousemove = function(){
           console.log('當鼠標在圖片中移動');

       }
      // 當鼠標離開圖片
        img.onmouseout = function(){
            console.log('當鼠標離開圖片');
        }
    }

    // 拿到輸入框
    var int = document.getElementById('int');
    int.onfocus = function(){
        // css屬性 style
        int.style.width = '600px';
        int.style.height = '100px';
        int.style.outline = 'none';
        int.style.border = '1px solid red';
    }

    int.onselect = function(){
        alert(int.value);
    }
</script>

六 DOM的CRUD

增

方法1

document.write('<input type="file">');
document.write('<img id="icon" src="images/img_01.jpg">');

方法2

var div = document.createElement('div');
div.style.backgroundColor = 'red';
div.innerText = '我是div';
div.style.width = '500px';
div.style.height = '300px';
//加入body
document.body.appendChild(div);

var imgs = document.createElement('img');
imgs.src = 'images/img_02.jpg';
div.appendChild(imgs);

var img2 = document.getElementById('icon');
// 這種寫法比較繁瑣  img2.parentNode.removeChild(img2);
  img2.remove();

改
- 先拿到標籤再改
查
- 4種方式
  - getElementsByName
  - getElementsByClassName
  - getElementsByTagName
  - getElementsByID
- 查看 body 有幾個子節點
```
console.log(document.body.childNodes);
```

七 Canvas

HTML
- <canvas id="canvas"></canvas>
JS

 var canvas = document.getElementById('canvas');
 var context = canvas.getContext('2d');
 //  context是一個繪圖的上下文環境
 //  2d是二維圖形

Canvas繪製直線

// 起點
context.moveTo(100,100);
// 終點
context.lineTo(400, 400);
// 繪製
context.stroke();
// 設置線條顏色和寬度
context.strokeStyle = 'red';
context.lineWidth = 5;
// 設置填充色
context.fillStyle = 'blue';

Canvas繪製弧線

context.arc(
          centerX, centerY, radius,
          startingAngle, endingAngle, 
          anticlockwise=false     
       )
// centerX, centerY: 圓心的座標
// radius: 半徑
// startingAngle, endingAngle: 開始角度,結束角度
// anticlockwise: false順時針 true逆時針

一 JavaScript簡介

二 JavaScript語法

三 JS中創建對象

四 JS內置對象

window

document

五 JS中常見事件

六 DOM的CRUD

七 Canvas

AI模型 Llama 3體驗筆記

【面試準備】又一次失敗的面試經歷，題目離譜～資深軟件測試工程師

dotnet 8 版本與銀河麒麟V10和UOS系統的 glibc 兼容性

UICollectionView實現瀑布流

[單例、代理 & 通知]

No1 HTML5+CSS

No4 私人通訊錄

多線程與網絡A

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

linux以太網驅動總結