入力文字数カウント作成（メモ）

jsファイル

---------------------

//1.テキストエリア入力があった場合

//2.テキストエリアの文字数を取得します

//3.文字数カウンターに表示させる

 

window.addEventListener('DOMContentLoaded'

function(){

 

//テキストエリアのDOMを取得

var node = document.getElementById('count-text');

node.addEventListener('keyup',function(){

 

//テキストの中身を取得し、その文字数（length）を数える

var count = this.value.length;

 

//HTML5から使えるquerySelectorを使ったDOMの取得パターン

//カウンターを表示する箇所のDOM（HTML）を取得する

var counterNode = document.querySelector('.show-count-text');

 

//innerTextを使うと取得したDOMの中身のテキストを書き換えられる

counterNode.innerText = count;

 

},false);

},false

);

 

---------------------

補足

var node = document.getElementById('count-text');

node.addEventListener('keyup',function(){

 

テキストエリアでキーを入力して、キーを離した時にイベントが発火

「Listener」⇨ 自身で

 

 

 

DOMとオブジェクト指向

javascript・jQuery

「DOM」

HTML要素の情報を書き換えたり、削除したり、操作するための仕組みのこと

 

・HTMLは、ブラウザ上ではツリー状になっている（DOMツリー）

＞上から順番に読み込まれて表示される

・DOMツリー（階層）により、お互いの関係がわかるようになる。（「親と子」「兄弟」）

 

・javascriptはDOMを元にHTML/CSSを操作している

＞そのため、DOMが出来上がる前に操作するとエラーになる

＞操作する要素の下に書く

 

javascriptは、オブジェクト（DOM）を操作する言語

＜オブジェクト＞

・現実世界の考え方をプログラムの仕組みに取りれたもの

・「プロパティ（変数）」「メソッド（関数）」を持っている

 

オブジェクト：対象（物体）

プロパティ：対象の情報

メソッド：処理内容

---------------------

 例：現実世界⇨プログラム（PC）世界

 

犬 ⇨ オブジェクト

 

犬の情報 ⇨ オブジェクトの情報

犬種：マルチーズ ⇨ プロパティ

毛色：クリーム ⇨ プロパティ

体重：4kg ⇨ プロパティ

 

犬のアクション ⇨ オブジェクトの処理内容

食べる ⇨ メソッド1

吠える ⇨ メソッド2

舐める ⇨ メソッド3

---------------------

 

javascriptは「オブジェクト指向言語」とも呼ばれる

オブジェクト指向という考え方を元にしてオブジェクトを操作する言語

 

＜オブジェクトの種類＞

⑴Document

⇨htmlの要素を書き換える

⑵window

⇨画面を操作する

⑶location

⇨パスを操作する

⑷String

⇨文字列を操作する

 

＜オブジェクト操作方法＞

⑴メソッドを操作

⇨オブジェクト名.メソッド名（引数値）;

⑵プロパティを操作

⇨オブジェクト名,プロパティ名=値; 

 

documentオブジェクト操作方法

⇨querySelector(セレクター)

---------------------

 

関数

javascript・jQuery

【関数】

複数の命令を一塊にしたもの

（毎回同じ処理を書く必要がなくなる）

---------------------

普通に書くと・・

$num = 100;

if( $num === 100 ){

 

$num = $num*1.08;

echo'変数$numは'.$num'です';

 

}elseif( $num === 200 ){

 

$num = $num*1.08;

echo'変数$numは'.$num'です';

 

}elseif( $num === 300 ){

 

$num = $num*1.08;

echo'変数$numは'$num'です';

}

---------------------

 

関数を使って書くと・・・

$num = 100;

if( $num  === 100 ){

 

echo total( $num ); ⇨複数の処理を1行でまとめられる

 

}elseif( $num === 200 ){

echo total( $num );

 

}elseif( $num === 300 ){

echo total( $num );

}

---------------------同じ処理を1つの塊にまとめる---------------------

 function total( $hiisuu ){

$result = $hikisuu = 1.08;

return '変数$numは'$result'です';

}

 

【関数の書き方】

function 関数名( 引数1,引数2,引数3 ){

//色々な処理を書く

return 値;  ※返したい値がある場合、「return」を使って値（変数）を返す

}

---------------------

 

色々な構文

javascript・jQuery

【構文】

⇨特定の条件によって処理を切り分ける文のこと

 

＜構文の種類＞

⑴条件分岐⇨条件に分けて処理を変える

⑵繰り返し文⇨ある条件の間は同じ処理を繰り返す

 

※全てのWEBサービスは「条件分岐」「繰り返し分」を複雑に合わせて作られている

 

⑴条件分岐

1.switch文

「もし・・の場合、〜をする。または××の場合、△△をする。または・・・」

switch(判定に使いたい値や変数){

case 値;

//実行したい命令

break;

case 値;

//実行したい命令

break;

}

（例）

switch( $num ){

case 1;

echo'1です' ;

break;

case2;

echo'2です';

break;

}

---------------------

 2.if文

「もし・・の場合、〜をする」

 if( $num == 3 ){

echo $num;

}

---------------------

 「もし・・の場合、〜をする。そうじゃない場合〇〇をする」

if( $num == 3 ){

echo $num;

}else{

echo '変数$numは3ではありません'

}

---------------------

 「もし・・の場合、〜をする。そうじゃなくて、もし△△の場合、◯◯をする」

if( $num == 3 ){

echo $num;

}elseif( $num == 5 ){

echo '変数$numは5です';

}

---------------------

 

⑵繰り返し文

1.while文

「〇〇の間、××をする。」

while(条件式){

//条件に合っていた場合に実行したい命令文

}

（例）

$i = 0;

while( $i < 1000 ){

echo $i;

$i++;

}

変数iが1000未満の場合、{ }の中の処理を繰り返す。

{ }⇨変数（$）iをを表示させる。そして変数iに+1をする

 

①変数iの0が表示され、++（インクリメント）で+1される。

②変数iが1000未満かどうか判定

③判定結果、条件内（1000未満）なので1に+1され＝2となる。

⇨0~999まで表示される。

---------------------

 

2.for文（while文よりコンパクト＋よく使う）

「◯◯の間、××をする。」

for( $i =1; $i < 1000; $i++){

echo $i;

}

⑴ $i = 1; ⇨変数$iを作り、1を代入（最初のみ1回だけ実行）

⑵ $i < 1000 ⇨ループ毎の最初の変数$iを比較する（この場合1000未満かどうか）

⑶$i++ ⇨ループ毎の一番最後に変数$iをインクリメント（繰り上げ）する。

---------------------

 

色々な演算子

javascript・jQuery

演算子の種類

⑴代入演算子

⇨右のものを左に入れる

----------------------

var num = 3;

var num = 'あいうえお';

 

var num = 変数の箱

※全角使用の時は「“”」で囲む

----------------------

 

⑵算術演算子

⇨変数を「足したり」「引いたり」「掛けたり」「割ったり」する

----------------------

 ＜足し算＞

var num1 = 3;

var num2 = 7;

var total = num1 + num2;

 

＜引き算＞

var num = 3;

var num = 7;

var total = num2 - num1;

 

＜掛け算＞

var num1 = 3;

var num2 = 7;

var total = num1 * num2;

 

＜割り算＞

var num1 = 3;

var num2 = 7;

var total = num1 / num2;

 

＜余り算＞（割った値の余りを計算）

var num1 =3;

var num2 = 7;

var total = num1 % num2;

 

＜インクリメント＞（変数の中身に＋１）

num++;

 

＜デクリメント＞（変数の中身にー１）

num--;

----------------------

 

⑶比較演算子

⇨（変数など）2つを比較して、条件によって実行する

----------------------

 ＜同じかどうか（==）＞

if( num == 3 ){実行したい命令}

 

＜違うかどうか（!=）＞

if( num ! 3 ){実行したい命令}

 

＜より少ない（<）＞

if( num < 3){実行したい命令}

 

＜より多い（>）＞

if( num > 3 ){実行したい命令}

 

＜より少ないか等しい（<=）＞

if( num <= 3 ){実行したい命令}

 

＜より多いか等しい（>=）＞

if( num >= 3 ){実行したい命令}

----------------------

 

⑷論理演算子

⇨比較対象を複数指定して実行する

----------------------

＜且つ（&&）＞

if( num == 3 && num2 == 8 ){実行したい命令}

⇨変数numが3の場合、且つ、変数num2が8の場合にこの処理を実行

 

＜または（ | | ）＞ 

if( num == 3 | | num2 == 8 ){実行したい命令}

 

＜違う（!）＞

if( !num  ){実行したい命令}

----------------------

 

javascriptの書き方

javascript・jQuery

javascriptとは？

・ブラウザの中で動くプログラミング言語

・HTML/CSSを“動的に”書き換えられる

 

htmlファイル

===============

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>ホームページのタイトル</title>

</head>

<body>

<h1>ホームページの見出し</h1>

<p>最初のホームページが完成しました！</p>

<script>

alert('これがjsです！');

</script>

</body>

</html>

===============

＜javascriptの書き方＞

・htmlファイル内の<script>タグ内に直接書く

・外部jsファイルに読み込ませる（書く量が多くなった時に使う）

 

＜javascriptの書ける場所＞

・headタグ内

・bodyタグ内

 

＜注意点＞

・指定するタグ要素の下に書く

⇨ （例）pタグより下

・全角は「’」や「“”」で囲まないとエラーになる（全角スペースにも注意）

・パス（ファイル）を指定する場合、HTMLファイルを基点にする。

ホームページ作成に関しての詳細

HTML・CSS

①HPの構成（HTML構造）

HTMLで構造組む⇨CSS作成

⑴ヘッダー

<header>

<nav~>　⇨メニューを作る

</nav>

<ul~>　⇨リストを作る

<li></li>

</ul>

</header>

 

⑵トップバナー （画像）

 

⑶セクション

<section> ⇨1つのまとまりを表す（HTML5から導入）

<h1></h1> ⇨タイトル

<p></p> ⇨段落ごとでpタグを囲む

</section>

 

⑷フッター

<footer>

Copyright<a href="~">サンプルHP</a>.All Rights Reserved.

</footer>

②問い合わせフォーム作成・CSS作成

・placeholder属性⇨フォームの中に文字を表示させる

・line-height⇨行間幅を指定

・width⇨横幅指定

・font-family⇨文字の種類を指定

（例）'フォント1','フォント2'(PCに入っていないフォントは表示されない)

 

ブラウアによって表示のされるCSSが変わる

・webkit⇨クロームやsafari

・moz⇨Firefox

 

③ナビ〜フッターまでのCSS作成

cssファイル

=====================

 /*ナビゲーション*/

#top-nav{

float: right;

width: 500px;

height: 200px;

position: relative; ※ここがボックスの基準

}

nav a{

padding: 10px 15px; ※10px（上下）15px（左右）

color: #444;

text-decoration: none; ※テキストの装飾を外す(aタグはデフォルトでは下線が付いている)

font-size: 14px;

font-weight: bold;

}

nav a:hover{

text-decoration: underline; ※カーソルが乗った時に下線を表示

}

#top-nav ul{

height: 40px;

width: 450px;

position: absolute; ※基準からボックス移動

bottom: 0;

right: 0;

list-style: none; ※リスト（・）を消す

}

#top-nav ul li{　※構造 id属性⇨topnav⇨ul⇨liスタイル

float: left; ※左寄せ横並び・本来liタグはブロック要素なので縦に並ぶが「float」指定することで横並びに変更となる

}

/*コンテンツ横幅*/

.site-width{ ※class属性がsite-widthのものに対してスタイル指定

width: 980px;

margin 0 auto: ;  ※ブロック要素を中央揃えにしたい時に“auto”を使用

}

section h1.title{

font-family: 'Montserrat',sans-serif;

text-align: center; ※フォントの配置（並び）指定

}

#about,#merit,#recruit{ ※複数の要素に同じスタイル指定したい時はカンマで区切る

margin-top: 80px; ※上の枠外余白

margin-bottom: 80px;※下の枠外余白

}

/*パネル*/　※class属性「パネル」のスタイル指定

.panel{

background: #f6f5f5; ※背景色指定

border: 1px solid #eee; ※1px(太さ) solid(種類) #eee(色)

border-radius: 3px; ※ボックスの角を◯◯px分丸くする

-webkit-border-radius: 3px;

-moz-border-radius: 3px;

margin: 0 15px;

padding: 15px; ※枠の余白を◯◯px分指定

width: 30%;  ※親の要素に対して各ボックスの横幅指定(ここでは親要素はid属性のMERIT,980pxに対しての30%)

float: left;

box-sizing: border-box;  ※横幅の中にborder幅やpadding幅を含めることができる。

（通常border幅やpadding幅はwidth heightで指定した幅には含まれない）

min-height: 380px; ※ボックスの最小の高さを指定

}

.panel h2{

dolor: #333;

text-align: center;

}

/*テーブル*/

table{

background: rgb(246,246,246);

border: 1px solid #eee;

width: 100%; ※親要素（980px）に対して横幅100%

※tableは中の文字数によってサイズが変わる

⇨横幅指定することで合わせられる

border-radius: 3px; ※“radius”⇨半径・枠の角を丸くする

-webkit-border-radius: 3px;

-moz-border-radius: 3px;

padding: 10px; ※ボックス内の余白を指定

margin: 10px 0;

text-align: left;

font-size: 14px;

}

th,td{

padding: 5px 0;

border-bottom: 1px dotted #ccc; （※dotted⇨点線）

}

table thead tr th{

color: #333;

padding-bottom: 15px;

}

table thead tr th color1{

color: rgb(230,140,31);

font-size: 18px;

}

table tbody th{

color: rgb(147,130,113);

}

#merit{

overflow: hidden;  ※パネルに対して指定されたfloatを解除

}

/*フッター*/

footer{

font-size: 12px;

margin-top: 30px; ※上の要素（上下80pxが適用されているので使わない）

padding: 15px;

background: #333;

text-align: center;

color: #f6f5f5;

}

footer a{

color: #f6f5f5;

}

=====================

④お問い合わせフォームのCSS

cssファイル

=====================

 /*フォーム*/

form{

width: 50%; ※親要素「.site-width: 980px;」に対して50%の横幅

margin: 0 auto　※ボックス中央揃え

font-size: 16px;  ※「input,textarea」で指定されているので決してOK

}

input,textarea{

font-size: 18px;

margin-bottom: 15px;

}

input[type="text"]{ ※input要素で且つtype属性名「text」にスタイル指定

width: 100%;

height: 60px;

border: none;

background: #f6f5f5;

padding: 10px;

box-sizing: border-box; ※枠線やpaddingをボックスの大きさに含める

}

textarea{ ※textarea要素に対してスタイル指定

width: 100%;

height: 400px;

border: none;

background: #f6f5f5;

padding: 10px;

box-sizing: border-box;

}

input[type="submit"]{

background: #333;

border: none;

padding: 15px 30px;

color: white;

float: right;

}

=====================