一白山中

自分を磨き、自分なりの幸せを追求しよう

2021-11-09から1日間の記事一覧

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>

JavaScriptでレイアウト変更

<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>

JavaScriptで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を入れ替えするJavaScriptソース例2

<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>

onclickイベント

関数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>