約 2,903,251 件
https://w.atwiki.jp/mhikichi/pages/20.html
肥満度判定機 ここでは基本アルゴリズムの一つである分岐処理を学習します。 BMI指数は以下の表のように分類されます。 低体重(やせ) 18.5未満 普通体重 18.5以上 25未満 肥満(1度) 25以上 30未満 肥満(2度) 30以上 35未満 肥満(3度) 35以上 40未満 肥満(4度) 40以上 この判定をプログラムで自動で行うように肥満度計算機を改造します。 肥満度計算機をForkしましょう。 まず簡単にするために、肥満だけを判定するプログラムを作ります。 form等のアイテムを配置した後にdocument.writeを実行すると消えてしまいますので、結果出力用のタグを用意します。 HTMLタブを開いて、以下のコードを入力します。 form name="form1" 身長 INPUT TYPE="text" NAME="txtA" cm BR 体重 INPUT TYPE="text" NAME="txtB" kg BR BMI INPUT TYPE="text" NAME="txtC" br INPUT TYPE="button" NAME="calc" value="計算" onclick="Calc()" div id="msg" /div /form div id="msg" /div として、結果を出力する領域を用意しました。 JavaScriptタブを開いて、以下のコードを追加します。 2回目以降の実行のために前回の結果を消しておきます。 document.getElementById("msg").innerHTML=""; divタグのid=msgの領域に""を格納して、空にします。 if (c =25) { document.getElementById("msg").innerHTML="肥満です"; } 変数cにBMI指数の数値が格納されてとして、25以上であるかどうかを判定します。判定がYESになれば{ } の処理を実行します。 ここでは、msgの領域に肥満ですというメッセージを格納しました。 25未満の場合は何も処理を行いません。 さらに、普通体重の処理を追加します。 if (c =25) { document.getElementById("msg").innerHTML="肥満です"; } else if (c =18.5) { document.getElementById("msg").innerHTML="普通体重です"; } else は前の判定がNOだった場合の処理です。25以上では無かったときだけ、18.5以上かどうかを判定します。 つまり、これで18.5以上25未満のときにYESとなります。 それ以外は何も実行されません。 if (c =25) { // 1 document.getElementById("msg").innerHTML="肥満です"; //α } else if (c =18.5) { //2 document.getElementById("msg").innerHTML="普通体重です"; //β } else { //3 document.getElementById("msg").innerHTML="低体重(やせ)です"; //γ } else の後ろにifを書かない場合は、上記の条件が全てNOだった場合の処理です。 cの値がどんな値でも正しくトレースできるようになりましょう。 例) Cの値を同値分割した場合 c=26 の場合 1の判定でYES → 処理α c=20 の場合 1の判定でNO → 2の判定でYES → 処理β c=15 の場合 1の判定でNO → 2の判定でNO → 処理γ 境界値(c=25,c=18.5)でもトレースしてみてください。 完成版のプログラムです 練習 肥満度判定機を肥満1度から肥満4度も判定するように改造してみよう。さらに同値分割と境界値でトレースをしてみよう。 改良計算機 入力するプログラムでで作成した計算機プログラムを改良します。 +かーを選択式にして計算できるようにします。 計算機をForkすると簡単です。 HTMLタブを開いて、以下のコードを入力します。 form name="form1" INPUT TYPE="text" NAME="txtA" select name="selOpe" size=1 option value="1" + /option option value="2" - /option /select INPUT TYPE="text" NAME="txtB" = INPUT TYPE="text" NAME="txtC" br INPUT TYPE="button" NAME="calc" value="計算" onclick="Calc()" /form select タグを使って、+と-を選べるようにしています。 値を格納する変数を宣言しておき、document.form1.selOpe.valueで得た選択した値を取得します。 var ope; ope = parseInt(document.form1.selOpe.value); その値に応じて、計算する式を変えています。HTMLの方で+ならvalue=1、ーならvalue=2と決めているので、その値に応じて計算式を選択します。 if( ) { } else { } 構文では、if(条件式) の条件が成立した場合にそれに続く{ } の中の処理を実行します。 else の後ろは条件が成立しなかった場合に実行されます。 if( ope == 1) { c= a+b; } else if( ope==2) { c= a-b; } 上記の構文では、 ope=1 であれば c = a+b ope=2 であれば c = a-b を実行することになります。 以下が完成板のプログラムです。 練習 HTMLとJavaScriptのプログラムを追加して×と÷も選択できるようにしよう。さらに追加して÷を選んだときだけ、商と余りを計算するプログラムに改良しよう。ヒント 余りを表示するテキストボックスを作っておく。 ÷の計算結果を整数にする(切り捨て Math.float())。 余りを計算する演算子は % を使う。
https://w.atwiki.jp/daichiscript/pages/1.html
オブジェクトごとに解説していきます。
https://w.atwiki.jp/javascriptmatome/
Javascript のサンプルプログラムをひたすら載せるよ! 参照URLも載せますよ!
https://w.atwiki.jp/tube/pages/28.html
取得系 const a = document.getElementById( id名 ); const a = documentTagName( タグ名 ); const a = document.getElementsByClassName( クラス名 ); const a = document.querySelector( [class="クラス名"] ); その他 const a = document.createElement("HTMLのタグ"); a.type = 下のタイプ一覧から使いたい物を選んで入れる ; a.id = 設定したいid ; a.innerHTML = ここにHTML ; HTMLのタグにinputにすると下のtype一覧のものが使える type一覧 type= radio type= checkbox type= range type= image src= 画像の場所 style.width= 25px style.height= 25px type= button value= ボタン type= submit type= reset type= color type= file type= search type= tel type= text type= url type= number type= password type= email type= time type= week type= month type= datetime-local 色々 場所.appendChild(入れたい物); ※場所のリストの一番最後に追加される const basho = document.getElementById( special_type ); const mozi = document.createElement("h1"); mozi.innerHTML = あいうえお ; basho.appendChild(mozi); const basho = document.getElementById( special_type ); const mozi = document.createElement("h1"); mozi.innerHTML = あいうえお ; basho.parentNode.appendChild(mozi); 場所.parentNode.appendChild(入れたい物); ※場所が入っているリストの一番最後に追加される const ireruyatu = document.createElement("input"); ireruyatu.type = text ; ireruyatu.id = test ; const basho = document.getElementById( special_type ); const ireruyatu = document.createElement("input"); ireruyatu.type = text ; ireruyatu.id = test ; basho.appendChild(ireruyatu); document.addEventListener( keypress , osu); function osu(e) { if(e.code === Enter ){ alert("あいうえお"); } }
https://w.atwiki.jp/m_shige1979/pages/1046.html
イベントリスナの登録 概要 動的にイベントを登録可能 処理中に削除することも可能 ※IEとIE以外で処理が異なるので注意が必要 定義 サンプル html javascript
https://w.atwiki.jp/tomokazu0525/pages/80.html
最終更新日時2011-02-18 ■目次 アルファベット順actionscript Ajax java jscript ECMAScript livescript vbscript ライブラリ ページフッタこのページの1階層下のページこのページに含まれるタグ このページへのアクセス数 ■本文 javascriptのプログラムを書く上で出てくるメソッドやプロパティの解説ではなく、 javascriptと似た言語などをアルファベット順で整理。 アルファベット順 actionscript Flash用のスクリプト言語。javascriptの互換性は多少あるが、そもそもjavascriptと用途が違う。javascriptと互換性がある点は、ECMAScriptで定められているDate,Math,RegExpなどの標準のクラス。互換性がないのは、windowクラスやdocumentクラスといったブラウザに依存したクラス。参考にしたページ 知られざるJavaScriptの世界 - 知られざるJavaScriptの世界:ITpro ActionScript - Wikipedia Ajax Asynchronous JavaScript + XMLの略称です。Asynchronousとは非同期という意味で、JavaScriptとXML、これらの技術を用いて非同期で通信を行うという事を意味します。 引用元: 第1回 PHPで簡単なAjaxプログラムを作ろう - Ajax+RIA講座 java 名前が似ている理由については、livescriptの項目参照。javascriptとの互換性はない。 Java - Wikipedia jscript javascriptの省略形ではなく、別のスクリプト言語。ただし、javascriptとの互換性はかなり高い。javascriptはネットスケープ社とサンマイクロ社が共同開発したのに対し、jscriptはマイクロソフト社開発。 参考にしたページ: JScriptとは - 意味/解説/説明/定義 : IT用語辞典 JScript - Wikipedia ECMAScript javascriptとの互換性はかなり高くjavascriptの別名に近い。 ECMAScript - Wikipedia livescript javascriptの古い呼名。 開発当初はLiveScriptと呼ばれていたが、1995年にサン・マイクロシステムズ(現・オラクル)が開発したプログラミング言語Javaが当時大きな注目を浴びており、ネットスケープとサン・マイクロシステムズが業務提携していた事もあったため、JavaScriptという名前に変更された 引用元: JavaScript - Wikipedia vbscript javascriptに対抗して、microsoftが独自で作ったscript言語。javascriptとの互換性はない。 ライブラリ ライブラリとは、プログラムの知識を集めたもの」である。つまり、よく使うプログラムの部品を機能ごとにまとめて再利用できるようにしたものを指す。ライブラリがなければ、プログラマはすべてのコードを自分で書かなければいけなくて非常に大変なのだが、ライブラリを使うと、だれかが作った(または自分が過去に作った)パーツを再利用できる。うまく作られたライブラリは、より大きなプログラムを作る際にパーツとして利用でき、開発の効率が良くなるだけでなく、プログラマがいちから作るのに比べるとバグ(不具合)が紛れ込むのことを減らせるという効果もある。引用元 日本語向けfonts.css登場? 無料で使えるJSライブラリYUIの基礎 | Web担当者Forum ライブラリの具体例:prototype.js 、script.aculo.us 、jQuery 、MooTools、Yahoo UI Library etc ページフッタ このページの1階層下のページ このページに含まれるタグ このページへのアクセス数 今日: - 昨日: - これまで合計: -
https://w.atwiki.jp/m_shige1979/pages/1258.html
ヘッダー・フッター ヘッダー・フッターの位置を固定 フルスクリーンモードで表示 ヘッダーにボタンを配置 ヘッダー領域に「戻る」ボタンを配置 「戻る」をjavascriptでまとめて設定 フッターにボタンを配置 永続ツールバーを設置
https://w.atwiki.jp/purkinje/pages/20.html
ゲームブックでは、何十回も何百回もサイコロを振る必要があります。 Web上でサイコロを振れるようにしましょう。そしてユーザーがサイコロをクリックしたらサイコロが止まる。 まずはサイコロを描くことから。 画像ファイルを読み込んでもいいのだけど、ファイルをhtmlの1個だけにしたかったので、canvas機能を試してみた。 ここら辺の知識は 「HTML5 CanvasでつくるRPG 」から仕入れました。 canvas id="dice_canvas" width="500" height="210" onclick="dice.stop()" style="background #ccffcc;" /canvas !-- Script の前にcanvasの宣言 -- script var cv = document.getElementById("dice_canvas"); // IDを頼りにcanvasオブジェクトを取得 var ctx = cv.getContext("2d"); // 2Dモードを指定 // サイコロの1の目を描く。 // 引数は center_xとcenter_yがサイコロの中心のxとy座標 function draw_pip1(center_x, center_y) { //DRAW 1 // 背景の四角を描く ctx.fillStyle = rgb(255, 255, 255) ; // 塗りつぶしは白 ctx.strokeStyle = rgb( 0, 0, 0) ; // 輪郭は黒 ctx.beginPath(); // 白の塗りつぶしの四角を描く。引数は、左上角のx座標、左上角のy座標、横幅、縦高 ctx.fillRect(center_x - 80, center_y - 80, 80 * 2, 80 * 2); //ctx.fillRect(x, y, width, height) // 外枠の黒の四角を描く。引数は、左上角のx座標、左上角のy座標、横幅、縦高 ctx.strokeRect(center_x - 80, center_y - 80, 80 * 2, 80 * 2); //ctx.fillRect(x, y, width, height) // 1の赤の目を描く ctx.fillStyle = rgb(255, 0, 0) ; // 塗りつぶしは赤 ctx.storkeStyle = rgb(255, 0, 0) ; // 輪郭は赤 ctx.beginPath(); // cxt.arc(中心のx座標、中心のy座標、直径、始角ラジアン、終角ラジアン、反時計回り) ctx.arc(center_x, center_y, 16 * 2, 0, Math.PI * 2, true); ctx.fill(); // 塗りつぶし } draw_pip1(150, 105); 一度に振るサイコロの数の上限は3個にしたかった。でも普段使うサイコロの個数は2個。なので、2個で見栄えが良く、3個でぎゅうぎゅうなレイアウトにしました。
https://w.atwiki.jp/orewiki08/pages/14.html
ページリダイレクト html body onLoad=setTimeout( location.href= リンク先 ,ミリ秒) 指定時間経過秒後にジャンプ /body /html
https://w.atwiki.jp/aosora/pages/10.html
DOM形式でテーブルを作る。 //テーブル tbl = document.createElement( "TABLE" ); tbl.className = "table_class"; $( test ).appendChild(tbl); //テーブルBody tbd = document.createElement( "TBODY" ); tbl.appendChild(tbd); //行追加 row = document.createElement("TR"); tbd.appendChild(row); //セル追加 cell = document.createElement("TD"); row.appendChild(cell); //イメージ追加 imgobj = document.createElement( "IMG" ); imgobj.setAttribute("border","0"); imgobj.setAttribute("src","./images/error.gif"); cell.appendChild( imgobj ); //テキスト追加 countx = document.createTextNode(errorCount); cell.appendChild(countx);