約 2,903,230 件
https://w.atwiki.jp/mhikichi/pages/18.html
順次処理 基本プログラムとして、順次処理を学びます。 何か表示ができないと結果が確認できないので表示するプログラムから。 document.write("こんにちは"); documentは実行するウェブブラウザの内部を表します。 document.write で、ウェブブラウザの内部に何かを出力することができます。 ウェブブラウザで表示するので、HTMLタグを一緒に出力すると、飾り付けもできます。 document.write(" font color= red こんにちは /font "); これで赤色で表示されるはずです。HTMLには様々な色指定の方法がありますが、説明は他の書籍やサイトに譲ります。 途中で一時停止するためには alert という命令を使います。 alert("停止中") これを順次記述して、プログラムが上から順番に動作することを確認しておきましょう。 変数と計算 変数は数値等を入れておく入れ物です。 xという入れ物に10を入れる場合は var x=10; と書きます。var は変数であることを宣言します。代入に使う記号は=です。 変数の宣言と代入を同時に行っていますが、代入する値がその場では決まらないような場合には単独で使うこともあります。 var x; x=10; C言語やJavaでは変数の宣言には扱う数値の種類（型）を決定する必要がありますが、JavaScriptでは型がないので変数であることだけ宣言します。 実は宣言しなくても変数として使えますが、他の言語も意識して宣言するようにするのがお勧めです。 数学での計算式と同じように書くことができます。 例えばxに10を入れておいて、それに５を加えた結果をyに入れる文は以下のようになります。 var x=10; var y=x+5; 表示にはdocument.write命令を使います document.write(y); 変数の内容を表示するには、""で囲いません。""で囲うと文字列としてそのまま表示されます。 変数と文字列を組み合わせて表示したい場合は+で連結します。 document.write("y="+y); 完成したサンプルプログラムです。 練習 以下の練習課題を作成してみよう。 ２つの変数を用意して適当な数値で初期化する。２つの変数を足し算した結果を３つめの変数に代入する。結果を○○＋□□=△△の形式で表示する。
https://w.atwiki.jp/suffix/pages/1245.html
アドレスバーにjavascript alert( test )等のような形式で取得すると、内部のjavascriptに関係なく実行できる。 それをブックマークに登録できる形にしたものがブックマークレットである。 作り方はわりとシンプル。 1.javascript の後にjavascriptを普通に書く。 javascript //該当ページのDOM操作など、javascriptで実行したい内容を書く。 //ちなみに、document.getElementById("xxx").value="test"の要領で、 //値をセットした場合等に画面遷移してしまうことがある。 //http //ginpen.com/2013/12/04/bookmarklet/によると、 //末尾に;void 0をつけると良いらしい。 //または、void((function(undefined){})());のように書いてもOK。 2.1で書いたものを1行にする。 3.下記の形式で保存・表示し、 a タグのリンクをブックマークツールバーにドラッグアンドドロップする。 html body a href="2で書いたもの" ブックマーク用のリンク /a /body /html
https://w.atwiki.jp/sakutest/pages/12.html
https://w.atwiki.jp/mhikichi/pages/19.html
計算機 入力するプログラムの例として計算機を作ってみます。 このプログラムはこちらのJavaScript初心者入門講座を参考にさせていただきました。 入力用フォームはHTMLで作成する必要があります。 HTMLタブを開いて、以下のコードを入力します。 form name="form1" INPUT TYPE="text" NAME="txtA" + INPUT TYPE="text" NAME="txtB" = INPUT TYPE="text" NAME="txtC" br INPUT TYPE="button" NAME="btnCalc" value="計算" onclick="Calc()" /form 簡単に役割を説明すると、 フォーム全体の名前が form1 入力用のテキストフィールドの名前がそれぞれ、txtA, txtB, txtC ボタンの名前は btnCalc、ボタンの表示名は「計算」,ボタンを押したときに動くプログラム（関数）はCalc() です。 HTMLを書くと、入力画面だけはすぐに作ることができます。 JavaScriptタブを開いてプログラムを入力します。 function Calc() { } ボタンを押した時に動くプログラムをCalc()としましたので、Calc()関数を定義します。 function が関数の意味です。 { } の中にプログラム本体を書きます。 三つの変数を宣言しておきます。 var a; var b; var c; 一つ目の txtA から変数aに代入します。 a = document.form1.txtA.value; . は「の」に読み替えると分かりやすいです。 documentの中にある form1 の txtA の valueを変数aに入れます。 これで、txtAという名前を付けたテキストフィールドの値が a に入ります。 b = document.form1.txtB.value; もう一つのtxtBも同様な処理をした後に c = parseInt(a)+parseInt(b); parseInt() で()の中の文字を数値に変換して、足し算した結果を変数cに代入します。 document.form1.txtC.value=c; 今度は逆に変数cをtxtCに書き込みます。書き込む時は数値から文字に自動的に変換されます。 完成版のプログラムです 肥満度計算機 計算機のプログラムを改造します。jsdo.it環境の場合はForkという機能があり、プログラムの複製をすることが簡単にできます。 計算機プログラムを開いてForkボタンからForkしましょう。 以下の方針でプログラムを書きます 入力した値を数値に変換して変数に格納する その際、身長はcm単位で入力するが、計算ではm単位なので100で割ってm単位に変換する BMI指数を計算し結果を変数へ代入する 得られた結果を出力用のテキストボックスへ表示する HTMLタブを開いて、以下のコードを入力（Forkしたプログラムの修正）します。 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()" /form 計算機で使用したHTMLファイルの一部だけ変更しています。 フォーム全体の名前が form1 入力用のテキストフィールドの名前がそれぞれ、txtA, txtB, txtC ボタンの名前は btnCalc、ボタンの表示名は「計算」,ボタンを押したときに動くプログラム（関数）はCalc() JavaScriptタブを開いて、以下のコードを入力（Forkしたプログラムの修正）します。 a=parseFloat(document.form1.txtA.value)/100; b=parseFloat(document.form1.txtB.value); 計算機プログラムではテキストフィールドから変数に文字列のまま格納しましたが、今回はここで数値に変換します。 変数aは身長を入れるための変数です。身長はcm単位で入力しますが、BMI指数の計算ではm単位なので、単位変換のため100で割っています。 変数bは体重を入れるための変数です。kg単位で入力するので、そのまま数値に変換します。 parseFloat()は、文字列から小数値に変換する命令です。 BMI指数を計算する式は 体重÷(身長)2 です。 べき乗をかけ算に直して c = b/(a*a); これで完成です。 割り勘計算機 まずは基本的な機能で2人の割り勘を計算するプログラムを作ります。 計算機とほぼ同じプログラムですから、計算機をForkすると簡単です。 土台になるHTMLは以下の用に作成します。計算機から一部分だけ変更しています。 form name="form1" 一人目 INPUT TYPE="text" NAME="txtA" 円 BR 二人目 INPUT TYPE="text" NAME="txtB" 円 BR 合計 INPUT TYPE="text" NAME="txtSum" 円 br INPUT TYPE="button" NAME="calc" value="計算" onclick="Calc()" /form 計算機からの変更点は名称とNAMEが txtC → txtSum です。 フォーム全体の名前が form1 入力用のテキストフィールドの名前がそれぞれ、txtA, txtB, txtSum ボタンの名前は btnCalc、ボタンの表示名は「計算」,ボタンを押したときに動くプログラム（関数）はCalc() これで表示できる土台が出来上がりました。 続いてプログラムですが、以下のような方針で作成します。 合計値から数値として変数に代入する 合計値を2で割った値をそれぞれ2つの変数へ代入する。 2つの変数の内容を表示用ボックスに出力する 新しい変数sumを宣言します。 var sum; テキストボックスの名前が違いますが、やっていることは計算機と同じです。文字列なので、parseFloat()で小数値に変換しています。 sum=parseFloat(document.form1.txtSum.value); 得られた合計値を2で割って、それぞれの変数に代入します。 a = sum/2; b = sum/2; 最後に表示用のテキストボックスに入れて終了します。 document.form1.txtA.value=a; document.form1.txtB.value=b; 完成したプログラムは以下のようになります。 完成はしましたが、割り勘計算としては致命的な問題点があります。 それは、奇数の端数が出ると割り切れないので小数点が出る事です。 お金は1円単位でしか割れないので、その辺も考慮して計算方式を変更します。 考え方は以下のようにします。 割り切れない場合は1円未満を切り捨てして一人目の金額にする。 二人目の金額は合計から一人目の金額をマイナスした残りにする。 一人目は割り算して切り捨てします。Math.floor()は切り捨てをする命令です。 a = Math.floor(sum/2); 残りの金額は、合計の金額から一人目の金額をマイナスした残りです。 b = sum-a; 完成したプログラムを以下に示します。 練習 以下の練習課題を作成してみよう。 割り勘計算機をさらに改良して3人の割り勘計算をできるようにしましょう。もちろん、端数に小数が付かないように工夫してください。 単位変換計算機を作成してください。自分でHTMLのフォームも作成します。cm → m , km → m , mg → g , kg → g 等
https://w.atwiki.jp/tomokazu0525/pages/43.html
■javascriptがわかるとできること 「javascriptだけわかればできること」、「javascriptに加えて他の知識がわかればできること」の2つに分けるとすると、 残念ながら前者はほとんどない。 しかし、HTMLの基本的なルールがわかれば、できることは色々ある。 ０．動きのあるホームページがつくれる。 ⇒ほかに情報がいくらでもあるかと思うので省略。 １．ブラウザ用にブックマークレットをつくれる。 ブックマークレットとは 【bookmarklet】 - 意味/解説/説明/定義 ： IT用語辞典 勉強用メモ - ブックマークレットのつくりかた ２．greasemonkeyをいじれる。（たぶん） greasemonkeyとは、firefoxおよびchormeで使えるAdd-on。 firefox版 ３．ちょっとしたデスクトップアプリケーションを作れる。（HTA） HTMLとの併せ技なので、HTMLもわかる必要あり JavaScriptでかんたんHTAアプリに挑戦 - てっく煮ブログ ■javascriptを用いた開発の基本 まずは本を読んで基礎知識をつける。 Amazon.co.jp： 初めて学ぶJavaScript入門早わかり―魅力的なホームページを作ろう 堀 桂太郎 本 コメント：「javascriptって何？javaとjavascriptって違うの？」レベルの人が一冊目に買う本。廃刊になってしまったみたいだけど。 Amazon.co.jp： JavaScript 第5版 David Flanagan, 村上 列 本 コメント：分厚いくせに、これ一冊読んでもjavascriptマスターにはなれない。でも、これを読まないと始まらない。そんな本。 英語版は2010年5月あたりに第6版が出るみたい。 Amazon.co.jp： Ajaxライブラリ徹底活用 JavaScript Webプログラミング 掌田 津耶乃 本 勉強用メモ - [javascript]文法 http //www42.atwiki.jp/tomokazu0525/pages/53.html ■開発環境（javascriptを書くのに必要なソフトなど） テキストエディタだけでもプログラムを書けるけど、できるならより簡単に書きたい。 JavaScriptデバッガ、開発環境などに使えるツールのまとめ － Publickey 2009年4月28日の記事。 触れられている開発環境は以下のとおり大量。表にして整理してくれればなお良かった。 Firefox, Opera, Safari、WebKit, Firebug, Firebug Lite, Venkman、Webdeveloper, Visual Studio 2008 Express Editions, Microsoft Script Editor, Windows Script Debugger、Internet Explorer Developer Toolbar, DebugBar, Aptana Studio, Eclipse WTP, NetBeans, JSEclipse、Adobe Flex3, Spket IDE, TIDE 2, JSLint ⇒firebugを選択した。もともと、firefoxを使っていること、また友人がお勧めしていたのでわからないことがあれば彼に質問できる。 【firebug】 Firefox 3とFirebugで始めるJavaScript開発：第1回 Firebugの基礎知識と，Firebugを使った開発のメリット｜gihyo.jp … 技術評論社 ■javascript拡張機能（ライブラリ） Google AJAX Libraries API - Google Code # jQuery、 jQuery UI、Prototype、script.aculo.us、MooTools、Dojo、SWFObject、Yahoo! User Interface Library（YUI）、Ext CoreNew JavaScript-XPath をリリースしました！さあ、あなたも XPath を使おう！（解説付き） Yahoo! UI Library 3（YUI3）の基本（1/4）：CodeZine ■ほかのプログラミング言語やスクリプト言語との連携 javascriptからEXCELを呼び出す。 EXCELとの連携 エクセルからjavascriptを呼び出す。 勉強用メモ - VBA/jscript ここを編集 ページフッタ このページの1階層上のページ このページの1階層下のページ このページに含まれるタグ javascript このページへのアクセス数 今日： - 昨日： - これまで合計： -
https://w.atwiki.jp/dotcom/pages/101.html
JavaScript?がエラーになった。。。 どこがいかんのかわからーん！な時にステキなデバッカ発見。 FireFoxのFirebug。アドオンなのでFireFox上で使いますですはい。 何ができるの？インストール方法 使い方 使い勝手 何ができるの？ こちらをご覧になってー http //sir2.jugem.jp/?eid=15 インストール方法 FireFoxを起動する。 FireFox上で下のURLからダウンロード。 http //www.getfirebug.com/ FireFoxの拡張機能ウインドウが開くので言われたとおりにインストール FireFoxの再起動を聞かれるので再起動！ 使い方 FireFoxを起動する。 メニューバーの「表示」→「Firebug」をチェック またはステータスバーを表示して右下の○の中にチェックマークってのがあるのでそれクリック。未使用時は○の中にマイナスマークかも？ ブラウザの下40%くらいがFirebugのウインドウになっちゃうよ あとは検証したいページを開いてJavaScriptを実行。 エラーのときはConsoleタブを見るとエラー箇所を教えてくれます。 エラー場所をクリックするとソースが表示されちゃう。 使い勝手 まだちょとしかやってないからわからない。。。
https://w.atwiki.jp/pagat/pages/17.html
VBScript HTMLの処理(DOM操作など) TypeNameとShell.Applicationを使い起動済みのIEを探す VBScript + HTA（HTML Application）で Canvas を使う方法 お手軽OCRMODI が必要 Javascript Javascriptだけで分かち書き Closure Compiler List of languages that compile to JS JScriptの配列とVBScriptの配列(SafeArray)を相互変換する方法 WSHでjQueryを使う Javascriptで文字コード変換 UWSC サンプル Google App Script GASでお手軽にbotを作る方法 RMeCabによる自然言語処理 テキストマイニングの基礎 Sandbox Wandbox Go Playground PHP Sandbox JSFiddle Perl6 Javascript library JSter Javascriptライブラリカタログ CodeMirror 高機能エディタ
https://w.atwiki.jp/excalc/pages/19.html
ECMAScriptについての情報は以下を参照して下さい。 Ex電卓で実装されているECMAScriptは ECMA-262 3rd Edition に準拠します。 基本的にはJava Scriptからブラウザ関連や通信関連のクラス・関数を除去したものと考えて問題ありません。 Standard ECMA-262 Under Translation of ECMA-262 3rd Edition Ex電卓では以下のクラスが実装されています。 Array Boolean Date Error Function Number Object RegExp String Java Scriptについては以下を参照して下さい。 とほほのJavaScriptリファレンス トップページ
https://w.atwiki.jp/programming_note/pages/23.html
1. 上から１行づつ処理し、Scriptを実行するため、記載する順番が重要 2. ハッシュデータの加工 - 型(Library 等)への流し込み - 表示が基本 Step1. Libraryを用いた入力データの標準系の定義 Step2. 入力データを加工し、汎用形に流し込む Step3. 読み込み - 出力 # ?? return, write.document $document.ready() etc... return は 引数を定義 write.document() (= puts) により動的なHTMLを生成 イベントバンドラで出力を定義する # ★ユーザー情報に応じた出力ができることがJSのoriginality★ イベントバンドラ 変数/関数の宣言、処理はRuby に似ている 1. 上から１行づつ処理し、Scriptを実行するため、記載する順番が重要 2. ハッシュデータの加工 - 型(Library 等)への流し込み - 表示が基本 data1.series[0].data # データ操作は簡単 Step1. Libraryを用いた入力データの標準系の定義 data = {hash,array} 汎用性ある形にし、 script src = /xxx/xxx.js /script とファイルを外部化し、htmlをシンプルにする Step2. 入力データを加工し、汎用形に流し込む data.series.date[2] = [XX,XX,XX,XX] Step3. 読み込み - 出力 # ?? return, write.document $document.ready() etc... return は 引数を定義 write.document() (= puts) により動的なHTMLを生成 $document( ) イベントバンドラで出力を定義する # ★ユーザー情報に応じた出力ができることがJSのoriginality★ イベントバンドラ onclick ボタンタイプのフォーム要素をサポート input type="" name="" value="" onclick="js statument;" onmousedown, onmouseout onmouseover, onmouseout onchanve onload 変数/関数の宣言、処理はRuby に似ている var data1; data1 = { } var a = new Array() var square = function(x) { return x*x; / * 処理 * / }; document.write(square(10)); var highchart = function (x,y) {return "document.write(" + x*y; + ")"} highchart(19,19);
https://w.atwiki.jp/api_programming/pages/46.html
下位ページ Content 基本 要素の取得属性で選ぶ クラスを選ぶ 親要素、先祖要素親要素 先祖要素 子要素、子孫要素thisの子要素 n番目の要素を取り出す フィルタ(filter) 最初、最後 次の要素、前の要素 要素が取得できたか確認 要素の追加子要素に追加 prepend(), prependTo(), append(), appendTo() 要素の移動ある要素の後ろに移動 after(), insertAfter() ある要素の前に移動 before(), insertBefore() リストの最後の要素を取得する 要素の削除する 要素数 基本 jQuery("...") or $("...") 要素の取得 CSSのセレクタも同じ？ selector - jQuery日本語リファレンス jQuery – いろんなセレクタ指定方法＋αを覚えて、目的の要素をさくっと取得する - 1 n http //weboook.blog22.fc2.com/blog-entry-268.html 属性で選ぶ $("TAG[ATTRIBUTE= VALUE ]") 例えば $("input[name= newsletter ]") http //semooh.jp/jquery/api/selectors/%5Battribute+value%5D/ クラスを選ぶ .（ピリオド）を使う。TAGがなくても良い。 $("TAG.CLASS") .class - jQuery日本語リファレンス 親要素、先祖要素 親要素 $(element).parent() $(element).parent(val) 値(val)を設定することで、valに対応する親ならば返す、という処理にできる parent() - jQuery日本語リファレンス 先祖要素 $(element).parents() $(element).parents(val) ルート以外、全て取り出す parent() - jQuery日本語リファレンス 子要素、子孫要素 親要素の下に欲しい子孫要素を記述する。 $("先祖 子孫") $("子孫", "先祖") 直下（子）だけ取得する場合は を使用する。 $("先祖 子孫") A BBA BB $("ul li last") はBB $("ul li last") はBが返る $(a).children("~") .children( ) - jQuery入門 thisの子要素 $(子要素, this) で取得できる 先祖 子孫 - jQuery入門 n番目の要素を取り出す $(selector).eq(n) フィルタ(filter) コロン( ) $("TAG FILTER") 最初、最後 最初 $("TAG first") 最後 $("TAG last") 次の要素、前の要素 aの次の要素 a.next() aの次の要素（ただし、クラスがb） a.next(".b") もしも、aの次の要素がクラスbでなければ、何も選択されない。(要素が取得できたか確認) aの前の要素 a.prev() 要素が取得できたか確認 a = b.next(); if(a !== undefined) では弾けなかった。 if(a.get(0) !== undefined) では通った（はじけた） ここで分かるのは、b.next()にて、DOMエレメントの「集合」として返しているということ？ http //kihon-no-ki.com/check-existence-element-by-javascript-and-jquery 要素の追加 子要素に追加 prepend(), prependTo(), append(), appendTo() ある要素 A を 別の要素 B の子として移動する - B - A prepend(), prependTo()は子要素の最初に追加 $(B).prepend(A) $(A).prependTo(B) http //semooh.jp/jquery/api/manipulation/prepend/content/ http //js.studio-kingdom.com/jquery/manipulation/append http //api.jquery.com/append/ append(), appendTo()は子要素の最後に追加 $(B).append(A) $(A).appendTo(B) http //semooh.jp/jquery/api/manipulation/append/content/ 要素の移動 Manipulation - jQuery日本語リファレンス ある要素の後ろに移動 after(), insertAfter() ある要素 B を 別の要素 A の後ろに挿入する（A- B) $(A).after(B) $(B).insertAfter(A) ある要素の前に移動 before(), insertBefore() ある要素 A を 別の要素 B の前に挿入する（A- B) $(A).before(B) $(B).insertBefore(A) after,insertAfterから類推 .after() - jQuert入門 リストの最後の要素を取得する last を追加する $( ul#id li last ) ul#idの下に、更にulがネストされていて、li要素がある場合、これが返る。 要素の削除する $( ul ).empty() これは子要素を削除している $( ul ).remove() .remove()は、自分自身を削除している。しかし、 .empty().empty() .remove().remove() 要素数 $(selector).length length - jQuery日本語リファレンス