JS オブジェクトを実際にコードで書く (JSアウトプット) #JavaScript

あいさつ

初めての人は初めまして！知っている人はこんにちは！
中学生バックエンドPGのAtieです！
今回もJSのアウトプットをしていきます
今回はオブジェクトを実際にコードを書いて学習していきます！

オブジェクトの宣言方法

まずはオブジェクトの宣言からです！
自分はもともとある程度JSを扱えますが「基礎」を固めるために始めました！

宣言方法

main.js

let youtuber = {
    list: {
        business: {
            youtuber: [
                {name: "しまぶー", age: 20, teachprogramming() {}},
                {name: "あっちゃん", age: 37, teachhistory() {}}
            ],
            teach() {}
        },
        entertainment: {
            youtuber: [{name: "ヒカキン"}, {name: "はじめしゃちょー"}],
            makesmile() {}
        }
    },
    plan() {},
    uploadvideo() {}
};

宣言してみました
このオブジェクトは「youtuber」というオブジェクトです
プロパティやメソッドは前回学習したのでわかると思います！

オブジェクトにアクセス

では宣言したオブジェクトにアクセスしてみましょう！
アクセス方法には二つあるのはご存じですよね？(わからない場合は前回の記事をご参照ください！)
今回は.のほうを使います

main.js

console.log(youtuber.list.business.youtuber[0].name);

アクセスしてみました
youyuberというオブジェクトの中のlistというオブジェクトにアクセスしさらにbusinessにアクセスして配列youtuberの0番にアクセスしnameというプロパティにアクセスしています

前々回に「データのやり取り」と「DOM操作」がJSのお仕事と話しましたよね？
では今回は「DOM操作」をしてみます

DOM操作

まずはブラウザを開いてYahoo!にアクセスしてみてください！
そしたらデベロッパーツールを開いてconsoleタブを選択してください(ブラウザによって違いますがここでは説明を省きます)
いろいろなエラーが表示されますが左上のマルに斜め線が入ったボタンをクリックするとエラーをクリアできます

DOM操作を行ってみます
まずはhtmlのIDを収得してみます

console.js

window.document.getElementById("Masthead");  //windowは省略可

これをコンソールに張り付けて実行してみてください
htmlが収得できたと思います

windowオブジェクトはブラウザ自体なのでほかにもいろんなことができます

console.js

window.console.log();     //consoleに表示
window.alert();           //アラートを表示
window.screnn.width       //ページの横幅を収得
window.screnn.heigth      //ページの高さを収得
window.location.reload()  //ページをリロード

windowオブジェクトを使うことで様々なことができます

さいごに

最後まで読んでいただきありがとうございました
自分のアウトプット用なので短かったですがもっと奥が深いです
これからもJSの学習を続けていきます！
それではまた次回！

AtieのTwitter
しまぶーのIT大学さんのTwitter

参考、学習資料

【JavaScript入門 #4】オブジェクトを実際にコードで書いてみよう【ヤフー出身エンジニアの初心者向けプログラミング講座】