JavaScript
イベントというのは、HTML要素上に発生する出来事である JavaScriptで、イベントを呼び出せる イベントは、ブラウザの処理かエンドユーザーの操作に分けられる 例えば、サイトページの読み込みが完了した HTMLのinputタグが変えた HTMLのボタンがクリックさ…
関数は、イベントまた呼び出されると、繰り返し利用できるソースの塊である <html><head><meta charset="utf-8"><title>テスト事例</title><script>function myFunction(){ alert("Hello World!");}</script></head> <body><button onclick="myFunction()">クリックしてください</button></body></html> 関数フォーマット function（キーワード） functionname(){ // 実行ソース（関数そ…
JavaScriptにて、オブジェクトというのは、「属性」と「メソッド」を所持するデータのことである 生活の例で、考えると、「車」は一つのオブジェクトである 属性としては、下記ものがある car.name = Fiat car.model = 500 car.weight = 850kg car.color = w…
値の類で、文字列（String）、数字(Number)、真偽(Boolean)、空っぽ（Null）、未定義（Undefined）、Symbol（ES6から追加された型で、唯一無二のデータを表す） データ引用の類で、オブジェクト(Object)、配列(Array)、関数(Function) ※型の変動は可能である…
後で定義される関数は、前のを覆すfunction test() { console.log("test"); } test(); // "test arg0 + undefined" 出力 function test(arg1) { console.log("test arg" + arguments.length + " + " + arg1); } test(1,2); // "test arg2 + 1" 出力 足りない…
アルファベットから開始する $ 及び _ 記号からスタートしてもOKですが、薦めはしない <html><head> <meta charset="utf-8"> <title>一白山中(ennya.hatenablog.com)</title></head><body> <script>var pi=3.14; // ES6に詳しい人ですと、piに対して、const キーワード利用可能です。定数を表す// const pi = 3.14;var name="Bill Ga</body></html>…
// 一行のコメントアウト /*複数行の コメントアウト */ <html><head> <meta charset="utf-8"> <title>一白山中(ennya.hatenablog.com)</title></head><body> <p id="myP"></p><script>var x=5; // 変数 x 声明し、5の値を代入するvar y=x+2; // 変数 y 声明し、 x+2の値を代入するdocument.getElementById("myP").innerHTML=y // yの値を myPに書き</script></body></html>…
break 繰り返し処理から脱出catch 処理の塊、tryの部分の処理がエラー発生する際に、実行されるcontinue 一回の繰り返し処理をスキップするdo ... while 処理の塊を実施する。条件判断で、trueの場合は、続けて処理を実行されるfor 判断条件はtrueの場合、処…
<html><head><meta charset="utf-8"><title>一白山中(ennya.hatenablog.com)</title></head><body> //数字(Number) <p id="demo"></p><script>document.getElementById("demo").innerHTML = 123e5;//123*10の五乗 //文字列(String) <p id="demo1"></p><script>document.getElementById("demo1").innerHTML = 'John Doe';…</body></html>
①ポップアップ表示 <html><head><meta charset="utf-8"><title>一白山中(ennya.hatenablog.com)</title></head><body> <h1>初めての画面</h1><p>初めての段落</p><script>window.alert(5 + 6);</script> </body></html> ②HTML要素を入れ替え <html><head> <meta charset="utf-8"> <title>一白山中(ennya.hatenablog.com)</title>…</meta></head></html>
ChromeでF12押下か、マウス右ボタンクリックして、そして検証を選択する また、右上の点々をクリックして、その他のツールのデベロッパーツールを選択することで、開発者ツールを開けます。 そして、コンソールタブで、JavaScriptソースを検証できます。 コ…
<html><head> <meta charset="utf-8"> <title>一白山中(ennya.hatenablog.com)</title></head><body> <h1>初めてのJavaScript</h1><p>数字入力してください。数字ではなければ、ブラウザのポップアップ警告が出る</p><input id="demo" type="text"><script>function myFunction(){ var x=document.getElementById("demo").value; if(x==""||isNaN(x)) { a…</body></html>
<html><head> <meta charset="utf-8"> <title>一白山中(ennya.hatenablog.com)</title></head><body> <h1>初めてのJavaScript</h1><p id="demo">JavaScriptでHTML要素のレイアウト変更できる</p><script>function myFunction(){ x=document.getElementById("demo") // 要素特定する x.style.color="#ff0000"; // レイアウト変更}</script></body></html>
<html><head> <meta charset="utf-8"> <title>一白山中(ennya.hatenablog.com)</title></head><body> <script>function changeImage(){ element=document.getElementById('myimage') if (element.src.match("変更後")) //検索する機能、一致するかどうか判断する { element.src="/images/変更前.gif"; } else { element.src="/images</body></html>…
<html><head> <meta charset="utf-8"> <title>一白山中(ennya.hatenablog.com)</title></head><body> <h1>初めてのJavaScript</h1><p id="demo">JavaScriptでHTML要素を入れ替える</p><script>function myFunction(){ x=document.getElementById("demo"); // 要素を特定する x.innerHTML="Hello JavaScript!"; // コンテンツ変更}</script><…</body></html>
関数alterは通常のソースにはなかなか出番がないですが、実装中の検証ツールとしては、よく使われます。 <html><head> <meta charset="utf-8"> <title>一白山中(ennya.hatenablog.com)</title></head><body> <h1>初めてのJavaScript</h1><p>JavaScriptイベントに対する反応、例えば、ボタンクリック</p><button type="button" onclick="alert('ようこそ!')">クリックしてください!</button> </body></html>
JavaScriptでhtml生成する <html><head><meta charset="utf-8"><title>一白山中(ennya.hatenablog.com)</title></head><body> <p>JavaScript は直接に HTML ソースの中に書くことはできる</p><script>document.write("<h1>これはタイトルです</h1>");document.write("<p>これは段落です。</p>");</script><p>HTML 出力途中で、 <strong>document.write</strong>…</p></body></html>
クリック操作で、時刻を表示する <html><head><meta charset="utf-8"><title>一白山中(ennya.hatenablog.com)</title><script>function displayDate(){ document.getElementById("demo").innerHTML=Date();}</script></head><body> <h1>初めてのJavaScriptプログラム</h1><p id="demo">これは一つの段落</p> </body></html>
