プログラミング情報を配信します!

Tag JavaScript

午後のJS(九九表作成)

午後のひととき、サクッとJSで遊びましょう。 for文の練習でよく出てくる九九表に今回は見出しが付いています。 html,css,jsを使ってコーディングしてみてください。 ○JS以外が書き込まれたところからやりたい人はこちら [解答例]

JSONP(郵便番号APIとの連携)

前回はproxyを設置してAjaxにて通信を行った。これはAjaxからでは直接外部ドメインにアクセスできないという制約のためだ。 zipcloudはjsonp(json with padding)にも対応しているので今回はそれを利用してみる […]

Ajax通信(郵便番号APIとの連携)

Ajax(Asynchronous JavaScript + XML)を利用して非同期通信を行ってみよう。 郵便番号APIに接続し郵便番号を入れると住所が自動入力されるようにする。 今回はzipcloudというサービスを利用させていただく。 […]

bootstrap4

cssを1から書いてもよいが汎用的に使えるスタイルをまとめてくれているcssフレームワークというものが存在する。 今回はそのcssフレームワークの代表格bootstrapを使ってみよう。なおbootstrapのバージョンは4.0を使う。 準 […]

Ajax通信

Ajax(Asynchronous JavaScript + XML)を利用して非同期通信を行ってみよう。 今回サーバーサイドはJavaを利用する。 ●エクリプス新規動的プロジェクトからajaxlessonを作成する。 ●新規サーブレットか […]

JSによるゲーム制作-(神経衰弱)

トランプ画像を使って神経衰弱を作ってみよう。 [準備編] 1.まずは以下をダウンロードし、デスクトップに展開する。 2.以下のようなフォルダ構成になっている。imagesフォルダにはトランプの画像が入っている。 3.index.htmlはc […]

JSによるゲーム制作-(PanelPazzle)

パネルをスライドさせてもとの配置に戻すゲームを作成してみよう。 [実行例] スタート画面 スタートボタンを押すとシャッフルされる。 15パズルの要領で移動させていく、動かせるパネルをクリックすると移動する。 完成するとComplete!の文 […]

Webサイト制作-(カラーシュミレータ)

JSを使ってカラーシミュレーターを作ってみよう。 [実行例] 上部に色とカラーコード、下部にrgb成分を設定するスライダーが表示されている。 スライダーを設定すると色とカラーコードが表示される。 [作例] ●index.html

Webサイト制作-(BMIアプリの作成)

JSを使ってBMI測定アプリを作成しよう。 [実行例] フォーム表示 身長と体重を入力して計測ボタンを押すと結果が表示される。 なおBMIは 体重kg/(身長m*身長m) で求められ 判定基準は以下とする。 18.5未満 低体重 18.5~ […]

Webサイト制作-12日目(実習)

今まで学んだことをいかして、下のようなサイトを作成してみよう。 以下の仕様を満たすこと。 ◯重なっているコビトカバの写真をクリックすると最前面に表示される。 ◯表の偶数行に色をつける。 ◯jQueryは不可 なお、コビトカバの画像は下からダ […]

jQuery(mouserover,mouseenterの違い)

似てて異なるmouseoverイベントとmouseenterイベントの違いを確認しよう。 準備 1.以下のファイルをダウンロードし、好きな場所に解凍する。 2.先ほどダウロードしたフォルダはjQueryを用いたWebサイト開発に最適な構成で […]

Webサイト制作-12日目(JS_プロトタイプ)

Javaは継承という仕組みを使ってオブジェクトを再利用するがJSはプロトタイプという仕組みを使う。ここではこのプロトタイプは一体なんぞやというところを見ていこう。 JavaScriptのプロトタイプからオブジェクト指向を学ぶ JSではすべて […]

Webサイト制作-11日目(createElement)

JSによって動的に要素を作成し追加できる。さっそくやってみよう。 [実行例] ボタンがある。 押すと要素が追加される。 押すたびに要素が追加されていく。 [作例] web11フォルダを作成しその中にlesson1.htmlを以下のように作成 […]

jQuery6(スティッキーの作成:応用)

前回、スティッキーの基本を学習したが、今回はそれの応用だ。画面に常駐させるのは便利である反面、画面を占有してしまうデメリットがある。画面の小さいノートパソコンで閲覧していると邪魔に感じることも少なくない。そこで常駐させる際にサイズを縮めてあ […]

jQuery5(スティッキーの作成:基本)

ナビゲーションの常時表示などに使われるスティッキーを作成してみよう。 準備 1.以下のファイルをダウンロードし、好きな場所に解凍する。 2.先ほどダウロードしたフォルダはjQueryを用いたWebサイト開発に最適な構成である。これを複製して […]

jQuery4(スライダーの作成)

おなじみのスライダーだ。実際は人が作ったプラグインを利用させてもらうことの方が多いが、自分で一度作っておくとプラグインを利用する際でも理解度が違う。一度は自分でつくってみよう。 準備 1.以下のファイルをダウンロードし、好きな場所に解凍する […]

jQuery3

準備 1.以下のファイルをダウンロードし、好きな場所に解凍する。 2.先ほどダウロードしたフォルダはjQueryを用いたWebサイト開発に最適な構成である。これを複製していくことによって新しいプロジェクトを作成する。Templateフォルダ […]

jQuery2

準備 1.以下のファイルをダウンロードし、好きな場所に解凍する。 2.先ほどダウロードしたフォルダはjQueryを用いたWebサイト開発に最適な構成である。これを複製していくことによって新しいプロジェクトを作成する。Templateフォルダ […]

jQuery1

jQueryとはJavaScriptライブラリの一つでこれを使うと、簡単に記述でき、ブラウザ間によるjs挙動の差異も埋めてくれる。 人気のピークはすぎた感があるがそれでも便利なことには変わりはない。早速使ってみよう。 準備 1.以下のファイ […]

Webサイト制作-10日目(JSON)

この講座でも汎用データフォーマットとしてCSVは何度か登場しているし、アンドロイド制作のレイアウトを作る際にはxmlを利用してきた。そして今回はJSONを扱う。JSONとは(JavaScript Object Notation)の略でJSの […]

© 2020 ジョイタスネット — Powered by WordPress

Theme by Anders NorenUp ↑