🔰

Javascript

2023/10/22に公開

JavaScript

tech

Javascript

Javascriptとは
https://wa3.i-3-i.info/word11438.html
JavascriptとECMAScript
https://www.sejuku.net/blog/101695

ウェブアプリケ＝ションとは

WEBブラウザ上で動く、インタラクティブ性のあるコンテンツ

Javascriptの最低限知識

変数

変数
繰り返し使う値を格納しておく入れ物
変数の種類
let/const/var
*varは現在非推奨。
変数の書き方

vartable.js

const greeting = "Hello";

let i = 100;
for(let i=0; i<5; i++) {}

※原則const、数え上げる処理の場合にはletを使用。

参照

関数

関数
一連の処理を実行する文の集まり
関数の書き方
引数なしver.

function_a.js

function greeting() {
  console.log("Hello")
}

//呼び出し
greeting();

引数ありver.

function_b.js

const name = "Potter";
function greeting(name) {
  console.log("Hello, " + name);
}

//呼び出し
greeting(name);

オブジェクト

オブジェクト
名前(プロパティ)と値(バリュー)をペアで管理する入れ物
変数や定数は1:1なのに対して、オブジェクトは複数のデータを持つことができる。
つまり、データの塊と言える！
特殊なオブジェクト
- windowオブジェクト:Webブラウザ全体のオブジェクト
- documentオブジェクト:表示しているページ全体のオブジェクト
- event:userがアクションしたタイミングで何かをしたい時に使う
  - addEventListener(引数を２つ入れてあげることができる)
    - 1つ目の引数:eventのタイプを入れてあげる
    - 2つ目は関数を指定
プロパティへのアクセス
・ドット記法
・ブラケット記法
書き方

object.js

const unko2 = {
    color : 'pink',
    size : 'large',
    purfume : 'mint',
    goToToilet: () => {
        console.log('Hello World');
    }
};

console.log(unko2.goToToilet());

最初のボタンを押した時にアラートが発生するようにしてある。
テンプレート：https://html5boilerplate.com/
※上記をzipファイルでダンロード、解凍後、index.htmlのみ使用し、body部分は一旦削除
Bootstrap：https://getbootstrap.jp/docs/5.3/getting-started/introduction/
※以下を使用
Components配下のAlertsとButtons
Layout配下のContaints(標準コンテナ)
Utilities配下のFlex

index.html

<!doctype html>
<html class="no-js" lang="">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
  <meta name="description" content="">

  <meta property="og:title" content="">
  <meta property="og:type" content="">
  <meta property="og:url" content="">
  <meta property="og:image" content="">
  <meta property="og:image:alt" content="">

  <link rel="icon" href="/favicon.ico" sizes="any">
  <link rel="icon" href="/icon.svg" type="image/svg+xml">
  <link rel="apple-touch-icon" href="icon.png">

  <link rel="manifest" href="site.webmanifest">
  <meta name="theme-color" content="#fafafa">
</head>

<body>
  <div class="container">
    <!-- Content here -->
    <div class="alert alert-success mt-3" role="alert">
      A simple success alert—check it out!
    </div>

    <div class="d-flex justify-content-center">
      <button type="button" class="btn btn-success">Success</button>
      <button type="button" class="btn btn-success ms-1">Success</button>
      <button type="button" class="btn btn-success ms-1">Success</button>
      <button type="button" class="btn btn-success ms-1">Success</button>
    </div>
  </div>
  <script src="index.js"></script>
</body>

</html>

index.js

document.getElementsByTagName('button')[0].addEventListener('click', ()=> {
    window.alert('Hello World');
});

Javascript

ウェブアプリケ＝ションとは

Javascriptの最低限知識

変数

参照

関数

オブジェクト

Discussion