Parse an HTML string with JS
I want to parse a string which contains HTML text. I want to do it in JavaScript. I tried the Pure JavaScript HTML Parser library but it seems that it parses the HTML of my current page, not from a string. Because when I try the code below, it changes the title of my page: var parser = new HTMLtoDOM("<html><head><title>titleTest</title></head><body><a href='test0'>test01</a><a href='test1'>test02<
CSSのパースにはJSCSSP - Qiita
var cssText = 'body {background: #000 url(image/hoge.gif) no-repeat fixed right bottom;}'; var parser = new CSSParser(); var parsed = parser.parse(cssText, false, false); JSON.stringify( parsed.cssRules[0].declarations[0], null, " " ); /* "{ "type": 1000, "property": "background-color", "values": [ { "value": "#000", "type": 1, "name": null, "parentRule": null, "parentStyleSheet": null } ], "value
クジラ飛行机「仕事に役立つJavaScript入門」
Googleスプレッドシートで作った単語帳から毎日LINEに英単語を送ろう ここ4回にわたって、LINE Notify APIとGoogle Apps Scriptを組み合わせて使う方法を紹介しています。今回は、Googleスプレッドシートを参照して、毎日、覚えたい英単語をLINEに送るという仕組みを作ってみましょう。 Googleカレンダーの予定を毎朝LINEに通知しよう ここ3回にわたって、LINE Notify APIとGoogle Apps Scriptを組み合わせて使う方法を紹介しています。前回は、定期的に会議の参加者にリマインダーを送るプログラムを作りましたが、今回は、Googleカレンダーの予定を取得して、その予定をLINEに通知するプログラムを作ってみ…
とほほのBootstrap 3入門 - とほほのWWW入門
とほほのBootstrap 3入門 はじめに このページは 「Bootstrap 3」について説明しています。Bootstrap 4 については、「Bootstrap 4入門」を参照してください。 Bootstrap とは Bootstrap は、スマートフォンなどのモバイル端末にも対応し、レスポンシブデザインを採用した HTML, CSS, JavaScript フレームワークです。 Twitter 社で開発され、最初は「Twitter Bootstrap」と呼ばれていましたが、現在は「Bootstrap」となりました。 ライセンスは MIT License で、商用利用も可能です。 現時点(2018年5月6日)の最新バージョンは 4.1.1 です。 Bootstrap 2 と Bootstrap 3 以降では一部互換性の無い機能があります。 2018年1月に Bootstrap 4 も
javascriptが理解しにくい人へ
javascriptが使えないと… プログラミングの苦労 最近のweb制作の現場ではjavascriptを使う機会が激増している聞く。プログラマーさんとデザイナーさんが分かれているならそんなに心配はないが、状況によってはデザイナーさんが自身でプログラミングに手を出さないといけない現場もあるようだ。むしろjavasc1.javascriptが使えないと…1.プログラミングの苦労2.オブジェクトオブジェクトうるせえんだよ1.オブジェクト指向プログラミング2.オブジェクトとは3.理解がしにくくなると思われる理由1.オブジェクトは既に存在する2.webページはDOM箱で表現される3.やりたいことをするときに4.いきなり難しすぎる4.jQueryの功罪1.jQueryは便利だけど…5.使わない勇気6.javascriptを理解するには1.急がば回れ7.勉強の資料 javascriptが使えないと…
JavaScriptのデバッグのコツと技 | POSTD
以前の記事で、 Webアプリケーションのデバッグの仕組み について触れました。今回は実践的なJavaScriptのデバッグについて掘り下げていきたいと思います。 ブラウザデベロッパツール 私の個人的なお気に入りはChromeデベロッパツールです。SafariやFirefoxはChromeほどの高水準に達していません。しかし、徐々に改善されてきています。FirefoxにはFirebugと改良されたFirefoxデベロッパツールが組み合わされた機能が備わっています。もし、Firefoxチームがビルトインされているデベロッパツールの改良の中で素晴らしい仕事をし続けたとしたら、Firebugはいつか、すたれるかもしれません。 個人的な好みにかかわらず、ターゲットとするあらゆるブラウザで、全てのコードのテストやデバッグができるようにすべきです。”あらゆるブラウザ”には、かの有名なInternet E
jQuery基礎文法最速マスター[to-R]
jQuery基礎文法最速マスター はやっているようなのでまとめてみたいと思います。 jQueryの読み込み Google AJAX Libraries APIで簡単に読み込めます。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> jQueryの記述場所 基本的にはscript要素内の次の箇所に記述していきます。 <script type="text/javascript"> $(function(){ /*ここにjQueryを記述*/ }) </script> 上のコードは$(document).ready()のショートカットなので、次のように書いても大丈夫です。 <script type="text/javascri
![jQuery基礎文法最速マスター[to-R]](https://cdn-ak-scissors.b.st-hatena.com/image/square/a01a0c31d440f29a491fdd71f76aedb1d5a3f40b/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fblog.webcreativepark.net%2Ficon_200x200.png)
イベント一覧
Events/API/jQuery Page Load ready(fn) DOMがロードされて操作・解析が可能になったタイミングで関数を実行します。 Event Handling bind(type, [data], fn) 各要素を、例えば"click"のようなイベントのハンドラに対してバインドします。カスタムイベントに対しても同様に操作できます。 one(type, [data], fn) 各要素に一度だけ実行されるイベントのハンドラを渡します。 trigger(type, [data]) 各要素の引数で渡したイベントを実行します。 triggerHandler(type, [data]) 要素のイベントを実行しますが、あくまでハンドラに入っている関数のみを実行します。ブラウザがデフォルトで持っている動作は行われません。 unbind([type], [data]) bindの逆です
Droppable Widget | jQuery UI API Documentation
The jQuery UI Droppable plugin makes selected elements droppable (meaning they accept being dropped on by draggables). You can specify which draggables each will accept. Theming The droppable widget uses the jQuery UI CSS framework to style its look and feel. If droppable specific styling is needed, the following CSS class names can be used for overrides or as keys for the classes option: ui-dropp
JavaScriptフレームワークの寿命 | POSTD
(注記：9/13、いただいた翻訳フィードバックを元に記事を修正いたしました。) 半年ごとに”今一番ホットな”フレームワークが新たに登場しては、私たちは興奮に沸き返ります。 誇大広告を信じてはいけません。 フレームワークの寿命 はプロジェクトの成功を左右するほど重要な要素です。フレームワークを選ぶ際、テクノロジにおける多くの意思決定者は納得のいく選択をするために、コミュニティの大きさ、人気、大企業によるサポートの有無などを基準にしています。しかし実際は、こうした要素によって寿命が決まるわけではありません。 最初は勢いがあったのに、徐々に弱まり、最終的には線香花火のごとく儚く消えてしまうようなフレームワークを選んでしまうと、書き直しに無駄な時間を費やしたり、チームの士気を下げたりする原因となります。本記事は、そうした残念な結果を回避するヒントをまとめたものです。 本記事では以下のことを示したい
Using HTML5 Drag and Drop in ASP.NET | Developer.com
Introduction Drag and drop operations are common in desktop applications. Modern web applications also try to harness the ease and power of drag and drop operations to provide enhanced user experience. Web developers often resorted to JavaScript based libraries or custom techniques for enabling drag and drop behavior in their applications. Luckily, HTML5 comes with an inbuilt support for drag and
超便利！jQueryでJSONデータを解析し、HTMLに表示する／後編
超便利！jQueryでJSONデータを解析し、HTMLに表示する／後編 jQuery2013年7月31日 前の記事でご紹介したJSONについて、以下の3パターンの実装例を元に解説していきます。 js中に記述されたJSONデータからHTMLに表示 外部ファイルのJSONデータからHTMLに表示 JSONPで外部ファイルのJSONデータからHTMLに表示 1.js中に記述されたJSONデータからHTMLに表示 まずJSON+jsの全体図をつかめるよう、活用する場面はあまりありませんが、jsの中にJSONデータを記述した例を紹介します。 実際のサンプル HTML <table cellpadding="0" cellspacing="0" border="0" class="tbl"> <col width="15%" /> <col width="15%" /> <col width="70%
Droppable 概要 ～ jQuery UI の使い方～
draggble要素をドロップできる状態にします。 基本的な使い方は、jQueryオブジェクトに対して、.droppable()メソッドを呼ぶことにより要素をドロップできるようにします。 $(".selector").droppable(); 引数に（オブジェクト形式の）オプションを指定して、挙動を指定することができます。 $(".selector").droppable({ activeClass: 'drop-active', }); また、引数に文字列を渡すことにより、ドラッグを無効・有効にしたり等、ドラッグ機能を変化させることができます。draggable同様、droppableDisable()などの個別のメソッドが存在せず、.droppable()の引数にメソッド代わりの文字列を指定します。 $(".selector").droppable('disable');
ASP.NETでのページのリロード | iPentec
ASP.NETでページのリロードをするコードを紹介します。 概要 ASP.NETでページをリロードする場合は、同じURLへリダイレクトすることでリロードを実行できます。 JavaScriptを用いてページをリロードすることも可能です。JavaScriptを利用したページのリロードはこちらの記事を参照してください。 UI 以下のUIを作成します。ASP.NETアプリケーションを作成し、WebフォームにASP ボタンコントロールを2つ、ASP Labelコントロール、HTMLコントロールのボタンを配置します。 XML XMLのコードは以下になります。 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="PageReload._default" %> <!DOCTYPE html
[JavaScript] JavaScriptでページをリロードする
JavaScriptでページのリロードをするコードを紹介します。 概要 JavaScriptでページのリロードをするには、Windowオブジェクトのwindow.location.reload()メソッドを用います。 プログラム例 コード 下記のHTMLファイルを作成します。 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script type="text/javascript"> var now = new Date(); function LoadProc() { var target = document.getElementB
![[JavaScript] JavaScriptでページをリロードする](https://cdn-ak-scissors.b.st-hatena.com/image/square/e4597ccf3abe0cdd45c20898e403dfac8a9ba65a/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fwww.ipentec.com%2Fdocument%2Fimages%2Fdocument-category%2Fjavascript)
jQuery UIのDraggableで快適なドラッグアンドドロップライフを！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。づやです。 さて、要素をドラッグアンドドロップさせてなんかしたいっていう要望は割とあると思うのですが、個人的には5年くらいその処理が必要とならず、あまり考えることがありませんでした。 そこで最近はどんな感じでできるのかなあ、と思っておりまして、ちょっと調べてみたことをまとめます。 5年前はprototype.jsとプラグインを利用していたのですが、今回はjQueryとプラグインで実装してみたいと思います。 便利なjQuery UIのDraggableを利用します と言っても、jQuery UIを利用すれば超簡単にできる模様なので、まずは作ってみました。 ※コードは大事な所だけ抜粋しています <html> <head> <!-- まずjQueryとjQuery UIを読み込みます。今回はCDNから読み込んでます --> <script src="//ajax.googleapis
Google流 JavaScript におけるクラス定義の実現方法
目次 2019年追記 はじめに クラス実現のために必要な JavaScript の言語仕様 function this call new 演算子 prototype チェーン プロパティ: prototype Google Closure 流のクラスの実現方法の概要 クラスの宣言とコンストラクタの定義 メンバ変数 (インスタンス変数) メソッド定義と呼び出し private, protected 継承 プロトタイプチェーンを利用してメソッドを親クラスから引き継ぐ 親クラスのコンストラクタの呼び出し メソッドオーバーライドと親クラスのメソッドの呼び出し 多重継承 abstract, interface inherits の実際のコード 良くないクラス実現方法 ES6 のクラス 2019年追記 この記事ではclassが導入されたES6以前のJavaScriptでどのようにクラスに相当するものを
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptの「&&」「||」について盛大に勘違いをしていた件 - Qiita
Node: removeChild() メソッド - Web API | MDN
どうしてこうなった？ Node.jsとio.jsの分裂と統合の行方。これからどう進化していくのか？
