今日の内容 JavaScriptを勉強し始めくらいの人を対象にしたJavaScript入門講座的なもの 文法とかは調べればわかるのでふれません 一人で勉強してもわからなそうな概念などを重点的に説明します ライブコーディングするのでJavaScriptってこんな感じて作るんだなーというのがわかってもらえればと アジェンダ JavaScriptを勉強する前に JavaScriptの基礎知識 ライブコーディング part1 jQueryの基礎知識 ライブコーディング part2
今日の内容 JavaScriptを勉強し始めくらいの人を対象にしたJavaScript入門講座的なもの 文法とかは調べればわかるのでふれません 一人で勉強してもわからなそうな概念などを重点的に説明します ライブコーディングするのでJavaScriptってこんな感じて作るんだなーというのがわかってもらえればと アジェンダ JavaScriptを勉強する前に JavaScriptの基礎知識 ライブコーディング part1 jQueryの基礎知識 ライブコーディング part2
《2017年6月6日 3:00 PM 公開/更新》 テキスト入力欄の文字数をリアルタイム表示する方法 [入力フォーム] テキストエリアに入力された文字数をカウントして、JavaScriptでリアルタイムに画面上に表示する方法を解説。テキスト入力欄のvalueプロパティの中身を引数として受け取って、その文字数をカウントした結果を指定された要素に出力する関数を作ります。わりと簡単です。 テキストエリアに入力された文字数をカウントしてリアルタイムに表示する 文字数カウンタ付きテキストフォームを作るHTML+JavaScriptソース 複数の入力欄の文字数を個別にカウントしてリアルタイムに表示する 少し汎用的な文字数カウンタを作るJavaScriptソース 備考 テキストエリアに入力された文字数をカウントしてリアルタイムに表示する JavaScriptを使うと、テキストエリアなどの文字列入力フォー
自分用に外部リンクのFaviconを表示できるサービスを探す必要があったので、発見できたもので2009年11月現在でも使えるAPIサービス・JavaScript・プラグインを一通りピックアップ。通常のリンク先以外にも、コメントやトラックバック欄に表示したりと色々と使い道が多いはず。 Favicon Converter favicon (ファビコン) 画像変換サービス - Favicon Converter 日本のサービス。FaviconをPNGに変換した画像を呼び出すことができる。呼び出しURLの一部を変更することによって、「faviconを取得できなかったときのデフォルト画像」をファイルマーク、矢印、透明画像などから選べるのが特徴。 書式 http://favicon.qfor.info/f/[URL] [URL]部分に取得したいリンク先のURLを入れる。 例 http://favico
You are looking at a previous docs version. Live examples are disabled.
移転しました http://please-sleep.cou929.nu/20110721.html
RPG JSはHTML5/JavaScriptによるWebベースのゲーム開発用フレームワーク。 RPG JSはHTML5/JavaScript製のオープンソース・ソフトウェア。HTML5を使ったゲームフレームワークが続々と登場している。ある程度汎用的なものもあるが、やはりゲームジャンルに合わせたフレームワークを選ぶのが大事だろう。 デモゲーム RPG(ロールプレイングゲーム)は常に人気の高いゲームジャンルだ。Webブラウザ上でできるRPGを自作したいならば使うべきはRPG JSだろう。 RPG JSはHTML5/JavaScriptで作られている。矢印キーとスペースで動いたり話しかけたりする。サウンドにも対応する。そして剣を装備するとAキーで振ることができる。NPCも数多くいて、話しかけるとゴールドを貰えたりする。聖剣伝説のようなアクションRPGになっており、どんどん攻撃をしかけていけるよ
JavaScriptでログを表示するのに使えるライブラリ「Blackbird」のご紹介。 出力したいメッセージを指定するだけできれいに整形して表示してくれます。 例えば、以下のようなJavaScriptを実行してみます。 log.debug( 'this is a debug message' ); log.info( 'this is an info message' ); log.warn( 'this is a warning message' ); log.error( 'this is an error message' ); ↑すると、こんな感じで素敵に表示してくれちゃいます。 アイコンと色で視覚的にメッセージを区別することができるので、後から見分けるのも簡単です。 使い方 使い方は簡単で、ファイルをダウンロードした後、headタグ内でJSとCSSを読み込むだけでOKです。 <
Webブラウザとテキストエディタさえあれば、プログラミングして実行できるシンプルで手軽な言語――。それがJavaScriptが初めて登場してからしばらくの間、多くの人が抱いた印象でした。しかし、Ajaxの登場に伴う第2のブーム以降、ハードルが高くなったように感じられます。 その大きな理由の一つが、DOM(Document Object Model)に基づくJavaScriptプログラミングでしょう。DOMは、HTMLやXMLを構成する各要素に対して、プログラムからアクセスして内部の情報を取得・変更したり、機能を利用したりするためのAPI(Application Programming Interface)です。DOMを使うことによって、WebページをリロードせずにWebページを部分的に書き換えたり、HTMLドキュメントの構造を動的に変えたりといったことが可能になります。 DOMは便利な仕組
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い!情報の正確性は自己責任で判断してください。 現在位置を取得するときのの基準となる、ウィンドウ・サイズ、ドキュメント・サイズ、スクロール量を取得するJavascript。ブラウザ互換とかで割りと苦労しました。 スクロール量(横): スクロール量(縦): ウィンドウ・サイズ(横): ウィンドウ・サイズ(縦): ウィンドウの中央位置(横): ウィンドウの中央位置(縦): ドキュメント・サイズ(横): ドキュメント・サイズ(縦): 以下にソースを出します。 スクロール量を取得 function getScrollPosition() { var obj = new Object(); obj.x = document.
JavaScript 使いじゃないので,何が違うのかよく分かってなかったのでちょっと調べたメモ. そもそも window と document.body が別の世界の存在だと考えたほうがよさげ. window はブラウザのウインドウそのもので,JavaScript の処理系が生きてる限り存在する (たぶん). 一方,document.body は html から生成された DOM のオブジェクト. 以上 2 点からも,ページの遷移とかのブラウザの制御のようなことは window.onload に, ページ内に表示する何かは document.body.onload に,という使い分けがあるのだと思われます. body.onload と window.onload を同じように説明しちゃってるところはモグリ,ということで納得しました. 以下,参考になった情報源です. How
Google Maps API Premier Maps API ã®æ©è½ã«å ãããã¸ãã¹åãã®ãµãã¼ããæä¾ãããåºåã管çã§ãã¾ãã Google Maps JavaScript API V3 ãµã¼ã㹠注: ãã®ãã¼ã¸ã«è¨è¼ããã¦ãã Google Maps JavaScript API ãã¼ã¸ã§ã³ 3 ã¯ãæ£å¼ãª JavaScript API ã¨ãªãã¾ãããJavaScript API ãã¼ã¸ã§ã³ 2 ã¯ãGoogle ã®å»æ¢ããªã·ã¼ã«ããæ£
Javascriptで知っておくべき知識 > 等価演算子(==)と厳密等価演算子(===) 2007年01月26日 「等価演算子(==)」と意外と知られていない「厳密等価演算子(===)」についてのリファレンスです。 ”==”と”===”の共通仕様 2つとも基本的には比較して同じなら”true”、異なるなら”false”を返します。型によって比較方法が異なります。比較方法を以下に示します。 1.数値とブール値は”値”によって比較されます。 2.文字列の場合、文字数が同じでかつ同じ文字で構成されている場合に”true”を返します。 3.オブジェクト・配列・関数及びその変数は参照によって比較されます。つまり同じ参照の場合のみ”true”を返します。内部の値が同じでも参照が異なれば”false”を返します。 ”==”と”===”の異なる仕様 では実際にどこが異なるかというと、「型を自動変換するか
# 最初にちょっと余談を。Chromium-Extensions-JapanのほうにChrome6 Betaの変更点を書きました。どうぞよろしく。 さて、scriptタグ内をHTMLコメントで括ってからJavaScript書くのって意味あるの? - Togetterの件に関して、関連ネタをいくつか書いておきます。。 まず前提として、scriptタグの中に直にコードを書くというのはできる限り避けたほうが良いです。とはいえ、ちょっとしたコードをいちいち外部ファイルにしていると読み込みのコストも馬鹿にならないので、インラインで書く事もよくあります。なので、以下は主に数行程度のコードをインラインに書く場合の話です。 scriptタグの中に直にコードを書くときはscriptタグに非対応なブラウザのために<!--で始め*1 // -->で閉じるというノウハウは今でも結構使われているみたいです。 しかし
バックグラウンド 以下のプロパティの複合プロパティ backgroundColor, backgroundImage, backgroundRepeat, backgroundAttachment, backgroundPosition 指定されないプロパティは初期値でセットされる。 型:文字列 属性:background
Ajax風(?)なファイルのアップローダーは多々あります。その中でも、この「Uploadify」はかなり使いやすそうです。 画面遷移なしでファイルをアップロードできるのはもちろんのこと、アップロードの進行状況も見られたり、複数ファイルのアップロードにも対応していたりと、非常に良い感じです。また、アップロード完了後やファイルの選択後の振るまい、重複ファイルのチェックなど、色々とオプションの設定が出来るのも嬉しいです。 jQuery のプラグインということもあり、敷居も低い気がします。 まずは試してみる まずは、「uploadify - a multiple file upload plugin for jquery」からファイルをダウンロードします。 解凍したフォルダの中の「example」フォルダをサーバーにアップロードします。 これで準備完了ですので、exampleフォルダ内のindex
超初心者でも大丈夫 JavaScriptを使ってみよう HTMLにプラスする機能として、動きをつけるのが、JavaScriptです。現在のWebページ作成に欠かせないものになっています。Webサーフィンをしていると、背景に雪が降っていたり、時計が動いていたり、文字がいろいろ変化したりと、楽しいページを見かけます。また、画面上でクリックするとそれに反応してメッセージを表示したり、入力フォームで入力し、ボタンをクリックすると、それによって何らかの処理がなされるようなページもあります。それらの多くは、JavaScriptを使っています。ブラウザに拡張する機能を追加することなく、特別なソフトを使う必要もなく今まで通り、メモ帳でHTMLファイルの中に直接JavaScriptを記述するだけです。 JavaScriptを宣言すれば、ブラウザが<script>タグと認識し実行してくれます。 HTMLでペ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く