Zenn
👌

jsの基本構文まとめ【忘れた時に見返す用🔰①】

に公開
JavaScript
idea

この記事でわかること🥸

プログラミング初心者がコードリーディングの際に、「これなんだっけ？」となった基本をまとめました。

🥚超、超、超～基本🍳

  • function
//例
function 関数名(hoge,hogehoge)

jsのテーマは「オブジェクト指向」。オブジェクト指向を実現する要素であるメソッド。
関数functionは複数の処理をひとまとまりにしたものでメソッドと呼ばれることもあります。Function型のオブジェクトとして扱われる。

  • (hoge,hogehoge)
    引数を受け渡している。この関数は、hoge と hogehoge という2つの引数を受け取り、その引数を使って処理を行うことができる。※関数名がないと関数が呼び出せない。 
//例
document.getElementById("test").innerHTML="JavaScriptテスト"

  • document
    documentとはブラウザに表示されているページ全体のことを指す。

  • getElementById("test")
    ページの中からid属性がtestであるものを探すのがgetElementById("test")

  • get「捕まえる」Element「要素（＝HTMLタグ）」、Byldが「Idを使って」

  • innerHTML="JavaScriptテスト"
    innerHTMLがHTMLタグの中身を置き換える働き。

console.log()

JavaScript開発で最もよく使われるコード
()内に書いたコードを実行したり、データの中身を確認することができる。
※働きが理解できないコードが出てきたとき、コードの動きを確認したいときあるいは、データの中身をチェックしたいとき。console.log()を使う。

const 名前 =

=右辺のデータや機能に名前を付けることができる。名前は好きなものを使ってok
このように書かれた名前は=右辺のデータや実行結果が保存されている。

fetch()

外部のデータにアクセスして、情報を取得するにはJavaScriptのfecth()を使う。
fetchとは、「取ってくる」「連れてくる」という意味がある。
()内には取得したいデータのURLを書く。

fetch("https://api.weatherapi.com/v1/current.jso
～ &q=London&aqi=no").then(response)

then()とは「そして」、「その後」といった意味をもつ英単語なので、ここも文字通りfetch()でのデータ取得後にしたい操作を書き加えていく。.
カッコの中に取得したデータであるresponseを書く。

innerHTML

HTMLタグの中身を置き換える働きがある。

addEventListener

「Event」とはボタンを押す、入力する、「<form>を提出する」といったユーザー操作によって引き起こされるものを指す。
EventLisnerはそのようなイベントを聞き取ったり確認したりする事を意味する。addは追加を意味する。今回の記述は、自分が指定したイベントに対して、何らかの反応をするもの。を意味する。

JSON形式とは

取得したデータをアプリで使うには、JSONという形式に変換する必要があります。
JSONは「JavaScript　Object　Notation」の略称で、JavaScriptのみならず、pythonやRubyなど多言語で開発されたウェブアプリでも広く使われているデータ形式です。
JSON形式への変換は、JavaScriptのjson()をつなげることで可能です。

getElementById("")と似た機能を持つコード

getElementById("")はidしか指定できない。

ですが下記のコードを使用する場合は

querySelector(".title")

id以外にclass名でも指定できる。
その場合はcssでクラス名を指定する時のように、「.」をつける。

querySelector("#title")

idの場合は＃を使う

上記2つは同じ働きをする。

１はここまでにして、２に分けます。

Discussion