JavaScript関連

YouTubeをJavaScriptで制御できるIFrame Player API に悪戦苦闘

WordPressでWebサイトを作成していて、YouTubeを50人分ぐらい載せることになって、動画を操作したいということでIFrame Player APIを使えば良いようです。 IFrame Player API とは? IFrame Player API YouTube 動画プレーヤーをウェブサイトに埋め込み、Jav…

Node.jsをベースとしたビルドシステムヘルパー gulp.jsとは

Grunt.jsの後発として、gulp.jsというものが出ていたのをいまさらながら知りました。 どっちもNode.jsが必要 Node.jsをパソコンにインストールしておく必要があります。 Grunt.js ⇒ タスクランナー gulp.js ⇒ ビルドシステムヘルパー Grunt.js gulp.js ビル…

ChromeのデベロッパーツールでJavaScriptのプログラムをチェック

今回は、職場の先輩に教わったプログラミングをしていく上でのお役立ち情報を紹介したいと思います。 データの流れはどうなってるの? 自分のように、プログラミング初学者が真っ先に躓くのは、データの流れが把握できないことだと思います。 複数のファイル…

CSS Browser SelectorというjQueryプラグインでクロスブラウザの問題に対応

相も変わらずcssは cssはブラウザによって挙動が変わるので非常に難しいですね。 今回、問い合わせはこちらというような矢印を、cssで真ん中に配置しつつアニメーションさせてみたのですが、例のごとくブラウザごとに多種多様な挙動に! みんなちがって、み…

Webアプリケーションの脆弱性と対策

Webアプリケーションの脆弱性いろいろ スクリプト挿入攻撃(Script Insertion) クロスサイト スクリプティング(Cross Site Scripting / XXS) クロスサイト リクエスト フォージェリ(Cross Site Request Forgeries / CSRF) SQLインジェクション(SQL Inj…

Transformicons  ~Animated icons, symbols and buttons using SVG and CSS~ アニメーションするアイコンを生成

アイコンをクリックしたら、クリックされたアイコン自身がアニメーションするようなソースコードを自動生成してくれる『Transfomicons』。 ⇩ 下記サイトへ。 Transfomicons 『Builder』をクリックします。選択されると白くなります。 ページが変わってアイコ…

position:fixedの固定ナビとjQueryのスクロール

グローバルナビなどをcssのposition:fixedなどで固定した場合、ページ内リンクさせようとする際に、リンク先でのズレや、jQueryのanimateを使ってのページ内スクロールなどが、固定したナビの高さの分だけズレてしまうようです。 対処の仕方として、cssで調…

ブラウザの対応に関して 『Modernizr』という相互運用性対策に特化したJavaScriptライブラリ

Modernizrは、HTML5やCSS3などの新しいWebの標準がWebブラウザに実装されているか、汎用的なインタフェースを通じて確認することができるJavaScriptライブラリです。 『Modernizr』でできること。 html5shiv ⇒ HTML5で追加された新要素をブラウザが認識でき…

PHP PDOオブジェクトとJavaScriptのajaxで掲示板風アプリ

XAMPPの中のMySQLデータベースサーバ(phpMyAdmin)にデータベース名『rensyu0508』のデータベースを作り、テーブル名『hitokoto』のテーブルを作る。 テーブル『hitokoto』 dispの値が『0』の時はブラウザに表示されないようにし、『1』の時はブラウザに表…

JavaScriptの配列

<html lang="ja"><head><meta charset="utf-8"><title>配列・画像入れ替え(授業回答)</title></head> <body><h1>番号を入力すると画像が変わります。</h1><form name="form1">数字:<input type="text" placeholder="1~4までの値" name="num" size="30">表示:<input type="button" value="表示" onclick="showImg();"></form></body></html>

JavaScriptで数当て遊び

<html lang="ja"><head><meta charset="utf-8"><title>javascriptの勉強</title><script>var atari,kaisuu;function gameInit(){atari = Math.floor(Math.random()*1000)+1;kaisuu = 1;// alert(atari);} function gameHantei(){if(document.form1.num.value < atari)kekka = "もっと大きい数字です";if(document.form1.n…</meta></head></html>

2日目の授業にして五里霧中な自分に愕然とした、そんな1日

今日も朝から電車が素晴らしい混み具合でしたね。 例えて言うなら、乾燥機の圧縮袋に入れられた布団のような、 そんな状態でした。 今日はjavascriptで複利計算をプログラミング。 <html lang="ja"><head><title>複利計算プログラム</title><meta charset="utf-8"><script> /* ユーザー定義関数function kinri()の中に 引数1に g</meta></head></html>…

今日はシステムリンクの初授業

通学時間が1時間と倍の時間になりました。 東西線の朝の混雑は凄まじいの一言につきます。 サラリーマンの先輩方に頭が下がります。 初日の授業はJavaScriptでした。 JavaScript、プログラミング言語のこと JavaScriptはクライアントサイドで機能するプロミ…