JavaScript 上級

配列と演算メソッド

配列はデータのコレクションです。JavaScript では、配列内のデータはさまざまな型にすることができます。

配列の定義方法

1. オブジェクトインスタンスの新しい配列の作成 2. 数量の直接作成

// 对象实例创建
var arr = new Array(1,2,3)

// 直接量创建
var arr = [1,2,3]

配列内のデータを操作するメソッド

1. 配列の長さを取得します: 配列名.長さ

var arr = [1,2,3,4]        // 长度为4
console.log(arr.length)    // 输出：4

2. 添字を使用して配列内の値を取得します: 配列名 [添字] (注: 添字は 1 ではなく 0 から始まります)

var arr = [1,2,3,4]  // 下标 0 - 1 ，1 - 2 ，2 -3 ，3 - 4

console.log(arr[0])  // 输出：1
console.log(arr[1])  // 输出：2

// 超出下标
console.log(arr[4])  // 输出：undefined

3. join() メソッドを使用して分割し、スプリッターを通じて配列メンバーを文字列に結合します。

<script type="text/javascript">
    var arr = [1,2,3,4]
    var result = arr.join('-')
    console.log(result) // 输出: 1-2-3-4
</script>

4. Push() と Pop() は配列の末尾にメンバーを追加または削除します

var arr = [1,2,3,4]
arr.push(5)        // 在arr数组的后面添加一个数组成员5
console.log(arr)   // 输出：[1，2，3，4，5]

arr.pop()          // 删除arr数组的最后一个数组成员
console.log(arr)   // 输出：[1，2，3，4]

5. reverse() は配列を反転します

var arr = [1,2,3,4]

arr.reverse()      // 将数组倒过来
console.log(arr)   // [4，3，2，1]

6.indexOf() 配列内で最初に出現した要素のインデックス値を返します。

var arr = [1,2,3,4]
alert(arr.indexOf(1))    // 0

7. splice() は配列内のメンバーを追加および削除します

var arr = [1,2,3,4]
arr.splice(2,1,5,6)     // 从下标索引为2开始，删除1个元素，在此处添加5，6两个元素
console.log(arr)        // 1,2,5,6,4
// 只删
arr.splice(1,1)    
console.log(arr)        // 1,5,6,4
// 只增
arr.splice(1,0,2) 
console.log(arr)        // 1,2,5,6,4

多次元配列

多次元配列は、そのメンバーが配列の配列でもある配列です。

var arr = [[1,2,3],[4,5,6]]

// 访问
arr[0] —— [1,2,3] 
arr[1] —— [4,5,6]

arr[0][0] ——  1
arr[0][1] ——  2

arr[1][0] ——  4
arr[1][1] ——  5

配列内のデータをバッチで操作するには、loop ステートメントを使用する必要があります。

ループ文

プログラム内で定期的な繰り返し操作を実行します。

for ループ - これについては誰もがすでによく知っています。

for(var i = 0 ; i < 10 ; i++){ ... }

ES5 重複排除 - for +indexOf +push

var arr = [1,2,3,2,1,4,5,5,4,6]

var newarr = []   // 待接收
for(var i = 0; i < arr.length; i++){
    // indexOf() 会返回第一个出现的下标，那么进行保存到newarr
    if(arr.indexOf(arr[i]) == i){
        // push() 添加到newarr数组
        newarr.push(arr[i]) 
    }
}
console.log(newarr)

配列データの動的表示

配列内のデータを前景ページに表示します。

この効果は html と css を使用して直接実現できるため、これらのデータを配列に保存し、JavaScript 操作を通じてそのデータをフロントページにレンダリングする必要があります。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 静态 -->
    <!-- <div id="ct"> 
        <p id="hot-song">热门歌曲</p>
        <ul>
            <li><span class="stitle">程响 —— 人间烟火</span></li>
            <li><span class="stitle">Lil笑笑 —— 山茶树不懂白玫瑰</span></li>
            <li><span class="stitle">赵予希 —— 落日星空</span></li>
            <li><span class="stitle">指尖笑 —— 惊鸿醉</span></li>
        </ul>
    </div> -->
    
    <div id="ct"> 
        <p id="hot-song">热门歌曲</p>
        <ul id="songlists">
        </ul>
    </div>

    <script type="text/javascript">
        // 模拟数据
        var songLists = ['程响 —— 人间烟火','Lil笑笑 —— 山茶树不懂白玫瑰','赵予希 —— 落日星空','指尖笑 —— 惊鸿醉']
        // 进入页面后加载
        window.onload = function(){
            var list = document.getElementById('songlists');
            var sp = document.getElementsByTagName('span')
            var temp = ''

            for(var i = 0 ; i < songLists.length ; i++){
                temp += '<li><span class="stitle">' + songLists[i] + '</span></li>'
            }

            list.innerHTML = temp
        }
    </script>
</body>
</html>

<style>
*{
    padding: 0;
    margin: 0 auto;
}
ul,li{
    list-style: none;
}
p{
    width: 280px;   
    height: 30px;
    line-height: 30px;
    background-image: linear-gradient(to right, rgb(52, 52, 197,0.8) , skyblue);
    padding: 0 10px;
    font-weight: 700;
    color: #fff;
}
li{
    width: 298px;
    height: 30px;
    line-height: 30px;
    border-bottom: 1px solid skyblue;
    border-left: 1px solid skyblue;
    border-right: 1px solid skyblue;
}
.stitle{
    padding: 0 10px;
}
</style>

文字列処理メソッド

1. 文字列のマージ操作: +

var num1 = 1;
var num2 = '1';
var num3 = 2;
var str = 'hello' 

console.log( num1 + num2 );  // 输出：11 （拼接,类型不同）
console.log( num1 + num3 );  // 输出：3   
console.log( num1 + str );   // 输出：1hello

2. parseInt() は数値文字列を整数に変換します

var num1 = 12
var num2 = 12
var num3 = '12'
var num4 = 12.20

console.log(...
    num1 + num2             // 输出：24
    num1 + num3             // 输出：1212
    num1 + parseInt(num3)   // 输出：24
    parseInt(num3) + parseInt(num4)     // 输出：24

3. parseFloat() は数値文字列を 10 進数に変換します

var num1 = '12.21'
console.log(parseFloat(num1))    // 输出：12.21

4. Split() は文字列を文字列の配列に分割します。

var date = '2050-12-20'
var arr = date.split('-')
console.log(arr)    // 输出：[2050, 12, 20]

5.indexOf() 特定の文字が含まれているかどうかを調べる(ブール値を返す)

var str = 'abcd'
// 检测str是否有a
var result = str.indexOf('a')
console.log(result)    // 输出：true

// indexOf去重
var arrs = [1,2,2,4,6,6,7,8,3,1,2]
function removeVal(arr) {
    var newarr = []
    for(var i = 0 ; i < arr.length ; i++ ){
        // indexOf - -1则无
        if(newarr.indexOf(arr[i]) === -1){
            newarr.push(arr[i])
        }
    }
    return newarr
}
var rs = removeVal(arrs)
console.log(rs);    // 输入：[1, 2, 4, 6, 7, 8, 3]

6. substring() は文字列をインターセプトします

substring(start,end) —— start で始まる添え字から end で終わる添え字までをインターセプトします

substring(start) —— start で始まる添え字以降の部分をインターセプトします

var a = 'http://www.baidu.com/'
//  截取域名部分
var rs = a.substring(7,20)  // 截取开始下标为7到结束下标为20的部分
console.log(rs)     // 输出：www.baidu.com

var b = 'http://www.baidu.com/'
var res = a.substring(7)  // 截取开始下标为7到结束下标为20的部分
console.log(res)    // 输出：www.baidu.com/

変数スコープ

JavaScript の変数は、グローバル 変数とローカル変数に分けられます。

グローバル変数:

関数の外部で定義された変数はページ全体で使用され、関数の内部と外部からアクセスできます。

ローカル変数:

関数内で定義された変数は、その変数が定義されている関数内でのみアクセスでき、外部からはアクセスできません。

<script>
    // 定义全局变量
    var a = 1;
    function sum() {
        // 定义局部变量 
        var b = 2;
        // sum() 可以访问函数外部的a变量
        console.log(a+b)
    }
    sum()        // 3
    alert(b)     // 报错，b访问不到
</script>

閉じた関数

JavaScript で匿名関数を記述するもう 1 つの方法は、一般的に定義された関数と実行関数に名前を付けずに最初に実行される関数を作成することです。

一般的に定義および実行される関数

function say() {
   alert('Hello')
}
say()

閉じた関数

(function(){
    alert('Hello')
})()


(function(){
    function say() {
        alert('Hello')
    }
    say()
})()


------ 高级写法 ------

;有时在做代码压缩的时候避免前面函数没有添加;导致挨在一起会出错

;!function(){
    function say() {
        alert('Hello')
    }
    say()
}();

;~function(){
    function say() {
        alert('Hello')
    }
    say()
}();

タイマー

タイマーの役割: 1. 関数を呼び出す 2. アニメーションを作成する

タイマーの種類: 1. 1 回だけ実行されるタイマー 2. 繰り返し実行されるタイマー

1. 関数を呼び出す

setTimeOut        只执行一次的定时器
clearTimeOut      关闭只执行一次的定时器

setInterval       反复执行的定时器
clearInterval     关闭反复执行的定时器

// 1000毫秒 = 1秒

var timer1 = setTimeOut(say,2000)    // 在2000毫秒后触发say()
var timer2 = setInterval(say,2000)   // 每隔2000毫秒触发say()

/*
    clearTimeOut(timer1);
    claerInterval(timer2);
*/

function say(){
    alert('Hello')
}

----------------------------------

setTimeOut(function say(){
    alert('Hello')
},2000)

2.アニメーションを作成する

一方向の動き

[Xiaobai の分析: 位置を指定してプロパティを設定し、左側の値を変更してボックスの位置を変更します。同時に、setInterval タイマーを使用して左側の px 値を繰り返し増加させ、自然にスライドさせる必要があります。適切な実行時間を設定してください]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #box{
            width: 200px;
            height: 200px;
            background: purple;
            position: fixed;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <div id="box"></div>

    <script>    
        var obox = document.getElementById('box')
        
        setInterval(movebox,30)
        
        var isLeft = 0
        function movebox() {
            isLeft += 3
            obox.style.left = isLeft + 'px';
        }
    </script>
</body>
</html>

左右に移動する

一方向を使用すると、常に左が右にスライドします。もちろん、条件ステートメントを使用して、どのピクセル値に達したかを判断し、タイマーをオフにすることもできます。これを使用して、ボックスを前後に移動する効果を完成させます。。

上記のコードの script タグの JavaScript コードを変更します。

<script>    
    var obox = document.getElementById('box')
    
    setInterval(movebox,30)

    var isLeft = 0
    var speed = 3

    function movebox() {
        isLeft += speed
        obox.style.left = isLeft + 'px';

        if( isLeft > 600 ){
            speed = -3
        }else if( isLeft < 0){
            speed = 3
        }
    }
</script>

シームレススクロールの原理

シームレスなスクロールを理解して使用し、スワイパーの回転の原理を理解します。

まず、いくつかの図を使用してシームレススクロールの原理を明確に説明してから、次のケース効果を完成させましょう。

どのように機能するのでしょうか? 左の最初の写真が左に行って隠れてしまった場合は、右の一番空いている位置に表示する必要があり、その逆も同様です。しかし、現状はどうなっているのでしょうか？写真は5枚ありますが、左または右に進むと背景のみが表示され、写真の完成はありません。

シームレススクロールの原理、つまりこの問題を解決するアイデアについて話しましょう。

上の図を通して、シームレススクロールの原理がどのようなものかを知ることができるので、このケースを完成させましょう。このケースを完成させるアイデアは次のとおりです。

[ Xiaobai の分析アイデア: まず、HTML と CSS を完成させ、演習を独立して完了し、最初に HTML のコピーではなく JavaScript を使用してそれをコピーし、次に setInterval タイマーを使用して全体の左への動きを実現します。前を参照してください。一方向と左右の移動はタイマーの機能で判断する必要がある 1枚目が右に移動すると左側に空白ができるのでこのタイミングを判断する必要がある今度は、コピーした 2 部目までカットします。2 部目の先頭でスクロールし、2 部目が左に進むと、最後に空白が表示されます。このとき、判断と判断が必要です。その後、最初のコピーの先頭に戻します。次に、どこに行くかを制御するための左ボタンと右ボタンがあります。このとき、コントロールの位置決めの左の値は、左から右に正と負の値を設定することです。最後に、停止するもう 1 つのボタンがあります。マウスがボックス内に移動し、ボックスから移動するとスクロールします。スクロールを続けて、この考え方を実行します。まだ方法がわからない場合は、最初に見て入力してから、自分で実行できます。重要なのは、まずその原理を知ることです。】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="btns">
        <div class="left" id="lbtn">&lt;</div>
        <div class="right" id="rbtn">&gt;</div>
    </div>
    <div class="ct" id="slide">
        <ul id="lists">
            <li><img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202212232348_fcf409105124ab6d9806a51cffcafff1.jpg" /></li>
            <li><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/710e5107cc2d5e8d0cefa74ee60982ee.jpg" /></li>
            <li><img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202212232345_c4f8f33857c3e9c7dc3816e14174f3ec.jpg" /></li>
            <li><img src="https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202207041721_b9b5e0d1404a1b337e1e9a16d5f695fe.jpg" /></li>
            <li><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/cdb2caa392a7ac34b39cdac260bf84ca.jpg" /></li>
        </ul>
    </div>

    <script>
        window.onload = function(){
            // 获取元素
            var lists = document.getElementById('lists')
            var lbtn = document.getElementById('lbtn')
            var rbtn = document.getElementById('rbtn')

            // 复制一份
            // lists.innerHTML = lists.innerHTML + lists.innerHTML;
            lists.innerHTML += lists.innerHTML

            var isLeft = 0;
            var speed = 3;
            
            // 定时器制动画
            // var timer = setInterval(moveImg,30);

            // 鼠标事件
            // 移入停止动画
            lists.onmouseover = function(){
                clearInterval(timer)
            }
            
            // 移出停止动画
            lists.onmouseout = function(){
                timer = setInterval(moveImg,30);
            }

            // 按钮
            // 左边
            lbtn.onclick = function(){
                speed = -3
            }
            // 右边
            rbtn.onclick = function(){
                speed = 3
            }


            // 定时器function
            function moveImg() {
                var move_l = 0
                isLeft += speed
                lists.style.left = isLeft + 'px'

                // 判断left
                // >0,要去切到第二份复制的开头
                if(isLeft > 0){
                    isLeft = -1000
                }
                // <0,要到切到第一份的开业
                if(isLeft < -1000){
                    isLeft = 0
                }
            }
        }
    </script>
</body>
</html>

    <style>
        *{
            margin: 0;
            padding:0;
        }
        .ct{
            position: relative;
            margin: 10px auto 0;
            width: 1000px;
            height: 200px;
            /* background: red; */
            background-image: linear-gradient(to right,#BAA2F3,#2CBFFE);
            overflow: hidden;
        }
        ul,li{
            list-style: none;
        }
        ul{
            position: absolute;
            left: 0;
            top: 0;
            width: 2000px;
            height: 200px;
        }   
        li{
            float: left;
            margin: 10px 0px 10px 10px; 
            width:188px;
            height: 180px;
            /* background: purple; */
        }
        /* 按钮 */
        .btns{
            width:1000px;
            height: 30px;
            margin: 50px auto 0;
            position: relative;
            /* background: #000; */
        }
        .left,.right{
            width: 40px;
            height: 200px;       
            background: rgb(199, 199, 199,0.3);
            position: absolute;
            left: -50px;
            top: 40px;
            text-align: center;
            line-height: 200px;
            font-weight: bold;
        }
        .right{
            left: 1010px;
        }
        li img{
           width: 100%; 
           height: 180px;
        }
    </style>

JavaScript オブジェクト

JavaScript のオブジェクトは、キーと値のペアのコレクションとして理解できます。キーは各値の名前です。値は基本量、関数、オブジェクトの場合があります。

JavaScript オブジェクトを作成するには 2 つの方法があります。

1. 最上位の Object クラスを通じてオブジェクトをインスタンス化し、そのオブジェクトにプロパティとメソッドを追加します

var person = new Object();

// 添加属性
person.name = 'lhxz'
person.age = 18

// 添加方法
person.sayHi = function(){
    alert('Hi!')
}

// 调用属性和方法
alert("I am " + person.name + ", I am " + preson.age)   // I am lhxz, I am 18
person.sayHi()    // Hi

2. リテラルを使用してオブジェクトを作成する

// var person = {} 空对象

var person = {
    name: 'lhxz',
    age: 18,
    sayHi:function(){
        alert('Hi');
    }
}

// 调用属性和方法
alert(person.age)    // 18
person.sayHi()       // Hi

JSON

JSON は JavaScript Object Notation の頭字語で、JavaScript オブジェクト表現を意味します。ここでいう json は、JavaScript オブジェクトと同様のデータ形式オブジェクトを指します。現在、この形式のデータの方が一般的であり、徐々に従来の XML データ形式に取って代わります。

JSON データオブジェクトは Javascript のオブジェクトに似ていますが、キーに対応する値には関数やメソッドがありません。値は通常の変数にすることができますが、未定義はサポートされておらず、値は配列または JSON にすることもできますオブジェクト。

JavaScriptオブジェクトの記述方法とは異なり、jsonオブジェクトの属性名や文字列値はダブルクォーテーションで囲む必要があり、シングルクォーテーションを使用するかしないとデータの読み込み時にエラーが発生します。

json形式のデータ：

{
    "name" : "lhxz",
    "age" : 18
}

json のもう 1 つのデータ形式は配列です。これは JavaScript の配列リテラルと同じです。

[ "lhxz" , 18 , "syan" ]

より複雑なデータ構造:

{
    "name" : "syan",
    "age" : 18,
    "hobby" : [ "reading" , "writer" ]
    "school" : {
        "name" : "dongneixuexiao"
    }
}

JavaScript の基本クイックスタートパート 2

JavaScript 上級

配列と演算メソッド

配列の定義方法

配列内のデータを操作するメソッド

多次元配列

ループ文

文字列処理メソッド

変数スコープ

閉じた関数

タイマー

JavaScript オブジェクト

JSON

おすすめ

JavaScript の基本クイック スタート パート 2

JavaScript 上級

配列と演算メソッド

配列の定義方法

配列内のデータを操作するメソッド

多次元配列

ループ文

文字列処理メソッド

変数スコープ

閉じた関数

タイマー

JavaScript オブジェクト

JSON

おすすめ

JavaScript の基本クイックスタートパート 2