JavaScript 総復習

こんにちは、うさです。 本日は、前回終えたJavaScriptの総復習を行い、 今、自分がわからないことの確認をしました。 色々とわからない事があると感じたのですが、 一番はメソッドですね!! メソッドでの意味がわからないとどんな処理がされているのかわかりませんし、 自分でWebページの作成をする時も 何も出来なくなってしまいますね!! 後は、ひたすらサンプルコードを書いていると、 「”」を付けるのか否か、 引数は何だっけ等といったミスがよくありました。 その辺も一つ一つ確認しながら行いました。 それでは、今回使った参考書によく出てきたメソッドを紹介します。 まずは『prompt()』 変数 = prompt(メッセージ , デフォルト値) といった形で記載します。 これは、ダイアログボックスに「メッセージ」が表示され、ユーザがダイアログボックスのテキストボックスに書いた文字が「変数」に挿入されます。 それを使った例としてはダイアログボックス上での足し算です。 ダイアログボックスの表示は以下の通り スクリーンショット 2015-01-20 16.35.48 このサンプルはダイアログボックスに入力をさせたが、 基本的にはHTMLでテキストボックスに書いた文字や数字を処理していく方が多いと思われる。 とりあえずはどんなメソッドがどんな処理をするのかをしっかりと覚えていく。 今日はこの辺で失礼します。
blog 2015-01-19 16.09.39

基礎終了![JavaScript]

こんにちは!よしときです。 本日でJavaScriptの基礎が終了しまして!次から実際にいくつか簡単なゲームをまねして作ってみる。というところまできました!   今日やったことは
  • 矢印キーを押すと動くUFO <(ooo)> を作る
  • 押すたびに配列がランダムに入れ替わる機能
  • 2秒ごとに現在の時刻を表示するタイマー(?)
  • 押した矢印キーに向かってぱくぱくするパックマンを描く!
  • JavaScriptを使ってテキストを表示
  • JavaScriptを使って写真や図を表示
  • 四角をや線、丸を書いて表示、応用してサッカー場を描いてみる
  • 時計のような文字盤を作成(座標変換)
  • 図を変形
  • 総仕上げとして時計を作成!
と言った感じ。   ずっと書いてましたw   とにかくかいてかいて書きまくる!これが上達の秘訣と聞いたので!   ともかく。これで一通り基礎が終了らしいので、あとは色々作ってみるのみですね!   おつぎに今回迷ったところなど少しあげます。 まず!   Javaのときから相変わらずなのですが、変数、エレメント、イベント、メソッド、、、それぞれの名前が同じだったりすると後から出てきたときごっちゃごちゃになります。   検索してみたらどうやら人によって変えるみたいで、たまたま参考にしている本を書いている人が分かりにくく書いているそうです。   例をあげると keydownイベントで実行される関数名がkeydownだったり 変数 ufo に代入するUFOオブジェクトの引数がHTMLのufoエレメントだったり って感じです。 このソースです HTML 側は こんな感じ。   分かる人には分かるのでしょうが、、その他にもこういうのが沢山あって色々変えてみてその都度確認していく感じとなりました。   まぁそんなこんなで最後の仕上げがこちら blog 2015-01-19 16.09.39 こんな感じの時計をつくってフィニッシュ!   こうやって作ってくんですねーー、、やってみないと思いつかないですw   今日はこんなところで終了です!

HTMLのCanvasを使う

こんにちは、うさです。 今回はjQueryのプラグイン「jCanvas」を用いて スタンプ(画像)を押したり線を描いたりしました。 スタンプについて確認してみたいと思います。 コードは次の通りです!! ひとつひとつ何をやっているのか見ていきます!! まず、サーバ上のjQueryライブラリを読み込んで、 その後にjCanvasライブラリをHTMLファイルを同じとことから読み込みます。 次にHTMLを見てみます 「canvas」エレメントでキャンバスの範囲を決めて、 ラジオボタンでどのスタンプ(画像)を使うかを決めます。 チェックボックスでスタンプに影を付けるかどうかを選択できます。 続いて、jQueryを確認します。 まずは、ラジオボタンの選択によって画像が変わるように 『$(‘input:radio[name=”name属性”]’)』と記述をして 保存されているファイルから画像を「change()」で設定します。 次にクリックした位置に画像を描いていきます。 「click()」でクリックした時の処理を記述します。 「e.clientX」および「e.clientY」はWebブラウザの左上を基準としているので、 キャンバスの左上を基準にする処理を行います。 「drawImage()」でスタンプを描きます。 「source」でスタンプのパスを、「x,y」で座標を指定します。 また、チェックボックスによる影は 「shadowColor」と「shadowBlur」で色とぼかしの範囲を 「shadowX」および「shadowY」で影の位置を設定しています。 最後に「clearCanvas()」でキャンバス内を消しています。 ソースコードを見て何をやっているのかはわかるようになってきましたが、 自分で書くとなると難しいので、 どんどん練習していきます。 こちらがブラウザ上での表示で 左が影がないスタンプ、右が影を付けたスタンプです 名称未設定 このCanvasでこちらの参考書は一通り終わりました。 基本的な記述の仕方が載っており、解説も丁寧なのでとてもいい参考書だと思います。 何もわからないうちから勉強してもだいぶ力がつくと思います。 この次は「Android」を勉強していきます!!
blog 2015-01-15 11.48.14

表示系はうきうきしますね!:JavaScript,CSS,HTML

こんにちは!よしときです。 自分もようやくHTML,JavaScript,CSSの勉強に入ることが出来ました。 それぞれの元の知識としては毎度おなじみリカレント リナックスアカデミーのプログラミング入門として障りだけふれただけでした。 なので復習ってより再び学び直す感じになるかと思います!! 使用する本はこちら!   ババン! 3冊あった本を3人の同期でじゃんけんをして選んだのですが自分はラッキーなことに一番最新かつ面白そうなこいつを手に入れましたw   おおよそ300ページで構成されているので、それぞれの比重は非常に軽く簡潔にまとめられているのですが、これまでJavaをやってきているので簡潔でも理解することが出来ました。(関数とかは言語ごとにつど調べるのがいいね!)   いまのところ1/3くらいを終えたところなのですが、サクサク進んでいる割に新しいことが出来ている気がしてとても楽しいです。 なんでだろうと思ったんですが、答えは明白。もろに表示として現れるからですねw 実際に動く物を作りそれが見れるのは達成感があるものです。 そしてこんなことまで出来るのかーという感動もありますね!   いくつか作った物を載せます。 まずはCSSの練習としてブロックモデルを活用して絵を描くという荒技w blog 2015-01-15 11.48.14 ブロックを配置してバックグラウンドカラーを変更して書いただけなのですが、ポイントはborder-radiusというスタイルを使用してブロックの角を丸めたところでしょうか。 きっと小学生レベルなのでしょうが、少しふふっとなりましたw   次にやったのがJavaScriptの練習として入力された数字が数字かどうか確かめるということ blog 2015-01-15 12.20.07 ふむふむ。1は数字ですね。   さて!次はー   入力された数字が偶数か奇数か、というもの blog 2015-01-15 12.23.58 ふむふむ、偶数ですねー   さ!ら!に! 摂氏と華氏の変換を行おうというものを作りました。 blog 2015-01-15 13.57.35 計算自体はすごくシンプルなのですが、なんというか、このバーが!すげーアプリケーション作ってますみたいな感じで楽しいです!   これはソースも載せておきます。 こんな感じです シンプルですねー単純にこのinputタグのタイプの種類に驚いたってのが今回のダイジェストw   これ以外に矢印キーを入力するとそれぞれ押したキーに反応して文字が表示されるというものも作りました! 楽しいですねー色々応用できそうで!!   というところまでで今日は終了ですー楽しんで、頑張っていきます!
img

Ajaxとは??

こんにちは、うさです。 昨日はjQueryを勉強してJavaScriptを簡単に表せました。 (まだまだ、理解できてないですが) で、本日はjQueryのメソッドを用いてAjaxを使って勉強しました。 AjaxとはWebサーバにリクエストを送った後、レスポンスが返ってくるまでの間にも他の処理ができるようにするもので、 処理の複雑なWebアプリケーションを作る際は必要になってくるのかなと思います。 基本的な書式は 今回用いたのは「url」でファイルを読み込み、 「dataType」で形式(HTML,XML,JSON等)を設定し、 「success」でfunction(引数)として実行しました。 その中の一つの例として、 データ形式(dataType)「XML」で、 Webサーバ側に保存されているファイルから読み込みます。 このXMLファイルを表として読み込みます img 「XMLファイルの読み込み」を押すと表が表示されます。 「each()メソッド」で繰り返し処理を行い、 <id><realname><username>を「personエレメント」からthisとして指定し、 「appendTo()メソッド」によりテーブルとして追加しています。 僕自身もまだしっかりと理解してない部分もあるので、 一つ一つ関数の意味等を納得させていきたいと思います。
MySQLExcel

MySQL終了!!

こんにちは!お久しぶりです。よしときです。 年があけてしまいましたね。今年もよろしく御願いいたします。 久々の更新となりましたが、適度に勉強も行っておりました。 もっぱら大学の卒業研究が激化して進みが芳しくないのですが、、(言い訳) とうわけで今回でMySQLが終了したので報告いたします。 以前にリナックスアカデミーでpostgreSQLを勉強していたおかげか今回はスムーズに終了しました。 今回はちょっとした思いつきでSQL文をエクセルでまとめてみるということをしてみました。 私は忘れっぽいので、ふと「あービューの詳細表示ってどうやるんだっけ?」ということが起きてもすぐに見れる物をと思い作った次第です。 そしてその画像がこちら! MySQLExcel 結構長いので切れちゃいましたがこんな感じで色分けして分かりやすくしてます。 もう少し使いやすくしたいのでソート機能もつけようと画策しています。 使用した本は こちら! かなり分かりやすくおすすめです。 一通り理解できる上に、以前には余り触れられなかったダンプファイルのことや文字コードのことなどが勉強することが出来ました。 さらに、そこから使用法としてphpについても載っているのでこれからざっとphpのことを勉強したいと思います。 ブログ一覧を見ていただけると分かるかもしれませんが、私よしときは周りに比べ進み具合が遅れているのでサクサクと、しかし理解して進めていこうと思います! もっと細かくブログを書こうと思ったのですが、ちょっと間が空いてしまったのとペースをあげたのでざっくりになってしまいました。 次からは再び細かくブログを書いていこうと思います! さーーーがんばるぞーー

jQueryの学習

こんにちは、うさです。 本日はjQueryのライブラリを使って学習をしたので、 どんな機能があるのかをまとめてみます。 jQueryはどんなものかといいますと、JavaScriptで書くよりも簡潔に書く為のものでしょうか!! 例と致しまして、id属性が「myDiv」の<div>エレメントがあったとして、その内部に画像を配置しています。 このように書きますと、画像がx方向へ500px動きます。 一方、jQueryを使うと、 だけで済んでしまいます。 ということなので、jQueryをどれだけ使えるかで、効率が上がってくるので、どんなライブラリがあるかを把握し上手に使っていきたいと思います。 では、よく使うであろう『イベント処理』にはどんなものがあるのか!!
  • click()・・・クリック時
  • dbclick()・・・ダブルクリック時
  • mousedown()・・・マウスボタンが押されたとき
  • mouseup()・・・マウスボタンが離れたとき
  • mouseover()・・・要素の中にマウスカーソルが入ったとき
  • mouseout()・・・要素からマウスカーソルが出たとき
  • mousemove()・・・マウスが移動したとき
  • hover()・・・マウスカーソルが要素の内部に入ったとき
  • toggle()・・・クリック毎
  • one()・・・指定したイベント発生時に一度だけ実行
以上が『イベント処理』になります。 これから使っていくと思うので覚えておきたいですね!! こちらを参考に勉強しています。 この参考書はサンプルプログラムがついているので、 わからなくなったら、それを見て参考に出来るのでとても易しいと思います。  

JavaScriptの学習

こんにちは、うさです。 本日は、JavaScriptの学習を行いました。 リカレント・リナックスアカデミーで簡単に勉強しましたが、重要なのでHTML、CSS、JavaScriptと復習の意味を込めてやっています。 以前は難しく思っていましたが、Javaを一通り勉強したので考え方が似ているので、 理解しやすいといった感想です。 で、本日やっていてDateメソッドで日付を取得する際に迷ってしまったので、 ここでしっかりと抑えておきます。 まずは、”年”を取得しようと「getYear()」としたところ、 「115」といった値になってしまった。(2015年1月8日記載) これは1900を基準(0)に1800年だと「-100」、2000年だと「100」になるらしい。 なので、しっかりと”年”を取得するには「getFullYear()」にする必要がある。 次に”月”を取得しようと「getMonth()」をしたところ、 「0」になった。 これは1月〜12月⇒0〜11の値になるからだ。 そのため、「getMonth()+1」で正しい月になる。 最後に曜日は「getDay()」で 日曜が「0」〜土曜が「6」となるので覚えておく。 以上、簡単だがDateメソッドのおさらいでした。 因に、参考書はこちらを使いました。