JavaScript

JavaScript スタイルシートを操作する②

<link rel="stylesheet" type="text/css" href="style.css"/> <script type="text/javascript"> //className.html //外部スタイルシートで定義されたスタイル(スタイルクラス)にアクセスするには //classNameプロバティを使用する。 function changeStyle(elem, clazz){ //指定要素に対して、スタイルクラスclazzを適用する elem.className = clazz; } </script> </link>

JavaScript スタイルシートの操作①

<script type="text/javascript"> //JavaScriptからスタイルシートを操作① //インラインスタイルにアクセスする。<div>タグにマウスポインタを載せたタイミングで背景色をピンクに、外したタイミングで下の白色に切り替える。 function changeStyle(elem, color){ elem.style.backgroundColo</script>…

JavaScript 新規にノードを追加する

<script type="text/javascript"> //新規にノードを追加する //フォームに入力した内容を下にページ下部に対応するリンクを追加する //追加ボタンをクリックしたタイミングで実行されるadd関数 function add(f){ //<a>タグを生成 var anchor = document.createElement('a'); //<a>タグのhref属性を</a></a>…

JavaScript ウィンドウサイズやスクロール位置を操作する

<html> <head> <body> <input type="button" value="scrollTo" onclick="window.scrollTo(0,200)"/> <input type="button" value="moveBy" onclick="moveBy(100,100)"/> <input type="button" value="resizeBy" onclick="window.resizeBy(50,50)"/> 1<br> 1<br> 1<br> 1<br> …</body></head></html>

JavaScript タイマー機能の実装

<script> //タイマー機能の実装 //タイマーIDを格納するためのグローバル変数 var timer; //ページロード時にタイマー処理を登録 window.onload = function(){ timer = window.setInterval( //現在の時刻を<div id='result'>タグに表示(1000ミリ秒ごとに更新) function(){ var dat =</div>…

JavaScript サブウィンドウを生成する

<script type="text/javascript"> //サブウインドウを表すWindowオブジェクトを格納する変数 var subwin; //サブウィンドウを開くボタンクリック時に実行 function win_open(){ subwin = window.open('http://www.wings.msn.to/', 'Sample', 'width=600,height=300,scrollbars=yes,location=…

JavaScript ハンドラー3

<script type="text/javascript"> //ページロード時に実行されるイベントハンドラを登録 window.onload = function(){ //ボタンクリック時に実行されるイベントハンドラを登録 document.getElementById('btn').onclick = function(){ window.alert('ボタンがクリックされました'); }; }; </script> <input id="btn" type="button" value="ダイアログ表示"/> …

JavaScript ハンドラー1

<script type="text/JavaScript"> function btn_onclick(){ window.alert('ボタンがクリックされました'); }; //--> </script> <input type="button" value="ダイアログ表示" onclick="btn_onclick()" /> 改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで作者: 山田祥寛出版社/メーカー: 技術評論社発売日: 2016/09/30メディア: 大型本この商品を含…

JavaScript 継承

<script> //クラスベースなオブジェクト指向によく似た継承を実現する方法 //予め用意したMemberクラスを継承してSpecialMemberクラスを定義する function initializeBase(derive, base, baseArgs){ base.apply(derive, baseArgs); for(prop in base.prototype){ var…

JavaScript コンストラクタ

<script> var Member = function(firstName, lastName){ //thisはコンストラクタによって生成されるインスタンスを表す。 this.firstName = firstName; this.lastName = lastName; this.getName = function(){ return this.lastName + ' ' + this.firstName; } }; va</script>…

JavaScript クラス

<script> //JavaScriptのオブジェクト指向はプロトタイプベースのオブジェクト指向であり //クラスベースのオブジェクト指向ではない // 「クラス」を定義 var Member = function(){}; //インスタンス化 var mem = new Member();//JavaScriptでは関数にクラスとして</script>…

JavaScript this

<script> var Member = function(firstName, lastName){ //thisはコンストラクタによって生成されるインスタンスを表す。 this.firstName = firstName; this.lastName = lastName; this.getName = function(){ return this.lastName + ' ' + this.firstName; } }; va</script>…

オブジェクト指向 JavaScript1

<script> //JavaScriptのオブジェクト指向はプロトタイプベースのオブジェクト指向であり //クラスベースのオブジェクト指向ではない // 「クラス」を定義 var Member = function(){}; //インスタンス化 var mem = new Member();//JavaScriptでは関数にクラスとして</script>…

JavaScript 高階関数

<script> //高階関数arrayWalkを定義 //引数に与えられた配列dataの内容を、指定されたユーザ定義関数fの規則に従って順番に処理するための高階関数 function arrayWalk(data, f){ for (var key in data){ f(key, data[key]); } } //配列を処理するためのユーザ定義…

JavaScript arguments

<script> function printf(format){ //引数の2番め以降を順番に処理 for (var i = 1; i < arguments.length; i++){ var pattern = new RegExp('\\{' + (i - 1) + '\\}', 'g'); format = format.replace(pattern,arguments[i]); } document.writeln(format); } print</script>…

JavaScript 型

<script> var num = 1; document.writeln(typeof num); var str = 'こんにちは'; document.writeln(typeof str); var flag = true; document.writeln(typeof flag); var ary = ['JavaScript', 'Ajax', 'ASP.NET']; document.writeln(typeof ary); var obj = {x:1, y:</script>…

JavaScriptでのHelloWorld

<html> <head> <meta http-equiv="Content-Type" content=""text/html; charset="UTF-8"/> <title>Hello,World!</title> </head> <body> <pre> <script type="text/javascript"> <!-- //document.writelnは、指定された文字列を表示するための命令 document.writeln('Hello,World!'); //--> </script> <noscript>JavaScriptが利用できません。</noscript>…</pre></body></html>