Humans where it matters, technology where it scales. We help learners grow and partners turn learning outcomes into measurable business impact.
サイトの表示や動作を自己流にアレンジできる JavaScriptが使えるようになると、greasemonkeyも使えるようになると言われていますが、個人的にはDOMの概念について理解しておかないと使えないと言っても良いかもしれません。 JavaScriptには大きく分けると ナビゲータオブジェクト(ブラウザの判別やハンドラ等) ビルトインオブジェクト(newで始まる予め用意されたオブジェクト) DOM(Document Model Object いわばDHTML) 基本的にはこの3つです。 ではgreasemonkeyはDOMを理解していないとできないのか!?と言われればそうではありません。主にgreasemonkeyでやっている事は内容の書き換えですのでDOMを用いる場面が多いというのが結論となってきます。DOMを用いなくてもgreasemonkeyは製作出来ますが、基本的にナビゲーター
JavaScriptでは、初見の人にはさっぱりわからないけれども、ある程度慣れた人は当たり前に使うイディオムが結構たくさんあります。知ってしまえば何てことはないので、私の知っている限りのイディオムとその意味を解説します。 (7/3追記: twitter等で教えていただいた内容を追加しました) +v (数値化) var v = "123"; console.log(+v + 100) // 223 console.log(v + 100) // 123100 vを数値化する方法では最もメジャーです。parseFloat(v) に比べて高速なのに加えて、parseFloatとは細かい挙動が異なります(例えば空文字列の場合、parseFloatならば NaN になりますが、 +v の場合はゼロになります)。必ず数値になることが保証されており、文字列などで数値化出来ない場合はNaNが返ります。 v
この資料では、JavaScript でオブジェクト指向プログラミングを行う際に備えておくことが望ましい、基礎知識や概念について解説します。 【対象者】 ・JavaScript でアプリケーションを構築できる方 ・JavaScript におけるオブジェクト指向プログラミングの 実現手法や原理への理解を深めたい方 ・Java 的なクラスベースの言語との違いに違和感や混乱を 感じてらっしゃる方
ソーシャルボタンのJavaScriptでfunctionの前に「!」がついている理由を調べてみました。 1.はじめに TwitterやPocketなどのソーシャルボタンのコードをみると、共通してscript要素の中にあるfunctionの前に「!(エクスクラメーション)」がついています。 Twitterの場合 <a href="https://twitter.com/share" class="twitter-share-button" data-via="yujiro" data-lang="ja" data-size="large">ツイート</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getE
JavaScriptでCSSの擬似クラス(:link/:visited/:hover/:activeなど)を設定する方法を紹介します。 1.問題点 JavaScriptでCSSを設定する場合、例えばテキストリンクの色を設定するには、styleプロパティを利用して次のように記述します。 <a href="http://.../">foo</a> <script> var foo = document.getElementsByTagName('a'); foo[0].style.color = '#f00'; </script> ですが、styleプロパティには擬似クラスがなく(というか、そもそもプロパティではない)、 a:link a:visited a:hover a:active などの設定方法が不明です。 注:jQueryは使わない前提とします。 2.擬似クラスを設定する 調べるとい
前回はJavaScriptのプロトタイプチェーンについて、図解を用いることでなんとか理解できました。今回はスコープチェーンに挑戦してみます。前回と同じく「1. 図解を用いる」「2. 用語を明確に定義する」「3. Standard ECMA-262 3rd editionを情報ソースとする」というアプローチで紐解いて行きます。 用語の定義 ・本エントリの文章における表記は、以下の表の「ECMA-262 3rd」に統一する ・本エントリの図における表記は、以下の表の「本エントリの略称」に統一する ・本エントリ内におけるES3とは、Standard ECMA-262 3rd editionを指す ECMA-262 3rd 本エントリの略称 JavaScript(サイ本)第5版(日本語) Execution Contexts EC 実行コンテキスト Variable Object VO 変数定義の
JavaScriptの関数は「ファーストクラスオブジェクト(第一級オブジェクト)」である。なので、変数に代入したり、配列にセットしたり、他の関数に食わせたりできる。この変幻自在っぷりはすごい。newでコンストラクタになるところなんて変化の術のようだ。無名関数の即実行は影縫いの術みたいだし、callやapplyでthisの値を変えるとこなんて口寄せの術を彷彿とさせる。正に忍者 |--)ノシュッ==卍 変数に代入する var foo = function() {console.log('foo');}; foo(); 配列にセットする var fnList = [ function() {console.log('foo');}, function() {console.log('bar');}, function() {console.log('piyo');} ]; for(var i =
Everyone likes stuff that moves about on the Web, right? Remember how you cried joyful tears when you first used ? I do. I nearly sobbed all the water out of my body as I gazed upon “JAKE’S COOL WEBSITE” bobbing back and forth in uppercase serif. Of course, we’re more mature as an industry these days. We’ve learned that users don’t want websites to look like a CSI console having a personal crisis;
この記事が対応するCoffeeScriptのバージョンは1.7です。 基本的には本家サイトCoffeeScriptの内容と同じです。わかりやすいように色々と私が勝手に再構築、追加してはありますが。(日本語訳と紹介されるとちょっと心外ですな(´Д⊂ヽ ) なお、JavaScriptの基礎知識を前提とし、JavaScriptから引き継ぎ重複する内容は解説されません。 あ。後、この記事の文章、CoffeeScriptコード、JavaScriptコードに関する著作権は放棄しています。パブリックドメインと言うそうです。文章、コード自由に引用改変公開しても問題ありません。 最終更新日:2014/1/29 追加: 文字列 演算子など はじめに:CoffeeScriptのメリットとデメリット 一般に言われているCoffeeScriptを使うメリットデメリットを載せておきます。 ま、こんな論争気にせず、使っ
初心者向けの本とかだと、イベントを jQuery オブジェクトの後に直接指定する、 $('.foo').click(); のような書き方で説明されている場合が多いけど、少し複雑なことをしようとするとそれだと困ることが出てきます。そんなときに便利なのが on() を使ったイベント設定です。 on() ひとつで bind() live() delegate() を表せる jQuery 1.7 で、bind() live() delegate() がすべて on() に統合されたそうです。 つまり on() の書き方によって、3 パターンの使い方ができるということです。 .foo という要素をクリックしたら何かするという例で、イベントの設定と削除の方法をそれぞれ書いてみます。 bind() $('.foo').bind('click', function(){...}); は $('.foo')
こんな感じです。 >>JavaScript を使って作る追尾サンプル iPhoneアプリやAndoroidアプリをつくれるこの他にも、JSを覚えれば、iPhoneアプリやAndoroidアプリをつくる事もできるのです! >>初心者でも2週間でiPhoneアプリが作れちゃうTitanium Mobileがすごい件 「Titanium Mobileでアプリを試しにつくってみる」というのを担当していました。 JavaScriptはあまり使ったことがないですし、そもそもMacもほとんど触ったことがなかったので苦戦するかと思いましたが、2週間ほどでとりあえず形になるところまでできました。Titanium Mobileすごいです。 超おすすめ>>未経験からプログラマーとして上場企業に就職できたぼくが「内定をもらうための秘訣」と「大事なこと」を教えるよ 学習する上で参考になるサイトはこちらJavaScr
A Deep Dive into JavaScript Functions Based on my readership I have to assume most of you are familiar with JavaScript already. Therefore, it may seem odd to include a post on functions. After all, they are one of the most rudimentary components of JavaScript. My assertion is this, just as a person can speak a language without the ability to read or write it, so too can developers use functions in
今日話さないこと JavaScriptの基礎知識、jQueryの導入 気持ちいいUIやUXがうんちゃら CanvasやWebGLを使ったリッチでイケてるゲームの作り方
デザイナーと名が付く職種にはさまざまなものがありますが、この数年で劇的に市場のニーズが高まったのが「Webデザイナー」でしょう。 ネットワークの通信速度が一昔前に比べて格段に速くなり、スマートフォンが驚く速さで普及したことで、ユーザーがWebに接する時間は大幅に伸びました。その結果、魅力的なWebページを"創る"人材への需要がとみに高まっています。 魅力的なWebページを作るうえで最も必要とされるのは、ユーザにとって使いやすく、情報が得やすいデザインを考えられるスキルです。現在のWebデザイナーの中には、DTPなどの世界で経験を積んだ後に、HTML/CSSという慣れないコーディング技術をどうにか学んで転身した方が多く、紙媒体で伝える手法と、ブラウザで伝える手法の違いを思い知らされた方は少なくないのではないはずです。 そのような方々に対して、次なる障壁として立ちはだかるのがJavaScrip
デザイナーと名が付く職種にはさまざまなものがありますが、この数年で劇的に市場のニーズが高まったのが「Webデザイナー」でしょう。そのWebデザイナーに対して大きな障壁として立ちはだかるのがJavaScript。HTML/CSSのようなマークアップ言語とは異なり、プログラミング言語であるJavaScriptに関しては、どうしても敬遠してしまう方も多いはずです。
あ、どうも僕です。 今回は、プログラムって、なんか難しそうと思って敬遠してきた方や、これからはじめようという超初心者の方向けに、プログラミングの超初心者講座をしたいと思うよ! プログラミング見ただけで嗚咽しちゃう人とかいるよね!いた!ぼく!何だろう!職業病かな! とにかく今回は、プログラミングに触れたことない人や、挑戦したけど挫折した人向けに、JavaScriptを題材にして、超初心者講座をやってみようではないか! 開発環境をそろえよう まずは開発環境をそろえよう!プログラムって何があればかけるの? テキストエディタ ブラウザ これだけ! これだけあればプログラミングができるんだよ! テキストエディタは何でもいいよ! Windows標準のテキストエディタでも、Macのテキストエディタでも。 要は、テキストがかければ何でもOK! プログラムってとっても敷居が低いんだね! 最近だと昔はえげつな
タスク管理するのに手帳を使おうとして2週間で挫折したので、iPhone & Mac でできないか挑戦している tanaka です。 最近、諸事情により jQuery などのライブラリ を使わずに DOM を操作する JavaScript コードを書く機会がありました。ある程度はライブラリなしで書いたこともあるし、そんな大変じゃないだろう…と思っていたら、想定外に時間がかかってしまいました。(多くはレガシーなIE対応ですが…)そんなわけで、ライブラリを使わないで JavaScript を書いたときに遭遇した問題2つを紹介します。サンプルコードはQUnitでテストを書き、テスト実行+コードリーディングすることでIEとそれ以外のブラウザの違いが理解できるようにしました。 IE 7以下で setAttribute('class', [classNames])/getAttribute('class
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く