第9回 実践DOMスクリプティング#2：DOMとHTML | gihyo.jp
こんにちは、太田です。前回はHTMLとテキスト操作を解説しました。今回は、さらにHTMLの操作の実例を中心に解説していきます。 JavaScriptとエスケープ まず、エスケープについて確認しておきましょう。外部から入力されたデータを画面上に表示する際はクロスサイトスクリプティングに注意する必要があることはもはや常識と言ってよいと思います。サーバーサイドのウェブ開発用フレームワークでは、ほとんどの場合HTMLのエスケープ用のメソッドが用意されていて、HTMLのエスケープは適切に行えるはずです。しかし、注意しなければいけないのは、HTMLのエスケープはJavaScriptにそのまま当てはめることはできないという点です。当たり前の話ですが、HTMLとJavaScriptではエスケープすべき文字が異なります。また、IEの6、7ではCSSにJavaScriptを埋めこむことができるのでCSSにも注
Dart for the Entire Web
For the latest Dart news, visit our new blog at https://medium.com/dartlang . We work with many teams, inside and outside of Google, that use Dart every day to build business-critical apps. Their feedback is consistent: they love working with the Dart language, libraries, and tools, and they compile Dart to JavaScript when they deploy to the web. However, they also tell us they need better integ
第21回 jQueryでAJAX入門：Google AJAX Feed APIを利用したRSSの読み込みとプラグインへの組み込み | gihyo.jp
Google AJAX Feed APIを使って取得したデータをjQueryを使ってページ内に表示させる 以上をふまえて、第18回で作成したサンプルデータを書き換えてみましょう。 $.ajax()で取得していた部分をfeed.load()に置き換えてその後の処理もGoogle AJAX Feed APIにあわせて書き換えています。 // Feed APIのロード google.load('feeds', '1'); jQuery(function($){ // ロードしたRSSを表示するブロック var rssBlock = $('#rss').append('<ul/>'); // Feedインスタンスの生成 var feed = new google.feeds.Feed('http://rss.rssad.jp/rss/gihyo/design/feed/rss2'); // Fee
「RxJS」初心者入門 - JavaScriptの非同期処理の常識を変えるライブラリ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、王です。 みなさん、「RxJS」をご存知でしょうか？ すごく大雑把に言うと、RxJSとは非同期処理（マウスクリックなどのイベントベースの処理も含める）をするときに超絶便利なライブラリです！ イメージしやすいように「便利」とは言いましたが、決して「便利」という言葉ではおさまらないくらいのインパクトがあると思います。ちょっとした「イノベーション」に近い感覚です。 今回は、RxJSを全く知らない初心者でもとっつきやすいように説明してみたいと思います。少し記事が長くなりますが、最後までお読みいただければ幸いです！ 目次 ReactiveXについて 非同期処理の問題点 RXと「Observerパターン」 ウォーミングアップ イベントを配列のように操る？ Stream（ストリーム） ストリームを操作する「オペレーター」 オペレーションチェーン ObserverとObservable Col
カスタムJavaScriptで自在に値を加工するタグマネージャの最終兵器（全20回の20） | 実践 Googleタグマネージャ入門
JavaScriptが書ければさまざまなことができるこれまでは、Webページの内容を「カスタムJavaScript」を利用して取得するのはおすすめできないと述べてきました。Webページの内容や構成が変わると、意図通りに動かなくなってしまう可能性があるからです。しかし、それ以外の用途なら、カスタムJavaScriptを有効に活用することもできます。特に、自身や周りの人がJavaScriptに詳しい場合は、自分でJavaScriptを書くことで、例えば簡単な計算や変数同士の値の結合など、さまざまなことが実現できるようになります。最後に、「カスタムJavaScript」について解説します。 ●JavaScriptで値を取得したくなる状況の例ルックアップテーブル変数では対応しきれない複雑な条件分岐クリックしたリンク先URLのうち、全文ではなく最後のディレクトリ名だけを抜き出したいWebページ内の特
Textures.js
SVG patterns for Data Visualization Textures are useful for the selective perception of different categories View on Github Getting started -- from the top of d3.js -- var svg = d3.select("#example") .append("svg"); var t = textures.lines() .thicker(); svg.call(t); svg.append("circle") .attr("r", radius) .style("fill", t.url()); Lines
フロントエンド「エンジニア」とは何か? - nobkzのブログ
フロントエンド「エンジニア」 僕は、良くフロントエンドのコミュニティに顔を出していて、フロントエンドの動向などの情報を交換を良くしているのだが、最近、というか昔から、同じフロントエンドエンジニアでも技術的関心事が全然違う事に気がつく。 同じ技術的な領域であるはずにも関わらず全然違う事を話しているのだ。なぜこのような事が起るのだろうか? 今回の記事はそのことについてだ。 なぜ彼らは「フロントエンドコミュニティ」に集まっているのか? なぜ、彼らはフロントエンドのコミュニティを形成しているのかを記述していきたい。 フロントエンドがなんなのか漠然としている アンカンファレンスなんか開いていたりすると毎回の如く「フロントエンドエンジニアとは何か?」という話題が出てくる。そういう話題が出てくるというのは、そもそも「フロントエンドエンジニア」がどういうものか曖昧であり共通認識が無いからだと考えている。
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
これからiPhoneアプリを作ってみたいけど、プログラミング知識のない方へ！ワンコインセミナーでその一歩を踏み出してみよう！
10分でわかるSVG 基礎編
知って得する、Webブラウザ上で利用できるグラフィック関連技術。HTMLのような感覚で図形が描画できる「SVG」をハックしよう SVGドキュメントの書き方 本連載では、Webブラウザ上で利用できるグラフィック技術を分かりやすく紹介しています。第2回となる今回のテーマはSVGです。 ご存じの方も多いと思いますが、SVGはXMLをベースにしたベクトルグラフィックスの記述言語です。PNGのような画像フォーマットの1つでもありますが、実際にはXMLを記述したテキストファイルであり、HTMLと同様にJavaScript（DOM API）による制御も行えます。HTMLがタグによって文書の構造を記述するのと同様に、SVGはタグで図形を記述します。 ■ XMLでベクトルグラフィックスを記述するSVG 実はSVGの規格自体はかなり以前から存在したのですが、長らくInternet Explorer（以降IE）
html5j.org
html5jについて html5jは、HTML5などのWebプラットフォーム技術を使った「ものづくり」に関わるすべての人々を応援する、非営利・中立のコミュニティです。私たちは、日本のWebクリエイター・エンジニアのスキル向上をお手伝いして、日本が世界のWebシーンをリードするような存在になることを心より願っています。 html5jの活動 html5jはWebクリエイター・エンジニアの皆さんに対し、「つながる」「学べる」「盛り上がる」を合言葉とし、以下の活動を行なっています。 html5jメーリングリスト Web開発に関する話題について質問したり、共有したりするためのメーリングリストです。また、勉強会の告知なども行なっています。 html5jメーリングリストに参加する （Googleグループに移動） 投稿ルール HTML5などの技術やWeb開発に関する話題であれば、どんな内容でも構いません。
レスポンシブでcssとjsのブレイクポイントがズレて困るときの対処 : 森のコーディング
2月10 レスポンシブでcssとjsのブレイクポイントがズレて困るときの対処 カテゴリ:javascriptiphone/ipadサイト Tweet レスポンシブデザインのサイトを作っていて、 ブレイクポイントの設定はcssのmedia-queryでやることが多いと思う。 でも動的な処理がからむ部分で変更があるときはjsでも切り替えを行う。 window.resize() とかで。 んで、今回、cssとjsで両方で同時に切り替わるようにしていたのだけれど、 どうやらwin端末だと切り替えのタイミングがズレることがわかった。 css → 768pxで切り替えたい → @media screen and (max-width: 768px) → ちゃんと768pxで切りかわる js → 768pxで切り替えたい → if($(window).innerWidth() < 768){ → 78
Babel · The compiler for writing next generation JavaScript
Babel is a JavaScript compiler.Use next generation JavaScript, today.
UIテストの自動化！Node.jsとSeleniumでWebアプリのUIテスト環境構築 – ICS MEDIA
ウェブアプリケーションを開発する際、みなさんはどのように動作確認（試験）を行っていますか？ ウェブアプリケーションは、ユーザーごとに異なるブラウザを使用しており、ユーザー操作も必要となるため、手作業でテストをされている方も多いと思います。また、機能改修やバグフィクス後に、リグレッションテスト（改修により既存機能への影響がないかを確認する回帰テスト）が必要となりますが、時間が取れず試験ができていない方も多いのではないでしょうか。 本記事では、これらのテストを自動化することのできる「Selenium Webdriver」（セレニウム・ウェブドライバー）について紹介します。 入力フォームのバリデーション機能をチェックするデモ 簡単な入力フォームのバリデーション機能をチェックするデモを動画で紹介しましょう。入力値に対して期待するエラー文言が表示されているかのテストを実施しています。Selenium
jQueryはNGと言われた時の便利なメソッド - Qiita
とあるお仕事で、jQueryなどのライブラリー利用不可というものがありました。その際利用した、jQuery的に使える便利なメソッドをメモしておきます。（※ 昔使っていたものを引っ張りだして改善したものなので、どこかで公開されている可能性があります） 更新 addClass,removeClassを修正致しました。 元記事 下記エントリの転載になります。 jQueryがNGな時に備えて、用意しておきたい便利なメソッド イベントリスナ jQueryでいうところの、.on() に該当するものです。 "addEventListener" か "attachEvent" かを判定し、addEventメソッドを定義しています。 var addEvent; if (window.addEventListener) { addEvent = function (target, name, fn) { if
Chromeブラウザ、「Script streaming」と「Code caching」の2つのテクニックで、さらにWebページ読み込み時間を短縮へ
Chromeブラウザ、「Script streaming」と「Code caching」の2つのテクニックで、さらにWebページ読み込み時間を短縮へ Chromium Blogで、「New JavaScript techniques for rapid page loads」（迅速なページロードのための新たなJavaScriptテクニック）というポストが投稿され、Webページのロードをさらに高速化する「Script streaming」と「Code caching」という2つのテクニックが紹介されています。 この2つのテクニックは、最新バージョンとなる41と次のバージョンの42でそれぞれ導入されるとのことです。 別スレッドでのパースにより高速化 「Script streaming」は、async/defer属性が付いたJavaScriptについてはダウンロードと並行して別スレッドでパースを
SkyWay ― WebRTCを簡単＆柔軟に使えるプラットフォーム
WebRTCは、ブラウザや専用アプリ同士でリアルタイムに映像、音声、データを送受信できる画期的な新技術です。SkyWayを使えば、サーバを準備することなく簡単に、WebRTCを使ったアプリが開発できます。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - caolan/async: Async utilities for node and the browser
GitHub - Reactive-Extensions/RxJS: The Reactive Extensions for JavaScript
[JS]SVGのアイデアが広がる！かわいいパターンのテクスチャがSVGで作成できるスクリプト -Textures.js![[JS]SVGのアイデアが広がる！かわいいパターンのテクスチャがSVGで作成できるスクリプト -Textures.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/22479d89713c68e7c04be9754415c079ec9f7950/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015032308.png)
フロントエンドを楽にするために
