#Java Scriptとは
・ユーザー側Webブラウザと、Webサイトやサービスの相互間のやり取りを円滑にするもの。
・Webページに動的コンテンツのような複雑な機能を付けられる。
・私たちがブラウザで体験していることは、JavaScriptの処理によるもの。
・JavaScriptは最も人気なプログラミング言語であると言える。
#身近なJavaScript活用例
・適切な形式でメアドをフォームに入力したかの確認。
・ページロード時、テキストカーソルを検索ボックスに自動出現させる。
・Webサイトとサーバの情報送受信を行わずに即時タスク処理ができる(パスワードの認証など)。
#jQueryとは
・JavaScriptのライブラリであり、JSをより使いやすく拡張したもの。
・7割以上のWebサイトがjQueryを使用している!!
・短いコードでアニメーションや入力フォームといった動きを付けられる。
・どのブラウザであっても使用できる。
#ProgateのJavascript(ES6)編で新たに学んだこと
###知っとくと◯
・基本コード末尾に;
つける。
・定数(const)は変数(let)と異なり、値を更新できない。
しかし、コードが長くなった際、 予期せぬ値の更新を防止できる。
###Ⅰ
#####if文
if (条件式1){true時ここのコードを実行} else if(条件式2){条件式1がfalse時ここのコードを実行} else{条件式2がfalse時ここのコードを実行}
で条件分岐。
#####switch文
switch(条件の値) { case 値1: 条件の値と値1が等しい時の処理を記述 break; case 値2: 条件の値と値2が等しい時の処理を記述 break;
・・・
default: 上記どの値とも等しくなかった場合の処理を記述 break; }
#####比較演算子
・a===b
でaとbが等しいかを調べる。
・a!==b
でaとbが異なるかを調べる。
(ex)
const number=12; console.log(number===12);
コンソール「true」
#####その他
・console.log();で
()内の文字記述。
・//
でその行はコメント出力。
・let 変数名=値 ;
で変数を定義。上書き時はlet
は不要。
・const 定数名=値 ;
で定数を定義。
・${}
で定数や変数を文字列化。この時、文字列全体は「ㅤ`ㅤ
」で囲む。
・X && Y
で複数条件(XかつY)
・X || Y
で複数条件(XまたはY)
###Ⅱ
#####while文
while (条件式){ 条件式が続く間、ここのコードを実行 }
←;
は不要。
(ex)
while(number<=100){ console.log(number); number+=1; }
コンソール
「1 2 3・・・」
#####for文
for(変数の定義;条件式;変数の更新){ 条件式が続く間、ここのコードを実行 }
←;
は不要。
(ex)
for(let number=1 ;number<=100; number+=1{ console.log(number); }
コンソール
「1 2 3・・・」
#####その他
・+=1
=++
・-=1
=--
・オブジェクト内にオブジェクトを入れることができる。
呼び出しは「オブジェクト名.オブジェクト名.プロパティ」
(ex)
const cafe = { name: "カフェ", businessHours: { opening:"10:00(AM)", closing:"8:00(PM)", }, };
###Ⅲ
・const 定数名=function(){...};
で関数を作る。
・function()
は()=>
に省略化(アロー関数)。楽チン!
・定数名();
で関数を呼びだす。
・const 定数名=(引数名)=>{...};
で引数を受け取る。
・return
を関数内にかくと、その後の関数は実行されず、呼び出し元で値を受け取れる。
###Ⅳ
・class クラス名{...}
でクラス(設計図のようなもの)を設計。
・class クラス名 extends 継承するクラス{...}
で元のクラスを継承。
#####以下のコードはコンストラクタ内で使用する
・new クラス名();
でクラスからオブジェクトを生成。
・constructor(){...}
でインスタンス生成時の処理を追加。
・this.プロパディ=値;
でインスタンスにプロパディと値を追加。
・super()
で()内の親コンストラクタを呼びだす。
###Ⅴ
#####インポートとエクスポート
・export default クラス名;
でそのクラスを他のファイルで使える準備をする。
・import クラス名 from "./ファイル名";
で準備したファイルをインポート。
ディレクトリが異なる場合はimport クラス名 from "../ディレクトリ名/ファイル名";
この時ファイル名の最後にある.js
は省略可。
######上記の方法では1ファイルで1つしか定義できない。
######複数定義したい場合は、名前付きエクスポートを使用する。
・export {クラス名1,クラス名2,クラス名3...};
で名前付きエクスポート。
・import {クラス名1,クラス名2,クラス名3...} from "./ファイル名";
で名前付きインポート。
#####その他
import 定数名 from "パッケージ名;"
でパッケージを自分のプログラムで使用。
###Ⅵ
#####findメソッド
・コールバック関数の処理の条件式に合う最初の要素を取り出す。
(ex1)
const numbers = [1, 3, 5, 7, 9]; const foundNumber=numbers.find((number)=>{return number%3===0}); console.log(foundNumber);
コンソール
「3」
(ex2)
const characters = [ {id: 1, name: "にんじゃわんこ", age: 6}, {id: 2, name: "ベイビーわんこ", age: 2}, {id: 3, name: "ひつじ仙人", age: 100}, {id: 4, name: "とりずきん", age: 21} ]; const foundCharacter =characters.find((character)=>{return character.id===3}); console.log(foundCharacter);
コンソール
「{id: 3, name: "ひつじ仙人", age: 100}」
#####filterメソッド
・findメソッドとは異なり、条件式に合う要素を全て取り出す。
#####mapメソッド
・配列内全ての要素に処理を行う。
#####その他
・配列クラス.push(◯◯);
で配列の最後に新たな要素を追加。
・配列クラス.forEach((引数)=>{console.log(引数))};
で配列クラスの要素を1つずつ処理。
###Ⅶ
#####コールバック関数
・引数に渡される関数のこと
(ex)
const printWanko = () => { console.log("にんじゃわんこ"); }; const call = (callback) => { console.log("コールバック関数を呼び出します。"); callback(); }; call(printWanko);
コンソール
「コールバック関数を呼び出します。
にんじゃわんこ"」
#ProgateのjQuery編で新たに学んだこと
###基本のき
・全てを$(function(){.....});
で囲む。
・$('セレクタ').メソッド(引数);
で何をどうするか記述。
・メソッドが多い場合は、メソッド(引数).メソッド(引数).メソッド...;
と繋げられる。
(ex)
・$('セレクタ').イベント名(function(){...});
で、イベント発生時に処理する。
(ex)
$('#wrapper).hover(function(){...});
でマウスを乗せた時に反応。
###初級編
・<head>
の直後くらいに<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
を記述。
・htmlの</body>
の直前に<script src="script.js"></script>
を記述。
・ .class
と似たものに#id
が存在する。 ・
$('セレクタ').css('プロバティ名','値');でcssを変更。
'セレクタ'を
thisにすると、その要素だけ反応(全ての
pなどが反応してしまうのを防ぐ。)。 ・
$('p').html('こんばんは');といったように、HTMLも可。 #####メソッドを使用したアニメーション ・
fadeOut();で徐々に消える。(反対は
fadeIn();)
fadeOut(1500);で、1500ミリ秒(=1.5秒)、
fadeOut('slow')でゆっくり消える。 ・
slideUp();要素が下から上に消える。(反対は
slideDown();) ・
show();で消えた要素を表示。元の要素を
display:none;にしておく ###中級編 #####モーダル表示をするための3ステップ 1.cssで
オブジェクト{display:none;}入れる。 2.
'(#...).click(function(){...});'でクリックイベント作る。 3.イベント内で行う動作を記述。 #####その他 ・
$('.クラス名').addClass('追加するクラス名');で新たなクラスを追加(反対はremoveClass)。 ・
$('.クラス名').hasClass('判定する引数');で、オブジェクトが判定する要素を持っていればtrue、なけりゃfalse。 ###上級編 ・
animateでアニメーションを付けられる。 ・
$(◯).eq(△).反応させたい内容;でeqに指定した数字の引数のみ反応。 (ex)
$('li').eq(2).css('color','red');だと、3行目の「li」のみ赤文字になる。 ・
prevで1つ前の要素の要素を取得(反対はnext) ・
var html=$('#main').html();のように、html要素を取得できる(この場合はidの
mainを取得)。 ・
var fontSize=$('h1').css('font-size');のように、cssの要素を取得することもできる。 ######セットや取得の様々な例 ・
$('h1').attr('id','title'); =h1要素にtitleというidをセット ・
var url=$('a').attr('href'); =a要素のhref属性(https...)を取得。 ・
var name=$('#name).val();`
=htmlのinputに実際に書かれた文字が格納される。