HTML・CSS不要！JavaScriptだけでWebアプリの開発を実現するオンラインエディタ「MagiXJS」の使い方を解説 - paiza times
どうも、まさとらん（@0310lan）です。 今回は、簡単なコードでインタラクティブなWebアプリやゲームなどを作れる「オンラインコードエディタ」のご紹介です！ HTMLやCSSを書く必要がなく、さらにJavaScriptを簡単・安全にプログラミングできる「CoffeeScript」で記述できる完全無料のツールです。 【 MagiXJS 】 簡単に扱えるように設計されているので、Web開発を勉強している初心者の方や、初めてWebアプリを作ろうと考えている人にもオススメですよ！ ■「MagiXJS」とは？ まずは、「MagiXJS」の基本的な使い方も含めて、どのようなサービスなのかを見ていきましょう！ サイトにアクセスして、そのまま下方向へスクロールするか、画面上のアイコンをクリックします。 すると、Webアプリを開発できる専用の「コードエディタ」が表示されます！ 左画面でプログラミングを行
JSON | JavaScript プログラミング解説
JSON文字列とJavaScriptオブジェクトの相互変換 JSONオブジェクトがサポートされるならば、そのメソッドによりJSON文字列とJavaScriptオブジェクトを簡単に変換できます。それがサポートされるかどうかは、簡単にはWindowオブジェクトにJSONプロパティが存在するかどうかで判別できます。 if( window.JSON ) { // JSONがサポートされる } ちなみにPrototype.jsでは、 var NATIVE_JSON_PARSE_SUPPORT = window.JSON && typeof JSON.parse === 'function' && JSON.parse('{"test": true}').test; のように判別しています。 JSON文字列 → JavaScriptオブジェクト JSON.parseがサポートされるならば、それでJSO
JavaScript と iframe で注意点 - sugilogのブログ
メインのHTML（親frame）の中に子のiframeをつくるとき、その2つのframeの操作について ぶっちゃけ、そんな都合のいい話はない、というお話。 SameOriginPolicy (同一ドメインポリシー） 操作しようとする2つのwindowやframeのoriginが違う時のポリシー。 originは、プロトコルxホストxポート の組合せ。 http://sugilog.hatenablog.com/ と、 http://sugilogtest.hatenablog.com/ はoriginが異なる。 http://sugilog.hatenablog.com/ と、 http://hatenablog.com/ はoriginが異なる。 http://sugilog.hatenablog.com/ と、 https://hatenablog.com/ はoriginが異なる。
十四章第二回 Indexed Database — JavaScript初級者から中級者になろう — uhyohyo.net
十四章第二回 Indexed Databaseこのページの最終更新日：2019年7月1日 今回紹介するIndexed Database、通称IndexedDBは、前回のStorageが進化したようなもので、ある種のデータベースをJavaScriptから作ってブラウザに保存しておいてもらえるものです。localStorageと比べると、文字列だけでなくオブジェクト等を保存できる点や検索機能がある点でより強力です。 昔はSQLを用いたクライアントサイドデータベース（WebSQL）の仕様策定が進んでいましたが、のちに破棄され、SQLを使わない方向の新しいデータベースAPIとしてIndexedDBが用意されたのです。 IndexedDBにはバージョン1と2がありますが、ここではバージョン1の範囲で説明します。 データベースの構造データベースは、localStorageと同様に同じオリジンでは共有さ
データの受け渡しができるサブウインドウ(モーダルダイアログ)を開く方法 - JavaScript TIPSふぁくとりー
《2017年6月16日 12:00 PM 公開/更新》 データの受け渡しができるサブウインドウ(モーダルダイアログ)を開く方法 [機能] サブウインドウ側で何らかの補助的な処理をする場合、親ウインドウから子ウインドウへデータを送り、子ウインドウから親ウインドウへデータを戻す……という処理が必要です。JavaScriptのshowModalDialogメソッドを使って開いたサブウインドウ(モーダルダイアログ)なら、データのやりとりは簡単です。(※既に廃止された仕様なので、今後は使えないブラウザが増す点に注意) ※非推奨:廃止済み 閉じるまで他の操作をできなくするウインドウ(モーダルダイアログ)を開く データの受け渡しをするサブウインドウの例 サブウインドウとの間でデータの受け渡しをする方法 サブウインドウとの間でデータの受け渡しをするサンプル 親(呼び出し元)ウインドウ側のHTMLソース 親
バニラJavaScriptを選択する
jQueryを用いて書いたコードと同等な働きをするコードをjQuery抜きで書くとどのようになるのかを示したWebサイト「You Might Not Need jQuery」（jQueryは必要ないかも）が先日話題になりました（はてなブックマークも180以上付いています）。 ちょうどこのWebサイトを話題にした記事「Choosing Vanilla JavaScript」が、Webデザイナ向けに情報発信をしている著名なWebサイト、A List Apartに掲載されていました。 Vanilla JavaScriptとは、要するに何もトッピングされていないバニラアイスクリームのように、jQueryなどのライブラリを使わない素のJavaScriptのことを示しています。 この記事は何でもjQueryを使うのではなく、正しい選択をしようというテーマの内容になっており、参考になりそうだったので翻訳
[JS]Webサイトの使いやすさ・かっこよさを向上させる、チェックしておきたいスクリプトのまとめ
コンテンツの邪魔にならず操作も快適な画像拡大、スクロールすると一旦ヘッダが隠れるけど上にスクロールすると出現、サーチアイコンをクリックするとにょい～ん伸びて検索ボックスになるなど、ユーザビリティ・アクセシビリティに配慮され、タッチデバイスやレスポンシブ対応にも一役買う優れもののスクリプトを紹介します。
![[JS]Webサイトの使いやすさ・かっこよさを向上させる、チェックしておきたいスクリプトのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/0bc338c3b019bd35cf84848dd648330728cc081c/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015082406.png)
File system APIでブラウザーで動くファイラーを作る (1/3)
Webブラウザー内に独自のファイルやディレクトリを保存できる「File system API」の使い方ついて、前回の記事に続き解説します。ファイルの作成／削除やディレクトリの作成／削除方法については前回紹介しましたので、今回は一覧の取得やファイルへの書き込み／読み込み方法を学び、簡易ファイラーを完成させましょう。 ディレクトリ内のファイル／ディレクトリ一覧を取得する ディレクトリ内のファイル／ディレクトリ一覧を取得します。 ファイル／ディレクトリ一覧を取得するには、ディレクトリエントリーオブジェクトのcreateReader()メソッドを使ってディレクトリリーダーオブジェクトを生成します。 readEntries()メソッドは、第1引数に指定した関数に、ファイル／ディレクトリの一覧情報を渡します。関数にはファイルエントリーオブジェクト／ディレクトリエントリーオブジェクトを格納した配列が渡さ
JavaScriptを中心としたWebアプリ開発の栄枯盛衰まとめ――LiveScriptからAngularJS／React.jsまで
JavaScriptを中心としたWebアプリ開発の栄枯盛衰まとめ――LiveScriptからAngularJS／React.jsまで：15周年記念特別企画 ＠ITが誕生した2000年頃はJavaScriptが不遇だった時代。そこから現在のような人気のプログラミング言語になるまでには、どのような歴史があったのか。15周年を迎えた＠ITの豊富なWeb開発関連記事とともに振り返る。 2015年6月17日に、JavaScriptの最新標準仕様となる、ECMAScript 6（ES6、ECMAScript 2015）が正式に承認されました（参考）。1997年にECMAScriptのバージョン1がリリースされてから6度目のアップデートとなり、これまでの中で一番大きな変更が加えられたことになります。 本稿では、ECMAScript 6が正式に承認されたということもあり、2000年頃の第一次ブラウザー戦争
優秀なJavaScriptの開発者になるための5か条 | POSTD
(注記：7/15、いただいた翻訳フィードバックを元に記事を修正いたしました。) 子供の頃、私の興味は互いに関係性のない様々な分野に及んでいました。数学も歴史も大好きでした。 ルネッサンスマン 、つまり 博学者 と言う、複数の分野に秀でた人になりたいと思っていました。これはとても難しい課題で、私は突如として、器用貧乏な人になってしまう危機に直面したのです。 私は特定の分野に特化しなくては、と考え始めました。そうすればたとえルネッサンスマンにはなれなくても、少なくとも、器用貧乏にならなくても済むと思ったのです。どうしたらソフトウェア開発をするのに必要な広い知識を保ちながら、1つの分野で専門性を高めることができるのでしょうか。 この記事では、過去5年間、私が良いJavaScript開発者になるために使ったテクニックとリソースの概要をお伝えしようと思います。 最近の多くのWeb開発者は、ある共通の
Viz.js·Web上でGraphvizをSVGでレンダリング MOONGIFT
フローチャートなどの高度なグラフを描こうと思った時に使われるのがGraphvizです。テキストベースで記述していくだけでできるというのはやはり手軽です。しかしローカルソフトウェアをインストールしたり、セットアップしたりするのは面倒と感じる人も多いでしょう。 そこでさらに再利用性を高めてくれるのがViz.jsです。WebベースでGraphvizを使えるようにしてくれます。可能にするのはまたしてもEmscriptenなのですが、面白さを体感してください。 例として以下のようにGraphvizのDOT言語をそのままscriptタグに記述します。 <script type="text/vnd.graphviz" id="cluster"> digraph G { subgraph cluster_0 { style=filled; color=lightgrey; node [style=fill
JavaScriptで全角英数と半角英数の相互変換 - Rewish@hatena
全角英数の文字コードから65248個前が半角英数の文字コード。 半角英数の文字コードから65248個後が全角英数の文字コード。 // 半角にしたい str.replace(/[Ａ-Ｚａ-ｚ０-９]/g, function(s) { return String.fromCharCode(s.charCodeAt(0) - 65248); }); // 全角にしたい str.replace(/[A-Za-z0-9]/g, function(s) { return String.fromCharCode(s.charCodeAt(0) + 65248); }); 65248の部分は16進数で表される事が多い。 // 半角にしたい str.replace(/[Ａ-Ｚａ-ｚ０-９]/g, function(s) { return String.fromCharCode(s.charCodeAt(0)
jQuery で Ajax でデータを POST 送信する際にオブジェクトで値を渡すと自動的にエンコードしてくれる
私は jQuery で Ajax を使ってデータを POST で送信する際に以下のようにコードを書いていて躓きました。 var hoge = 'str&ing'; var fuga = 'string'; var data = 'hoge=' + hoge + '&fuga=' + fuga; $.ajax({ type: "POST", url: "/ajax/add", data: data, success: function() { alert('success'); } });
AJAXでXMLHttpRequestのopenをPOST、sendに内容を送っても送信できない時 - ウィリアムのいたずらの、まちあるき、たべあるき
ウィリアムのいたずらが、街歩き、食べ物、音楽等の個人的見解を主に書くブログです（たま～にコンピューター関係も） AJAXのやりかたのまとめを、 ここ http://www.geocities.jp/xmldtp/index_ajax.htm に書いていますが、きょうは、「１．ＨＴＴＰを使った通信」の 「POSTの場合」について。 ■概要 POSTはGetの場合に対して、以下の２点が違うことは、 すぐに、想像できると思います。 １．生成したXMLHttpRequestのメソッドopenで、 GETと送っていたところをPOSTにする ２．生成したXMLHttpRequestを使って、sendするとき ""だったところに、内容をおくる。 でも、これで実験すると、送信できないときがありました。 そのとき、こうしたら、うまくいきました ３．openしたあと、生成したXMLHttpRequestを使っ
ドラッグ & ドロップでファイルをアップロードする方法 | ScrapEngineer
Ajaxを使用してファイルをドラッグ＆ドロップでサーバにアップロードする方法 ローカルPC上のファイルをドラッグ＆ドロップでサーバに複数ファイルを同時にアップすることが可能になります。 下のgifのようなアップロードが可能になります。 javascriptとHTML側 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ファイルのアップロード</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script> </script> <script type="text/javascript"> $(function () { window.addEventL
今っぽくなった！トレンドをおさえたjQuery プラグインまとめ
作成：2015/04/6 更新：2016/06/29 Web制作 > トレンドとなりつつある視覚効果や、細部にちょっとした動きを取り入れたいときに使えるjQuery プラグインをまとめました。ユーザーが使いやすくなるよう、ページにひと工夫したいときに。少し前のプラグインもありますが、今から使えそうなものもピックアップ。 エンジニア速報は Twitter の@commteで配信しています。 もくじ マイクロインタラクション １．粘性 ２．移動するプレースホルダー ３．滑らかにページ移動させる ４．パスワード強度を可視化 ５．オートコンプリート ６．テキスト入力 ７．Google Map（吹き出し・マーカー） ８．オートページャー ９．プログレス12パターン １０．ノーティフィケーション レタリング １１．１文字ごとに指定 フルスクリーン １２．モーダルウィンドウ（全画面） １３．フォーム（全
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【翻訳】 2016年にJavaScriptを学んでどう感じたか - Endo Tech Blog
http://winback.blog32.fc2.com/blog-entry-424.html
Loading...
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。