Js
ブラウザにデータを保存する仕組み。 ブラウザを閉じてもデータが保持される。 使用例(JSFiddleで動作確認) <html> <head> <meta charset="utf-8"/> <script language="javascript" type="text/javascript"> // 読込 function load() { var varinVal = ""; if(!localStorage.getItem('hogeKey')) { varinVal = "データがありません"; } else { //ローカ</meta></head></html>…
vue.jsでJSを別ファイルとした場合の記述例とフォルダ構成は以下の通り。 hoge.htm <html> <div id='app'> インスタンスの値を表示してみた<br> {{ name }} </div></html> <script src="https://cdn.jsdelivr.net/npm/vue"></script><script src="src/hoge_lab.js"></script> hoge_lab.js new Vue({ el: "#app", da…
ブラウザ上でJavaScriptをコーディング・テスト実行できるサイト JSFiddle - Code Playground 使用例 実行環境を切り替えるとVue.jsでの動作環境を確認できる
<html> こちらに値を入力すると<input type="text" id ="txtbox1"/> </br> こっちでキー入力を検知<input type="text" id ="txtbox2"/> </html> <script> // ------------------------------------------------------------ // キーボードを押したときに実行されるイベント // ------------------------------------------------------------ document.onkeyd…
<html> このブラウザは↓</br> <p id="myuserAgent"></p> </html> <script> //ブラウザ情報の取得 var userAgent = window.navigator.userAgent.toLowerCase(); //HTMLに書き出し var element = document.getElementById('myuserAgent'); element.innerHTML = userAgent; </script> 上記で取得できるが取得した値で判定す…
documentオブジェクトはローカルにキャッシュした方が処理速度が速い。。 理由はdocumentオブジェクトを使用すると内部メソッドが呼ばれてしまうかららしい。。。 以下、キャッシュして使用する使用例 function hoge() { var doc = document; //こんなふうに…
scrollTopを使用すると縦スクロールバーの位置を取得・操作することができる なお、横スクロールバーを操作したい場合はscrollLeftを使用する 以下、使用例 <head> <style type="text/css"> .scrollon { overflow: scroll; /* スクロール */ width: 100px; height:100px; </style> </head> <body> <div class="scrollon" id="scroll_div"> aaaaaaaa1<br> aa</div></body>…
elementsオブジェクトを利用して、項目の値を取得・設定するサンプル elements.html <html> <script language="javascript"> //submitイベント function getonsubmit(){ alert('submit'); } //Elementを使用して値の取得 function getelements(){ var r ; r = ''; for(var j=0;j</html>
動作確認：IE6 sp2 1.実行したいScriptを書く var a ='aaa' function alt(){ alert('a'); alert(a); } alt(); 2.無名ファンクションにScriptを記述する javascript:( function(){ ■ココに埋め込む■ } )();※無名ファンクションにするのは変数をグローバルにし…
lab.html <html> <script type="text/javascript" src="keyenter.js"></script> <script language="javascript"> /* aler発行 */ function onclickFunc(){ alert("aa"); } </script> <form name = "form1"> <input type="text" tabindex="1"> <input type="text" tabindex="2"> diable→</form></html>
JavaScriptで同じファンクションを定義した場合、 後で定義したものが有効となる。 同じファンクションを定義した例 <html> <script language ="javascript"> function func1(){ alert('先勝ち！！') } function func1(){ alert('後勝ち！！') } </script> <boby> オーバーライド？<input type="button" value="くりっく" onclick="func1()"> </boby> </html>この仕様を利用すると共通のjs…
onBeforeUnloadはページがUnloadする直前を検知することのできるイベント。 ブラウザの閉じるボタンを押した際も検知できる。 なお、onUnloadイベントよりも前に発生する。 このイベントを利用してサーバサイドにブラウザが閉じられたことを通知することがで…
グリースモンキーとはFireFoxでユーザスクリプトを実現するためのアドオン。 右下のステータスバーでオン、オフが切り替えられる。 とりあえず、以下のユーザースクリプトを入れてみた。 Google Auto Pager・・・Googleの検索結果を「次へ」のアンカーを押下…
http://web-tan.forum.impressrd.jp/e/2007/05/21/1373 Webのデザインに便利。
ブックマークレット ・・・ブックマークにURLを登録する代わりに、短いJavaScriptを登録しておくもの。 お勧めのブックマークレット ・フォームの入力内容を保存・復元(プルダウンには対応していない) ○保存 javascript:(function(){function%20o(s){prompt(…
Slidyの機能でリストを少しづつ表示させることが出来る。 下記のようにulのclassをincrementalと指定すればＯＫ。 <ul class="incremental">サンプル↓ </ul>
最近、よくみかけるようになったブラウザでのスライドを作ってみる。 １．W3.orgより「slidy.js」と「slidy.css」をダウンロード http://www.w3.org/Talks/Tools/Slidy/#(1) 今回はすべて揃ったslidy.zipをダウンロードしてきた。でも必要なものは上記の２つ…
showModalDialogメソッドでモーダルダイアログを実現できる。 Modal.html <html> <head> <script> function showModal(){ //モーダルでreturn.htmlを起動し、戻り値を取得 var value = showModalDialog('return.html'); alert(value); } </script> </head> <body> <input type='button' value='開く' onclick='showModal()'/> </div> </body> </html> return.html <…
windowのunloadイベントを利用すると他のページへ遷移するのを禁止できる。 やり方は以下のソースを記述するだけ window.onunload = function(){ location.replace(document.location); } ただ、この記述だけだと次ページへの遷移すらできなくなるので少し改…
document.styleSheets[0].disabledでスタイルシートの有効・無効を設定できる。 以下サンプル(IE,FireFoxでは動いたよ) css1.html <html> <link rel="stylesheet" href="test.css"> <script> function click1(){ if (document.styleSheets[0].disabled == false){ document.styleSheets[0].disabled = true; }else{</link></html>…
supercalcクラスを継承したcalcクラスのメソッドを呼び出す例 calc.js (クラスを定義したjs) //コンストラクタ function calc(width, height) { //supercalcを継承 for ( var prop in supercalc.prototype ) { if ( typeof(calc.prototype[prop]) == "undefi…
htmlからcalc.jsで定義したcalcクラスを生成し、メソッドを呼び出す例 calc.js (クラスを定義したjs) //コンストラクタ function calc(width, height) { this.width = width; this.height = height; } //メソッド calc.prototype.area = function() { return…
nextSibling,previousSiblingメソッドを使うと同じ階層のノード間を移動することが出来る。 これを使って同じtrタグの背景色を変更してみる。 sibling.html 表示用ＨＴＭＬ <html> <link href="stylesheet.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="colorchange2.js"></script> <body> <table> <tr rowNum="1" class="line0"> <td>aa</td><td>aa</td></tr></table></body></link></html>
BEHAVIORを使ったテーブルの選択した行の背景を変更するプログラム。 別にBEHAVIORは使わんでもできると思うが・・・ test.html(ＨＴＭＬ) <html> <link href="stylesheet.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="colorchange.js"></script> <body> <table> <tr rowNum="1" class="line0"> <td>aa</td><td>aa</td> <td> <table> <tr> </tr></table></td></tr></table></body></link></html>
behaviorを使うとJavascriptを外部ファイルから呼び出すことができる 下の例はbehaviorでイベントを外部ファイルに記述した例。 ちなみにbehaviorはIE(たしか5)以降からサポートされた機能です。 FireFoxは対応していないっぽい。 HTMLファイル <HTML> <HEAD> <META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css"> <STYLE TYPE="text/css"> <!-- .b1</style></meta></head></html>…
サーバにアクセスしてdivタグの値を書き換えるプログラムを作ってみた。 １．jsp(ajax.jsp)の作成 <%@ page language="java" contentType="text/html; charset=windows-31j" pageEncoding="windows-31j"%> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>sample</title> </head></html>
■Microsoft Script Debuggerの場合 １．Microsoft Script Debuggerをインストール ２．ＩＥのツール→インターネットオプション→詳細設定 ３．「スクリプトのデバッグを使用しない」のチェックを外す ４．表示→スクリプトデバッガ→次のステートメントで中断 …
1.prototype.jsをダウンロード 2.ajax.htmlを配置 ajax.html sample tagert here↑※p id="blk"value="click" onclick="new Ajax.Updater('blk','data.html',{method: 'get'});"/> data.html (取り出すデータ) harada
