첫 JavaScript 4

13984 단어 초보자 엔지니어기초자바스크립트프로그래밍 초보자입문
전회의 계속이 됩니다.
첫 자바스크립트 3 - Qiita

내장 객체 관련



JavaScript의 표준 (처음부터 준비되어있는) 객체, 아래 이외에도 다양한 함수가 준비되어 있습니다.
자세한 내용은 여기을 참조하십시오.

String 객체



문자열 처리

index.html
    <script>
        var s = "hello"; // var s = new String("hello"); と同じ意味になる
        alert(s.length);  //　文字列の長さを取得できる　←この場合は5
        alert(s.replace("h", "H")); // 該当文字を置換できる ←この場合はhがHに変換される
        alert(s.substr(1, 3));  // 指定した位置内の文字を抽出してくれる ←この場合はellとなる　※0から始まる！！！
    </script>

Array 객체



배열 처리

index.html
    <script>
        var a = [1, 2, 3];// var a = new Array(1, 2, 3); と同じ意味になる
        alert(a.length);　　// 配列の要素数を取得 ←この場合は3となる
        a.push(5);  // 配列の最後に要素を追加 ←この場合実行後は[1,2,3,5]となる
        alert(a);
        a.splice(1, 2, 8, 7); // 要素を取り除いたり、追加する ←この場合は[1,8,7]となる　
                              // index 1の位置から2つ取り除き、そこへ2つ挿入する
        alert(a);
    </script>

Math 객체



계산 시스템을 다루다

index.html
    <script>
        alert(Math.PI);    // 円周率を取得してくれる
        alert(Math.ceil(3.4)); // 引数として与えた数以上の最小の整数を返す　← この場合は4となる
        alert(Math.floor(3.4));　 // 引数として与えた数以下の最大の整数を返す　← この場合は3となる
        alert(Math.round(3.4));  // 引数として与えた数を四捨五入して、もっとも近似の整数を返す　←この場合は3となる
        alert(Math.random());　 //（0以上、1未満）の範囲で浮動小数点の擬似乱数を返す　←例えば0.13......とか
    </script>

Date 객체



날짜 등을 다루다

index.html
    <script>
        var d = new Date();   // 最初にDate型の変数を宣言する(現在の日付になる)
   　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//  var d = new Date(2017, 1, 1, 10, 20, 30); で任意の日付を宣言できる
        alert(d.getFullYear()); // 与えた日付の年に相当する数値を返す
        alert(d.getMonth()); // 与えた日付の月に相当する数値を返す
        alert(d.getTime()); // 1970/1/1 からの経過ミリ秒を取得できる
    </script>

DOM 정보



"Document Object Model"의 약자
JavaScript에서 html 요소를 조작하기 위한 메커니즘이라는 이미지

index.html
     <script>
        alert(window.outerHeight);
        window.location.href = 'https://www.google.co.jp/'; // googleのトップページに遷移される
    </script>

그럼 실제로 DOM을 조작해 보겠습니다.

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>こんにちは</title>
    <style>
        .myStyle {
            color: red;
        }
    </style>
</head>
<body>
    <h1>どうも</h1>
    <p id="msg">こんにちは</p>
    <script>
        var e = document.getElementById('msg');  // idがmsgの要素を取得する
        e.textContent = 'どうも!';  // idがmsgの要素のテキストを書き換え
        e.className = 'myStyle';  // idがmsgの要素のスタイルを指定 ←この場合文字が赤くなる

        var tuika = document.createElement('p'),    
            text = document.createTextNode('追加されたよ');    // pタグとtextタグの要素を用意する
        document.body.appendChild(tuika).appendChild(text); // htmlのbody内に新しい要素（pタグ）を追加する

    </script>
</body>
</html>

마지막으로 이벤트를 추가해 봅시다.

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>JavaScriptの練習</title>
</head>
<body>
    <h1>こんにちは</h1>
    <p id="msg">どうも</p>
    <button id="add">クリックボタン</button>  // イベントがセットされるボタン
    <script>
        var e = document.getElementById('msg');
        e.textContent = 'hello!';

        // クリックボタンを押すたびに、要素が追加される 
        document.getElementById('add').addEventListener('click', function() {
            var tuika = document.createElement('p'),
                text = document.createTextNode('追加されたよ！！');
            document.body.appendChild(tuika).appendChild(text);
        });

    </script>
</body>
</html>

결론



수고하셨습니다! !
이상으로 JavaScript의 기본적인 부분을 한결같이 할 수 있을까 생각합니다.
아직 하고 있지 않은 곳이 가득 있다고 생각합니다만, 기본만 알면 나머지는 필요에 따라서 조사하면서 진행해 나가면 좋다고 생각합니다.
꼭 실제 뭔가 간단한 동적 페이지를 만들어보고 이해를 깊게 해주세요.

다음은 react.js에 대해 공유하고 싶습니다! !
그럼 또! !
첫 JavaScript 3
「자작 Python 100개 노크」10일째(63개~70개째)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage