2016-07-01から1ヶ月間の記事一覧
関数の代入と匿名関数 関数は、数値や文字列のように変数に入れて扱うことができます この方法を使うと、条件に応じて異なる関数を変数に設定したり、関数を引数として別の関数に渡したりと、より柔軟に関数を利用できます 変数名 = 定義済みの関数名； 《関…
組み込み関数とは JavaScriptがすでに備えている関数 《組み込み関数一覧》 関数名 説明 parseInt 文字列型の数字列を数値型（整数）に変換する parseFloat 文字列型の数字列を数値型（実数）に変換する isNaN 指定された値がNaNであるかどうか調べる encode…
スコープとは 変数には、スコープ（有効範囲）が設定されています スコープは、その変数がスクリプト中のどこからどこまでの範囲で利用できるかを表します 《JavaScriptのスコープ》 種類 説明 対象 グローバルスコープ スクリプト全体で変数を参照できる ・…
関数（function）とは 一連の処理をひとまとめにして、名前をつけたものを「関数」と呼びます 手間のかかる処理を関数として定義しておけば、必要なときに何度も呼び出すことができます 関数は「function」キーワードで定義する 関数は処理の材料となる「引…
break文 for文やwhile文で、指定した回数だけ処理を繰り返す途中で「中断」する switch文でのbreak文は、ブロックの外へ抜けるための構文でした break文をwhile文やfor文のブロック内に記述することで、継続条件式がtrueであっても強制的にブロックの外へ抜…
Arrayオブジェクトのメソッド 配列は、Arrayオブジェクトのインスタンスです 配列をオブジェクトとして扱うと、あらかじめ用意された便利なメソッドを利用できます 要素を joinメソッドで連結 要素の増減にかかわらず、そのまま連結して表示します <html lang="ja"> <head> <meta charset="UTF-8"> <title>Array</title></meta></head></html>…
曜日を日本語で表示する 曜日の文字列は、「days配列」に格納しておきます <script> var days = new Array('日', '月' ,'火', '水', '木', '金', '土'); </script> Dateオブジェクトを作成 曜日は、getDayメソッドを利用する1 getDayメソッドの戻り値は「日曜日～土曜日」を「…
表示を切り替える <html lang="ja"> <head> <meta charset="UTF-8"> <title>方丈記</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="container"> <h1>方丈記 - 抜粋</h1> <div class="section first"> <h2 id="section1Title">【ゆく河の流れ】</h2> <p id="section1">ゆく河の流れは絶えずして、しかももとの水にあらず。淀みに浮ぶうた…</p></div></div></body></html>
演習課題 変数を入れてconsoleに表示 入力された値を取得して、ブラウザに表示 和暦（平成）と西暦の変換表 平成１年は、西暦1989年 <html lang="ja"> <head> <meta charset="utf-8"> <title>和暦・西暦の変換表</title> <style> table { width: 200px; margin: 50px auto; border: 1px solid #AAA; border-collapse: collapse;</meta></head></html>…
for文 指定した回数だけ処理を繰り返す 変数「i」の初期値（「i」は、indexの意） 処理を１回実行するたびに、変数「i」の値をどのように変更するか for ( 変数の初期値； 繰り返し条件； 変数の変更 ) { 実行される処理 } 変数の値を１ずつ増やす演算子 「+…
switchとは if文と同様に分岐処理を行います if文を簡略化してよりすっきり記述するための構文です ある変数の中身が一致するかという判断を行います switch（変数） { case 値1: 変数の中身が値1に一致した場合の処理 case 値2: 変数の中身が値2に一致した…
消費税計算のプログラム <html lang="ja"> <head> <meta charset="utf-8"> <title>消費税計算のプログラム</title> <script> function taxPrice() { //閲覧者の入力の値を取得 var price = prompt( '価格を半角数字で入力して下さい', '' ); //prompt()で習得した値は、文字列になります //文字列は、数値に変換しないと演算には</meta></head></html>…
スクリプトには３通りの進み方がある（実行する流れ） 順次 分岐 反復 if文 条件によって、ある処理を実行するかしないか選択して、処理の流れを分岐させたいときに使う構文 条件がtrueのときは処理を実行する 条件が成り立たないとき（falseのとき）は、処…
オブジェクトの階層構造 Webブラウザ上の主なオブジェクトには、windowオブジェクトを頂点とする階層構造があります windowオブジェクト 新規ウィンドウを開く windowオブジェクトのopenメソッドを使用します その戻り値は、生成されたwindowオブジェクトに…
式（expression） PHPの式の多くは、 演算子（operator）：演算するもの オペランド（operand）：演算の対象 を組み合わせてつくられています。 式の評価 式の計算が、式の評価にあたります 評価された結果を「式の値」と呼びます 演算子 簡単な計算をしたり…
変数（variable）とは 変化するもの（値が変化する器） 値を直接書かずに抽象化して扱う 変数はプログラム中のメモリ領域に付けた名前です さまざまな値を一時的に記憶しておくために使われます 言葉（文字列）や数字（数値）を一時的に保存する「箱」 繰り…
書き方のルール 基本的に「半角英数字と記号のみ」を使う 文字列を扱う場合は「シングルクォート」か「ダブルクォート」で囲む 大文字と小文字は区別される 命令文の末尾には「セミコロン」をつける 複数行にわたるまとまりの命令文は「{}波括弧」で囲む（囲…
プログラミング言語とは コンピューターへのお願いする言語 複雑なタスクを処理する「プログラム（アルゴリズム）」を考えるのは人間 JavaScriptとは クライアントサイドで動作するプログラミング言語 Javaとは別もの HTML&CSSを書き換えることができる イン…
レスポンシブWebデザインの基本 メディアクエリを設定 ブレイクポイント（767px 以下の場合） <html> <head> <meta charset="UTF-8"> <title>レスポンシブWebデザイン</title> <style> #container { width: 80%; height: auto; margin: 0 auto; } .box { text-align: center; line-height: 100px; } .wrapA { overflo</meta></head></html>…
HTMLの重要性 Webを勉強するときの基本要素 この中で最も重要なものは、「HTML」です HTMLがないとブラウザにWebページを表示できません HTML developer.mozilla.org HTML (HyperText Markup Language) は web ページのもっとも基本的な構成成分であり、Web …
ボックスの並び順の指定 floatの値によってコントロールすることができます float: left; <html> <head> <meta charset="UTF-8"> <title>float:left;</title> <style> #container { width: 50%; height: auto; } .box { height: 100px; text-align: center; line-height: 100px; } .wrapA>.box { width: 25%; float: </meta></head></html>…
ボックスを分割する 「%」指定をします 足して「100%」になるよう指定します <div id="container"> <div class="wrapA"> <div class="box box2">BOX2</div> <div class="box box3">BOX3</div> </div> </div> .wrapA>.box { background: #ECF7FD; border: 4px solid #689DD1; width: 50%; float:left; box-sizing: borde…
段組とは 「段組」とは、テキストや画像を複数の段落に分けてレイアウトすること 日本語の場合、横に文字を文字を組んだ場合、適切な文字数は「40文字」と言われています 「40文字」を超えると視線を意図的にずらさないと読み続けることができない基準の文字…
レスポンシブWebデザイン レスポンシブWebデザインとは、ブラウザーのウィンドウ幅に合わせてCSSでWebページのレイアウトを変更する手法のこと 技術的には Fluid Grid（フルードグリッド） Fluid Image（フルードイメージ） Media Queries（メディアクエリ）…
