読者です 読者をやめる 読者になる 読者になる

Media Queries

メディアクエリー

レスポンシブWebデザインの実装

HTML5 マークアップはHTML5でおこなう IE8以前のバージョンは、対象外とします viewport それぞれのデバイス幅にあわせた表示を可能にする記述 <meta name="viewport" content="width=device-width, initial-scale=1.0"> width=device-width デバイスの表示領域の幅を指定します これを指定することで、デフォルトの状態で自動的に縮</meta>…

Responsive Web Design

Web閲覧環境の多様化 Android端末の多様化 スマートフォンで表示されるWebページはより柔軟性のある実装を求められる状況にあります モバイルファースト モバイルファーストの実践とは、モバイルインターネットの爆発的な成長にただ備えるだけではない。ユー…

CSS3セレクタ

CSSの記述方法のおさらい CSS(Cascading Style Sheets) CSSはHTMLと一緒に考える まずは構造化されたHTMLを作る 文法チェックをしてえr CSSの文法 CSSの挿入方法 クラスを複数指定する ***値をまとめて指定する 属性セレクタ(テキスト P.264)

CSS3の書き方の基本

基本要素を作る CSS3で角丸を設定する border-radius: 角丸の半径 ; ボックスシャドウ box-shadow: 右の方向 下方向 ぼかし具合 影の色 ; テキストシャドウ text-shadow: 右の方向 下方向 ぼかし具合 影の色 ; ボックスに回転を加える transform: 回転 (右回…

CSS3の基本

CSS3を使うメリット(テキスト P.258) classやidに頼らないセレクタ作りが可能になる CSS3だけで表現できるデザインの幅が広がる 簡単に柔軟な他段組を実現できるようになる CSSだけで「動き」をつけられるようになる CSS3は下位互換 CSS3は、CSS2.1を含み…

Progateで復習

Progate script.jsを記述 コンソールに表示 // 以下で、"Hello, World"とコンソールに表示してください console.log('Hello, World'); // 以下で、"Hello, JavaScript"とコンソールに表示してください console.log('Hello, JavaScript'); 計算しよう // 8に5…

jQueryに入る前にJavaScriptのおさらい(3)オブジェクトと関数

JavaScriptにおけるオブジェクトとは オブジェクトは、プロパティとメソッドで構成されます オブジェクトの状態や特性を表すのが「プロパティ」 オブジェクトの状プロパティとして格納されている関数が「メソッド」 new演算子 JavaScriptでブジェクとを生成…

jQueryに入る前にJavaScriptのおさらい(2)制御

制御 if文 switch文 while文/ do…while文 for文 for…in文 break / continue try…catch…finally

jQueryに入る前にJavaScriptのおさらい(1)変数と演算子

JavaScriptでおさえておくべきこと 記述ルール データ型 演算型 制御文 記述ルール(文法) 変数は「var」で宣言をする 文末には「;セミコロン」をつけます 単行のコメントアウトは「//」 複数行のコメントアウトは「/*……*/」 改行・半角スペースを見栄えと…

DOM-実践演習

DOMによる書き換え DOMツリーでは、トップレベル要素は「document」オブジェクトです documentオブジェクトから、button(エレメントノード)をid属性を指定して参照しています <html lang="ja"> <head> <meta charset="UTF-8"> <title>背景色を書き換える</title> <style> body { background-color: #CAE4FF; } button { curso</style></meta></head></html>…

変数を使った記述演習

プログラムを記述する必須項目 初期値を設定(入力された値または変数に格納された値) 処理(命令または演算) 出力(DOMの記述、consoleに表示) 閲覧者が使いやすく設定する 関数化 イベントを設定 入力された平成の数字を利用して西暦を求める 変数宣言 …

DOMでCSSを変更

Styleオブジェクト 要素の style 属性に相当するオブジェクトを返します Styleオブジェクトは、個々のスタイルステートメントを表します Styleオブジェクトは、文書またはそのスタイルが適用される要素からアクセスできます document.getElementById( 'id' )…

DOM based XSS

DOM based XSS XSS(Cross Site Scripting)脆弱性の中であまり注意を払われていないタイプにDOM Based XSSというものがあります 一般的にXSS脆弱性と聞いて思い浮かべるのは、攻撃者の悪意ある入力データ(JavaScriptなど)がサーバサイドでのエンコードや…

イベントハンドラの設定

HTMLとJavaScriptの分離 いままでの記述では、イベントハンドラはHTML内に記述していました 定義とイベントが発生する位置がばらばらでわかりにくくなっています Webページを作成する際は、HTMLとスクリプトは分けて記述することが推奨されています イベント…

DocumentオブジェクトによるHTML要素の操作

DOM操作のメソッド HTMLドキュメントの階層構造 DOMを使用すると、HTMLドキュメント内のすべての要素を「html」を頂点とする階層構造でアクセスできます この階層構造を「DOMツリー」と呼びます DOMツリー内の個々の要素を「ノード」と呼びます ノードを取得…

DOMとは

DOMとは DOM(Document Object Model)とは、HTML文書をオブジェクトとして読み込んで操作するための仕組み Documentオブジェクトが持つ要素の構造そのもの、あるいはそれらにアクセスしたり操作したりする機能のこと DOMは、ドキュメントをツリー構造で扱い…

配列の添字を活用する

曜日を日本語で表示する 曜日の文字列は、「days配列」に格納しておきます <script> var days = new Array('日', '月' ,'火', '水', '木', '金', '土'); </script> Dateオブジェクトを作成 曜日は、getDayメソッドを利用する1 getDayメソッドの戻り値は「日曜日~土曜日」を「…

配列はArrayオブジェクト

配列とは リストのこと いくつかの情報を番号と一緒に保管するためのもの 「配列」とは、添字(そえじ)と呼ばれる番号を用いて、1つの変数名で複数のデータをまとめて管理できるようにしたもの 配列 - マンガで分かる JavaScriptプログラミング講座 配列は…

random関数

乱数の発生 「random()」は、「0以上1未満の乱数を生成する」メソッド 「floor()」は、「小数点以下を切り捨てる」メソッド ランダムな「整数」を生成する rnd = Math.floor(Math.random() * MAX + 1); <html lang="ja"> <head> <meta charset="UTF-8"> <title>乱数の発生</title> </head> <body> <h1>乱数の発生</h1> <script> MAX = 10; var num; fo</body></html>…

Math関数を使った計算

Mathとは Mathとは「数学(Mathematics)」の意味 数値演算に便利なメソッドやプロパティが利用できるオブジェクト まえもってインスタンスを生成する必要はありません スタティックメソッド(インスタンスを生成しないで関数のように使用できる) Math . メ…

Dateオブジェクト - 状況に応じた処理

Dateオブジェクト JavaScriptに用意されている組み込みオブジェクト Dateコンストラクタを引数なしで実行すると、現在の日付時刻を管理する「Dateオブジェクト」が生成される JavaScript の日時は、UTC の 1970 年 1 月 1 日 0 時からのミリ秒としてで計られ…

組み込みオブジェクト

組み込みオブジェクトとは 関数と同じくオブジェクトの場合も、JavaScriptがあらかじめ用意しているオブジェクトがあります これを「組み込みオブジェクト」と呼びます 《主な組み込みオブジェクト一覧》 オブジェクト名 説明 Object すべてのオブジェクトの…

関数の応用

関数の代入と匿名関数 関数は、数値や文字列のように変数に入れて扱うことができます この方法を使うと、条件に応じて異なる関数を変数に設定したり、関数を引数として別の関数に渡したりと、より柔軟に関数を利用できます 変数名 = 定義済みの関数名; 《関…

組み込み関数

組み込み関数とは JavaScriptがすでに備えている関数 《組み込み関数一覧》 関数名 説明 parseInt 文字列型の数字列を数値型(整数)に変換する parseFloat 文字列型の数字列を数値型(実数)に変換する isNaN 指定された値がNaNであるかどうか調べる encode…

変数のスコープ

スコープとは 変数には、スコープ(有効範囲)が設定されています スコープは、その変数がスクリプト中のどこからどこまでの範囲で利用できるかを表します 《JavaScriptのスコープ》 種類 説明 対象 グローバルスコープ スクリプト全体で変数を参照できる ・…

処理をまとめて名前で呼び出す - 関数の定義

関数(function)とは 一連の処理をひとまとめにして、名前をつけたものを「関数」と呼びます 手間のかかる処理を関数として定義しておけば、必要なときに何度も呼び出すことができます 関数は「function」キーワードで定義する 関数は処理の材料となる「引…

for文 演習課題

演習課題 変数を入れてconsoleに表示 入力された値を取得して、ブラウザに表示 和暦(平成)と西暦の変換表 平成1年は、西暦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>…

繰り返しの制御

繰り返しの中のbreak文 switch文でのbreak文は、ブロックの外へ抜けるための構文でした break文をwhile文やfor文のブロック内に記述することで、継続条件式がtrueであっても強制的にブロックの外へ抜けることができます 《for文とbreak文》 <html lang="ja"> <head> <meta charset="utf-8"> <title>for文とbreak</title></meta></head></html>…

指定した回数だけ処理を繰り返す - for文

for文 指定した回数だけ処理を繰り返す 変数「i」の初期値(「i」は、indexの意) 処理を1回実行するたびに、変数「i」の値をどのように変更するか for ( 変数の初期値; 繰り返し条件; 変数の変更 ) { 実行される処理 } 変数の値を1ずつ増やす演算子 「+…

繰り返し - while文

while文とは 反復処理(繰り返し)を行います 同じ事を繰り返すことを「ループ」と呼びます while文は繰り返し回数が決まっていない場合に使われる場合が多い 変数の初期値; while ( 繰り返し条件; ) { 実行される処理 変数の変更 ; } 継続条件式には、if…

連想配列の基礎

連想配列とは 連想配列は、数値の代わりに意味のある文字列をインデックスとすることで、各要素を識別しやすくすることができます 連想配列の場合、インデックスのことを「キー」と呼びます 連想配列の宣言と初期化 連想配列の要素は、キーと値のセットで1…

配列の基礎

配列とは 配列とは、同じ用途で用いる複数の変数を1つにまとめたもの 配列は要素の集合体 配列は変数の集まりによって構成されます 個々の変数のことを「要素」と呼びます 各要素を識別するために「インデックス」と呼ばれる番号(0から始まる整数値)が割…

イベント発生元の特定 - thisキーワードの利用

thisキーワードの利用 1つの関数を複数のイベントから呼び出すとき、呼び出された関数内でどの部品から発生したイベントなのかを知りたい場合があります そのようなときには、thisキーワードを利用します イベントハンドラに関連づけた処理の中で、thisキー…

イベント駆動型モデルと関数

イベントとは 何かのきっかけで処理を行うことを「イベント」と呼びます イベントが発生したときに対応する処理を呼び出す仕組みを「イベント駆動型モデル」と呼びます それぞれのイベントと任意の処理をあらかじめ関連付けておくと、「イベントハンドラ」と…

条件分岐 - switch文

switchとは if文と同様に分岐処理を行います if文を簡略化してよりすっきり記述するための構文です ある変数の中身が一致するかという判断を行います switch(変数) { case 値1: 変数の中身が値1に一致した場合の処理 case 値2: 変数の中身が値2に一致した…

if文記述サンプル

消費税計算のプログラム <html lang="ja"> <head> <meta charset="utf-8"> <title>消費税計算のプログラム</title> <script> function taxPrice() { //閲覧者の入力の値を取得 var price = prompt( '価格を半角数字で入力して下さい', '' ); //prompt()で習得した値は、文字列になります //文字列は、数値に変換しないと演算には</meta></head></html>…

条件分岐 - if文

スクリプトには3通りの進み方がある(実行する流れ) 順次 分岐 反復 if文 条件によって、ある処理を実行するかしないか選択して、処理の流れを分岐させたいときに使う構文 条件がtrueのときは処理を実行する 条件が成り立たないとき(falseのとき)は、処…

ブラウザに文字を表示(出力)

オブジェクトの階層構造 Webブラウザ上の主なオブジェクトには、windowオブジェクトを頂点とする階層構造があります ブラウザに文字を表示(出力) 「Hello World!!」とブラウザに表示させる <html lang="ja"> <head> <meta charset="UTF-8"> <title>Hello!</title> </head> <body> <script> window.document.write( 'Hellow World!!' ); </script> <noscript> Ja</noscript></body></html>…

異なる型の連結と変換

異なる型の連結 文字列と数値を「+」で結合すると、数値は文字列に変換されます。 小数点以下の桁数を揃えるには? 数値をある桁数まで表示させるには toFixed を使います。割り算の結果などを有効桁数まで求めたい場合によく使われます。 例えば小数点以下…

文字列とは

文字列 JavaScriptで扱う「文字」のこと 文字列として扱うためには「クォーテーション」で囲む 文字列の連結 文字列と連結する数値は、文字列扱いとなります 文字列の長さを取得 lengthプロパティ 文字が入っていない場合 文字列の置換 replaceメソッド エン…

式と演算子

式(expression) PHPの式の多くは、 演算子(operator):演算するもの オペランド(operand):演算の対象 を組み合わせてつくられています。 式の評価 式の計算が、式の評価にあたります 評価された結果を「式の値」と呼びます 演算子 簡単な計算をしたり…

変数と定数

変数(variable)とは 変化するもの(値が変化する器器) 値を直接書かずに抽象化して扱う 変数はプログラム中のメモリ領域に付けた名前です さまざまな値を一時的に記憶しておくために使われます 言葉(文字列)や数字(数値)を一時的に保存する「箱」 繰…

JavaScriptをHTMLに書く

書き方のルール 基本的に「半角英数字と記号のみ」を使う 文字列を扱う場合は「シングルクォート」か「ダブルクォート」で囲む 大文字と小文字は区別される 命令文の末尾には「セミコロン」をつける 複数行にわたるまとまりの命令文は「{}波括弧」で囲む(囲…

JavaScriptとは

プログラミング言語とは コンピューターへのお願いする言語 複雑なタスクを処理する「プログラム(アルゴリズム)」を考えるのは人間 JavaScriptとは クライアントサイドで動作するプログラミング言語 「ジャバスクリプト」と読む 「Java」とは全く別ものな…

レスポンシブWebデザイン基礎 - 記事

記事の可変 テキストスペースの可変 画像の可変 <body> <div class="entry"> <img src="img/entry.jpg" alt=""> <h1>記事のタイトル</h1> <p>この文章は記事の本文です。この文章は記事の本文です。この文章は記事の本文です。この文章は記事の本文です。この文章は記事の本文です。この文章は記事の本文です。この文章は記事の本文</p></div></body>…

ヘッダーの基本レイアウト

ヘッダーの基本レイアウト 以下のヘッダーを作成しなさい header01 左揃え <div class="header"> <h1><a href="#">SAMPLE SITE</a></h1> <p>キャッチフレーズ</p> </div> header02 中央揃え header03 ロゴ画像(49 X 49px)とサイト名を並べて表示

ボタンを押したら実行する

イベント処理の基本 ボタンを押した時に「ムービーを停止する。」「何かのキーを押した時に文字列を表示させる。」など、何かのきっかけで決められた処理を行う事をイベント処理といいます ActionScript3.0ではイベントの処理方法が1つになりました ボタンを…

ムービーを止めたり、動かしたり

アニメーションを操作してみる アニメーションは、「時間が進むにつれ」絵が違うものに変わっていくことです 時間を進ませるには 手続き型プログラム(プログラムの実行時間が経過してアニメーションされるもの) イベント型プログラム(アニメーションして…

仕事をまとめる(function)

関数を作る ある計算や仕事(処理)をまとめておくときは、function(関数)を使います 関数を作るときには、仕事の名前となる「関数名」を決めて、かっこの中に行う仕事の手順をまとめて書いていきます function 関数名(): void { このステートメント(命令…