マガジンのカバー画像

JavaScript

30
JavaScriptの独学まとめ
運営しているクリエイター

#日記

即時関数とは

即時実行関数式のことで、定義すると即時に実行される。 またブロック内からのホイスト回避や、グローバルスコープ名の汚染回避などが可能となる!!!! ・・・ ・・・・・ あれ?俺ってプログラミング勉強してるんじゃないのか?汚染って… てなわけで、難しい用語を避けていても仕方ないので一つ一つ理解していこう。 まずはブロック。 これは{}のことだな 次にホイスト。 関数の最初に関数内ローカル変数が宣言されること。 ↑ローカル変数は宣言された関数内のみで利用される変数 つ

5/1

学習時間:5時間 (19時現在) JavaScriptでノートや単語帳づくりをしていたが、肝心のデータの管理や使用方法がわからず、「もしかしてJavaScriptは外見を作る物だから、データは扱えないの!?」と焦りはじめた。 そして他の言語を学ばなければとPythonに関して様々なことを調べた。 が、調べているうちに必要なのは新しい言語ではなく、JavaScriptのライブラリやデータベースに関しての知識だとわかった。 あまりうまくイメージができていないのだが、プログ

Math.floor と Math.random

Math.floorとMath.randomがごっちゃごちゃになっていた。 理由はドットインストールのビンゴカードを作るところでランダムを生成するために column[0] = source.splice(Math.floor(Math.random() * source.length), 1)[0]; こういうコードを使っていたため、Math.floor自体がランダムを作るために必要なんだと思っていた。 しかし、それは完全な誤解であった。 Math.floor:

テンプレートリテラル

JavaScriptで使うテンプレートリテラル。 ドットインストールではたいした説明もないまま、気づいたら普通に使われている言葉だが、全く意味がわからない。 まず言葉だ。 テンプレートリテラルと呪文のような言葉を頭に浮かべてみようとしたが、何もイメージできない。 なので、サイトなどで調べてみた。 まず、言葉で説明すると テンプレートリテラルとは文字列の中に変数を入れたり、改行したり、式を入れたりすることができる構文 らしい。 らしいと言われてもこれで納得できるわけもな

returnとは JavaScript

昨日の引数に引き続き、またもよく理解できていないreturnで躓く場面が発生。そのためサイトなどで調べたことを自分なりの解釈でまとめていく。 参考書などでは「戻り値」と書かれていて、関数を戻すという説明がほとんどだ。 何を言っているんだ… それで「あぁ、関数を戻すんだな!」ってなるほど自分は頭が良くない。 そのためサイトで例題を見ながら理解しようとした。 function hello(name) { return 'こんにちは' + name + 'くん'; }

引数

これがとてつもなく理解しにくかったので調べて自分なりに理解したものを書いておく。 function 関数名(引数){ //処理の内容} 関数名のあとに()に書かれるものが引数。 引数はなくても()は忘れてはならない。 functionはその分を書くだけでは処理を関数にしているだけで、実際に処理されない。 そこで参考書などでよく言われる、 『関数を呼び出しましょう!』が必要になる。 関数の処理を行うために実行するためのコードをかかなくてはならないということだ。

forの多重ループ

for文の中にfor文を入れることでループする。 for (i = 1,i <= 2,i ++) { for(j = 1,j <=3,j ++){ //処理の内容 } ”A”} ↑のコードではまず外のiからスタートなので、i=1になり、中の処理を行うのでj=1で処理、j=2で処理、j=3で処理をする。 そして外のi=2となり中が同じ処理を繰り返して終了。 もし中の処理が一通り終わるたびに(今回はj=3まで)、処理(例えば改行したい場合は<br

Web API

以前どこかの記事にも書いたが、APIは企業が持っているサービスを配布して一般でも使えるようにしたもの。 例えばTwitterやAmazonなど。 これらを使用することで、一からサービスを作らなくて済む。例えばログインサービスなどをTwitterのアカウントでログインできる。 おそらく、あまり調べてはいないが、提供する企業側も一般の人にログインのために自社のアカウントを作ったり、自社の存在を知ってもらうという広告みたいなものになるというメリットがあるのではないかと考える。

jQuery プラグイン

プラグインとは機能を拡張するためのプログラム。その中でもjQueryプラグインはjQueryを使用してアニメーションなどの機能を付けることができるようになるもの。 <textillate> 今日使用したのは「textillate.js」というもの。これを使用することでテキストにアニメーションをつけることができる。 ダウンロード後、必要なファイルを使用するフォルダ内に入れる。そしてHTMLの<link>タグにプラグインのCSSファイルを、<script>タグにjsファイル

イベント

・イベント処理…あるイベントが発生したときに実行する処理。例えばスクロールすれば背景画像が変わる、マウスをクリックすれば画面が変わるなど。 ・イベントリスナー…イベント処理を行う際に使用する関数 イベントターゲット要素.addEventListener("イベントタイプ", function() { 指定したイベントタイプが発生した際におこなわれる処理}); 上の構文の具体例として「OKボタンをクリックしたときにインストールを実行する」というコードを作成す

DOM(HTML)②

HTMLのタグをJavaScriptで追加する方法 appendChild()メソッドを使用する。 例えば<p>タグを追加したい場合、<body>の子要素に<h1><dl><p>を置くと考えると var element = document.createElement("p"); //タグ生成var text = document.createTextNode("hello"); //テキスト生成​document.body.appendChild(element)

DOM(CSS)

JavaScriptでCSSの変更を行う。 例えば<dd class="weather" style="color: #ff7c89;">晴れ</dd>というHTML上でCSSを記述したものがあるとする(この場合テキストがピンクになる) これをJavaScriptで記述するには var element = document.querySelector(".weather"); //クラス名の前には"."を忘れずにelement.style.color = "#ff7c

DOM(HTML)

DOM…documentオブジェクトのこと これを操作することで HTMLの変更や追加がJavaScriptで行える。 HTMLでidを指定したときはgetElementById()メソッド、class属性・セレクタで指定した要素はquerySelector()メソッドで要素取得する。 ※class属性はclass名の前に「.(ドット)」をつける。 DOMのツリー構造を考えると取得したい要素を指定できる。 <h1>JavaScript</h1><dl> <d

windowオブジェクト

オブジェクト…値や変数、関数をまとめて1つのグループにしたもの。 例: var student = {gender: "male", //←プロパティ2:値2age: 18,     //←プロパティ2:値2major: "arts"  //←プロパティ2:値2}; これでstudentオブジェクトに情報をまとめることができる。 「gender: "male"」をプロパティという。 それに対してオブジェクトに設定されている関数をメソッドという。 例: var