kekemoto_javascript講座

/kekemoto/JavaScript 弾丸ツアー2

node.js：サーバーサイドでJavaScriptを使うためのプラットフォーム

javascriptは、

ホームページは、基本htmlとCSSで出来てる。

そのホームページをプログラム的に動かす為に、javascriptがある。

htmlの参考：

https://www.htmq.com/htmls/

h1タグに対して、文字の色を赤にする。

code:html

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

h1 {

color: red

}

</style>

</head>

<body>

</body>

</html>

クラスの作成

code:c

<style>

.red-moji{

color:red

}

</style>

<h1>class="red-moji">Hellow</h1>

code:c

<style>

.red-moji{

color:red

}

p.sample{

transform:rotate(180deg):

}

</style>

p.sampleは、pタグのみに反映される。

基本は、.sampleで良い。

クラスを2個付ける：　スペースで2個付ければ良い。

code:html

<p class="red-moji rotation">Hellow</p>

セレクタやプロパティの話もあるが置いておく。

javascript

script

code:html

let element = document.querySelector("h1")

element.innerText = "タイトル"

</script>

code:html

<!doctype html>

<head>

<title>テストページ</title>

<style>

.red-moji {

color: red;

}

.rotation{

/* rotation: 180deg; */

transform: rotate(180deg);

}

</style>

let element = document.querySelector("h1")

element.innerText = "タイトル"

</script>

</head>

<body>

<h1 class="red-moji">Hello</h1>

<p class="red-moji rotation">ユニバーサルスタジオジャパン</p>

</body>

</html>

code:html

let element = document.querySelector("h1")

element.innerText = "タイトル"

let elementでelement変数を作成している。

document.querySelector

エラーの内容

elementがNULLになっている。

エラーの原因：

最初にスクリプトタグが読み込まれて、

javascriptが実行された場合、まだelementの対象となるh1が無かった。

解決：

scriptを下に持ってくる。

これによって、htmlが先に読み込まれる。

変更

code:html

<!doctype html>

<head>

<title>テストページ</title>

<style>

.red-moji {

color: red;

}

.rotation {

/* rotation: 180deg; */

transform: rotate(180deg);

}

</style>

</head>

<body>

<h1 class="red-moji">Hello</h1>

<p class="red-moji rotation">ユニバーサルスタジオジャパン</p>

<img src="https://travel.rakuten.co.jp/mytrip/sites/mytrip/files/styles/main_image/public/2023-02/usj-globe-key.jpg?itok=mEI4NbNL"

alt="テスト画像" />

let element = document.querySelector("p")

element.innerText = "title";

</script>

</body>

</html>

onclickを追加する。

クリックで変更

code:html

<!doctype html>

<head>

<title>テストページ</title>

<style>

.red-moji {

color: red;

}

.rotation{

/* rotation: 180deg; */

transform: rotate(180deg);

}

</style>

</head>

<vscode-file://vscode-app/c:/Users/%E7%A9%82%E9%AB%98/AppData/Local/Programs/Microsoft%20VS%20Code/resources/app/out/vs/code/electron-sandbox/workbench/workbench.htmlbody>

<h1 id="aa" class="red-moji" onclick="changeTitle">Hello</h1>

<p class="red-moji rotation">ユニバーサルスタジオジャパン</p>

function changeTitle() {

let element = document.querySelector("#aa")

element.innerText = "タイトル"

}

</script>

</body>

</html>

エラー

関数が実行されていない為、実行されない。

エラーは出ない。

code:html

changeTitleを

changeTitle()に変更する。

解決

code:c

<!doctype html>

<head>

<title>テストページ</title>

<style>

.red-moji {

color: red;

}

.rotation{

/* rotation: 180deg; */

transform: rotate(180deg);

}

</style>

function changeTitle() {

let element = document.querySelector("#aa")

element.innerText = "タイトル"

}

</script>

</head>

<h1 id="aa" class="red-moji" onclick="changeTitle()">Hello</h1>

<p class="red-moji rotation">ユニバーサルスタジオジャパン</p>

</body>

</html>

JavaScript

MDNを見て再学習できるように

MDN の JavaScript とは

変数とは

値の入れ物

documentがコード全部

documentのquerySelectorというメソッドがある。

#はid

code:html

#button_A

というのは

code:html

const buttonA = document.querySelector("#button_A");

id="button_A"をもってこいという命令

code:html

const buttonA = document.querySelector

let

静的かたつけ言語と動的かたつけ言語

javascriptは動的かたつけ言語

javascriptは型があまり意味がない。

letには、文字列でも、数値でも入る。

code:html

varとletの違い

varもletも殆ど同じ

スコープが違う。varはややこしい

varも基本は同じ使い方

変数の名前つけルール

キャメル記法

googleの検証のコンソールでjavascriptを実行出来る。

code:html

let myDog = "Rover"

javascriptは、基本アンダーバーで名前は付けない。

変数のデータ型：https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Variables#変数のデータ型

配列

code:html

let myNameArray = "Chris", "Bob", "Jim";

let myNumberArray = 10, 15, 40;

オブジェクト

code:html

let dog = { name: "ポチ", breed: "ダルメシアン" };

配列は数値でアクセスしている。

オブジェクトは、数値では無くて、名前を付けて選択出来る。

code:html

dog.name;

dog.nameで、ポチが出力される。

https://gyazo.com/075979e41e4c1a1c20f77c8c8d420842

オブジェクトは、名前を付けてやって、複数のデータをまとめている。

配列は、順番で並んでいる。

オブジェクトの方が、名前で選択出来る部分が分かりやすい。

数値を入れる場合

code:html

let dog = { name: "ポチ", breed: "ダルメシアン",age:17 };

アクセスの速さ

配列だと上から順番アクセスは早いが、ランダムアクセスは苦手

オブジェクトは、ランダムアクセスは早いが上から順番にアクセスする場合は、遅い

code:html

let dog = { name: "ポチ", breed: "ダルメシアン",age:17 };

let dog2 = { name: "タロウ", breed: "柴犬",age:20 };

let dogs = dog,dog2;

//dogs0.nameを実行すると"ポチ"が出力される。

for文などで、色々出来る。

JavaScriptの定数

変数を

code:html

let count = 1;

count = 2;

code:html

const count = 1;

count = 2;

こっちはエラー

変数を定数に出来るのか？

→出来る。

可能であれば const を使用し、必要ならば let を使用する。

つまり、宣言時に変数を初期化でき、後で再代入する必要がない場合は、その変数を定数にします。

基本的にプログラムの修正などの際に、どこまで影響範囲があるかが重要になる。

影響範囲が少ないほど、後で楽になる。

制限の厳しいconstの方が使う方が良い。

算術演算子：https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Math

比較演算子：https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Math#比較演算子

==でも比較はできるか、値が同様であるかを判定しますが、データ型が同様かは判定しない。

===だと値とデータ型の両方を判定される。

文字列の連結：https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Strings#文字列の連結

code:html

const name = "Chris";

const greeting = Hello, ${name};

console.log(greeting); // "Hello, Chris"

文字列の長さを調べる

文字列のlengthで長さを調べられる。

code:html

let browserType = "mozilla";

browserType.length;

特定の文字列を扱う

code:html

let browserType = "mozilla";

browserType.length;

browserType0; //mozillaのmを指定する。

文字列の一番最後の文字を取得したいとき

code:html

browserTypebrowserType.length - 1; //mozillaのaが指定

配列

https://gyazo.com/b9e7ab339ab97147f33f5ab701ab88aa

code:html

let shopping = "パン", "牛乳", "チーズ", "ハム", "麺"; //shoppingの配列作成

shopping0 = "タヒーニ"; //shoppingの0番目がタヒーニに変更される。

shopping; // shoppingの中身を表示

push：配列の最後に項目を追加する

条件分岐

ここに記載されているもの以外は、falseになる。

参項演算子

ループするコード(for of ループ)

code:html

const cats = "Leopard", "Serval", "Jaguar", "Tiger", "Caracal", "Lion";

for (const cat of cats) {

console.log(cat);

}

map

code:html

function toUpper(string) {

return string.toUpperCase();

}

const cats = "Leopard", "Serval", "Jaguar", "Tiger", "Caracal", "Lion";

const upperCats = cats.map(toUpper);

console.log(upperCats);

// "LEOPARD", "SERVAL", "JAGUAR", "TIGER", "CARACAL", "LION"

mapは便利らしい

配列を定数で定義しても、配列の中身は変更出来る。

pushなどで、入れることも可能

catsに数値を変えようとすると、エラー

色々面倒

break

breakが実行されると、そのループは終了する。

ループ：continue

continueが実行されると、それ以降の処理は行われず、次のループに移る。

ループ：while

while()の()の中が真の場合、

関数

匿名関数

通常の関数

code:html

function myFunction() {

alert("hello");

}

名前の無い関数

code:html

const myButton = document.querySelector("button");

myButton.onclick = function () {

alert("hello");

};

こういう時、名前を付ける必要がない。

この関数は他では使用しない。

関数のスコープ

関数内で定義した変数は、その宣言した関数内{}の間でしか使えない。

関数の他の宣言方法

code:js

const sample = (name) => {

alert(Hello ${name})

}

function sample(name) {

alert(Hello ${name})

}

ほぼ同じ意味

良く使われる。

nameが引数

アロー関数の利点

アロー関数の方が文字数が少ないので、早い。

アロー関数は無名関数(匿名関数)で使われる事が多い。

code:javascript

1,2,3.map(function (x){ return x * 2 }) ///functionを使用した関数

1,2,3.map((x) => { return x * 2 }) ///アロー関数を使用した関数

アロー関数はさらに省略出来る

code:javascript

1,2,3.map(x => x * 2)

thisのファインディング(束縛)がしやすい。functionとは違うらしい。

functionの方はthisのルールが複雑で、新しくアロー関数を作った。

イベントへの入門

onclick

addEventListener()

code:javascript

const btn = document.querySelector("button"); //ボタンのidを取得

function bgChange() {

const rndCol =

"rgb(" + random(255) + "," + random(255) + "," + random(255) + ")";

document.body.style.backgroundColor = rndCol;

}

btn.addEventListener("click", bgChange); //bgChangeにclickを追加

onclickは1個しか登録できない。

addEventListenerだと、2個以上のイベントを登録出来る。

click以外の色々なイベントがある。

チュートリアル：カウントアップ

code:html

<!doctype html>

<head>

<title>テストページ</title>

window.addEventListener("load", () => {

let counter = 0;

let p = document.querySelector("p")

p.innerText = counter

})

</script>

</head>

<body>

<p></p>

<button>Count Up!</button>

</body>

</html>

window.addEventListener("load", ()=>{ }

HTMLを実行した後、実行する。

let p = document.querySelector("p")

タグpを取得

p.innerText = counter

タグpをcounterという変数に表示を変更

innerText：テキストとして表示

カウントアップする

code:javascript

<!doctype html>

<head>

<title>テストページ</title>

//HTML実行後実行する。

window.addEventListener("load", () => {

let counter = 0; //カウント変数を宣言

let p = document.querySelector("p"); //pタグを取得

p.innerText = counter; //pタグのテキストをcounterに変更

const btn = document.querySelector("button"); //ボタンの要素を取得

btn.addEventListener("click", plus); //btnが押されると、plusという関数を実行

//plus関数の作成

function plus() {

counter += 1; //counterの値+1

p.innerText = counter; //counterの値を表示

}

// btn.addEventListener("click", plus); //btnが押されると、plusという関数を実行

})

</script>

</head>

<body>

<p></p>

<button>Count Up!</button>

</body>

</html>

ユニバーサルジャパン正解を追加

code:html

<!doctype html>

<head>

<title>テストページ</title>

window.addEventListener("load", () => {

let counter = 0;

const randName = "RandA", "RandB", "RandC", "RandD", "ユニバーサルスタジオジャパン"

let p = document.querySelector("p")

p.innerText = randNamecounter

const btn = document.querySelector("button");

function plus() {

counter += 1

p.innerText = randNamecounter

if(randNamecounter === "ユニバーサルスタジオジャパン"){

alert("正解！！");

}

btn.addEventListener("click", plus);

})

</script>

</head>

<body>

<p></p>

<button>Count Up!</button>

</body>

</html>

code:javascript

let usjImg = document.createElement("img");

img.src = "URL";

code:html

<!doctype html>

<head>

<title>テストページ</title>

window.addEventListener("load", () => {

const CORRECT = "ユニバーサルスタジオジャパン"

let counter = 0;

const randName = "RandA", "RandB", "RandC", "RandD", CORRECT

let p = document.querySelector("p")

p.innerText = randNamecounter

const btn = document.querySelector("button");

function plus() {

counter += 1

p.innerText = randNamecounter

if(randNamecounter === CORRECT){

alert("正解！！");

let img = document.createElement("img")

img.src = "https://travel.rakuten.co.jp/mytrip/sites/mytrip/files/styles/main_image/public/2023-02/usj-globe-key.jpg?itok=mEI4NbNL"

document.body.appendChild(img)

}

btn.addEventListener("click", plus);

})

</script>

</head>

<body>

<p></p>

<button>Count Up!</button>

</body>

</html>

クラスとオブジェクトの説明

クラス

クラスを使う事によって、

code:javascript

class Person {

name;

constructor(name) {

this.name = name;

}

introduceSelf() {

console.log(Hi! I'm ${this.name});

}

const giles = new Person("Giles");

giles.introduceSelf(); // Hi! I'm Giles

class Person：クラスを作成する宣言

name：nameというプロパティを持つ。

Personがモテるデータ

constructor：Personクラスを初期化する

nameを引数として渡している。

nameと

introduceSelf(){

メソッド

thisを使って、プロパティ内に、自由にアクセス出来る。

グローバルは使いたくない。ローカルだとアクセスが出来なかったりする。

クラスの中のプロパティを使うと、アクセスが出来る。

クラス：データ構造とデータ構造を操作するデータ軍をまとめて管理できる。

pixiJS

描写の為のライブラリ

描画をグイングイン動かす為のライブラリ

TEXT：https://developer.textalive.jp/

`：バッククオート