Go to Qiita Advent Calendar 2024 Top
LoginSignup
1
1

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.

@kaw_app

チーム開発　3/20

Last updated at Posted at 2020-03-20

最終課題３日目
トップページ担当
#これはメモです

contentとは
contentはCSSで指定できるプロパティです。
要素の直前または直後に、文字列や画像などのコンテンツを挿入する際に使用します。contentプロパティを適用することができるのは、:before擬似要素および:after擬似要素のみです。
擬似要素とは、要素の一部にスタイルを適用するために、擬似的に設定される｢要素のようなもの｣のことです。
:before擬似要素および:after擬似要素は、要素の直前および直後に、文字列や画像などのコンテンツ（内容）を挿入するために擬似的に設定されます。
https://web-camp.io/magazine/archives/10930
参考サイト

link_toにh3などタグをネストして書く時は

=link_to "リンク"　do
 ="名前"
 =%h3

と記述

ブラウザを小さくしても
大きさを変えたくないブロックに使用
Margin部分は真ん中に設定

max-width: 700px;
margin: 0 auto;

ボックスに影を作る時使用
box-shadow
http://www.htmq.com/css3/box-shadow.shtml
参考サイト
https://ferret-plus.com/8961
↑ブロックの形によって変わるプロパティ

リンクする所をブロック全体にしたい
ブロックには

position: relative;

インライン要素（link_to）

display: block
height: 100%;

これでブロック全体がリンクできるようになる

商品の写真登録は最大４枚に設定

#復習
JavaScript

window.alert()

ブラウザでアラートを表示させるメソッドです。引数としてアラートに表示させる情報を渡します。

console.log()

ブラウザのコンソールにテキストを表示させるメソッドです。引数としてコンソールに表示させる情報を渡します。

letは、後で書き換えることができる変数宣言です。
constは、後で書き換えることができない変数宣言です。

if文
if (条件式1) {
  // 条件式1がtrueのときの処理
} else if (条件式2) {
  // 条件式1がfalseで条件式2がtrueのときの処理
} else {
  // 条件式1も条件式2もfalseのときの処理
}

配列

let list = ['Ruby', 'Ruby on Rails', 'JavaScript', 'HTML', 'CSS'];
  1. 配列の要素を取得する
console.log(list[2]);
=Ruby on Rails
  1. 配列の要素数を取得する
console.log(list.length);
=5
  1. 配列の要素を追加する
list.push('GitHub');

６番目にgithubが入る

  1. 配列の要素を削除する
list.pop();

index.htmlを開いているブラウザのコンソールを確認して、CSSという文字列が消えていれば成功です。
popメソッドは配列の最後の要素を取り除きます。Rubyの場合は
popメソッドの引数に数字を渡すことで「何個分要素を取り除くか」という数を指定できますが、
JavaScriptのpopメソッドではそれができません。

list.shift();

index.htmlを開いているブラウザのコンソールを確認して、Rubyという文字列が消えていれば成功です
。こちらもpopメソッド同様、Rubyでは取り除く要素数を指定できますが、JavaScriptではできません。

オブジェクト
オブジェクトを作成するには波カッコ{}を用います。
オブジェクトの定義1

let obj = {};

オブジェクトはデータを名前と値をセットで管理します。このセットをプロパティと言います。
プロパティを持った状態でオブジェクトを定義することもできます。

オブジェクトの定義2

let obj = { name: 'yamada' };

変数objはnameプロパティを持っています。プロパティは必ず属性名である"プロパティ名"とデータである"値"をセットで持ちます。
したがって、nameはプロパティ名、'yamada'は対応する値です。

 for文
for文を用いた、繰り返しの基本

for (let i = 0; i < 繰り返す回数; i = i + 1) {
  // 繰り返す処理の内容
}

例

num = 1;
for (let i = 0; i < 10; i += 1) {
  console.log(num + '回目の出力')
  num +=  1
}

関数を定義
Rubyでは def ~ end で囲むことで関数を定義しましたが、
JavaScriptで関数を定義するにはfunction文を使います。

function 関数名(引数) {
  // 処理の内容
}

return
Rubyでは関数における最後の戻り値が関数の戻り値として処理されましたが、
JavaScriptではreturnを用いて明示する必要があります。

function calc(num1,num2){
  num1*num2;
}

let num1 = 3;
let num2 = 4;
console.log(calc(num1,num2));
↓
function calc(num1,num2){
  return num1*num2;
}

let num1 = 3;
let num2 = 4;
console.log(calc(num1,num2));

無名関数を定義

// 関数宣言
function hello(){
  console.log('hello');
}

// 関数式（無名関数）
let hello = function(){
    console.log('hello');
}

関数式の方は、関数自体に名前が無いため無名関数と呼ばれます。
関数宣言と関数式では読み込まれるタイミングが異なります。

JavaScriptにおいては関数宣言は先に読み込まれる。
一方で、関数式であれば先に読み込まれることはありません。

DOM
DOMとはDocument Object Model(ドキュメントオブジェクトモデル)の略です。HTMLを解析し、
データを作成する仕組みです。
HTMLで書かれたファイルは結局ただの文字情報なので、そのまま表示しても意味がありません。HTMLを解析し、
CSSやJavascriptによる装飾を行ってから画面に映すという工程が必要なはずです。これを行っているのが、
Google ChromeやSafariといったブラウザです。ブラウザがHTMLやCSS、
JavaScriptを受け取ってユーザーに届けるまでには、以下のような手順を踏んでいます。

HTMLは階層構造になっていることが特徴です。
DOMによって解析されたHTMLは、階層構造のあるデータとなります。これを、DOMツリーやドキュメントツリーと呼びます。
DOMツリーはデータとして階層構造になっていることで、階層構造を扱うためのアルゴリズムを使い操作できます。

ノード
HTML1つ1つのタグが、DOMツリーの中ではノードと呼ばれます。

ノードの取得
JavaScriptを使ってHTML要素のid名やクラス名を指定することで、マッチするノードを取得できます
document.getElementById("id名");
documentは、開いているWebページのDOMツリーが入っているオブジェクトです。
documentに対していくつかのメソッドを利用することで、DOMツリーに含まれる要素を抽出して取得することができます。
.getElementById("id名")はDOMツリーから特定の要素を取得するためのメソッドの1つです。引数に渡したidを持つ要素を取得します。
document.getElementsByClassName("class名");
classを指定して取得する際はこちらを利用します。ここで気をつけたいのは、getElementsと複数形になっていることです。
id名はhtml上に必ず一つしか存在しないのに対して、class名を指定するgetElementsByClassName("class名")の場合は、
同じclassを持つ要素を全て取得することが可能です
document.querySelector("セレクタ名");
セレクタ名とは、CSSでスタイルを適用するために指定している要素です。
セレクタ名を指定してDOMを取得する場合、querySelectorメソッドを使用します。
HTML上から、引数で指定したセレクタに合致するもののうち一番最初に見つかった要素1つを取得します。

イベント
JavaScriptにおけるイベントとは、HTMLの要素に対して行われた処理要求のことをいいます。例えば「ユーザーがブラウザ上のボタンをクリックした」
「テキストフィールドでキー入力をした」「要素の上にマウスカーソルを乗せた」などがいずれもイベントです。
また、イベントを起こすのはユーザーだけでなく、「ドキュメントの読み込みが終わった」などブラウザが発生させるものもあります。

イベント駆動
JavaScriptはイベント駆動という概念に基づいて設計されています。
これは、「イベント」が発生したら、それをきっかけにコードが実行される仕組みです。
JavaScriptはもともとブラウザに搭載するための言語として開発されており、
ユーザーが行う様々な操作に対応できるイベント駆動の仕組みが適しているためです。
イベントを取得するためには、先に取得したノードに対して処理を書きます。
addEventListener
addEventListenerメソッドはノードオブジェクトのメソッドで、以下のようにして実行します

(ノードオブジェクト).addEventListener("イベント名", 関数);

上記のような記述により、この記述の読み込み以降で「ノードオブジェクト」に「イベント」が起きた時、「関数」を実行するようになります。一つのイベントと一つの関数を紐付ける仕組みのことをイベントリスナと呼びます。一つのイベントに複数の関数を紐付ける場合は、関数の数だけイベントリスナが存在します。
addEventListenerは、あるノードオブジェクトに対して、イベントリスナを追加するメソッドです。

ページを読み込まないとイベントが発生しない時があるので
（コードの上から読み込んでいくので）

ページの読み込みをするwindow.onload
「ページの読み込みが終わる」イベントは、windowオブジェクトのloadイベントに対応します。
そこで、windowオブジェクトのloadイベントに対応する関数として上記の一連の処理を定義すれば良いと考えられます。
なお、windowオブジェクトは、元から用意されている、ブラウザの情報を持つオブジェクトです。
記述は２つある

window.onload = function() { 処理 };

window.addEventListener('load', function() { 処理 });

コードを見直す

function func() {}
// 何もしないfunc関数
btn.addEventListener("click", func);
↓
btn.addEventListener("click", function func() {});

省略した書き方ができる

イベント発火の流れ
①DOMツリーからノードを取得する
②JavaScriptでやりたい処理を書く
③イベント発火でHTML側で動かす

1
1
1

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
Sign upLogin
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?