1
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Java Script あつめる

Last updated at Posted at 2020-03-29

#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に実際に書かれた文字が格納される。

1
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?