[javascript]の記事一覧 | プログラミング好きなきょうゆうくんのブログ

Cross-Origin Resource Sharing（CORS）エラー

Cross-Origin Resource Sharing（CORS）エラーは ajaxでhttp portと別なportからの受信で起きてしまう。つまりオリジンの不一致が原因である。オリジン＝スキーム、ホスト、ポートの組み合わせ例としてajaxでpython pyramidを呼び出すケースがこのようなエラーとなり、回避には特別な手当が必要。【中古】 Ajaxポケットリファレンス／清野克行【著】【中古】afb 【中古】まるごとJavaScript＆Ajax(Vol．1) 達人に学ぶ最新テクニック／天野仁史(著者) 【中古】afb

2021.04.23

コメント(0)

javascriptのお勉強：jQueryって何？

javascriptで複雑な処理をライブラリ化したもの。以下が参考になりますjQueryってなに？超初心者向け入門講座jQueryの基本的な書き方を覚えよう！jQuery 初心者でも簡単に試せるサンプル（html ダウンロード可）【中古】jQuery逆引きマニュアル / 西畑一馬

2021.03.30

コメント(0)

javascriptのお勉強：document style変更

pタグ部分のクリックでstyle="color:red"が追加されます。【すぐに使えるクーポン有！2点で50円、5点で300円引き】ホームページに今すぐ活かせるJavaScript 【中古】

2021.03.29

コメント(0)

javascriptのお勉強：documentオブジェクト

documentオブジェクトにはオブジェクト、プロパティとメソッドがあります。ここには多くのサンプルソースがありコピペで即実行可能です。documentオブジェクトHTMLの要素を取得する! JavaScriptのdocumentプロパティの使い方DOM Scripting: Web Design With Javascript and the Document Object Model

2021.03.29

コメント(0)

javascriptのお勉強：グラフ作成

グラフを作成しました。Chart.jsでグラフを描画してみたを参考にさせてもらいました。実験サイトCSVファイルのデータをもとにグラフ作成Tips onloadは、ページとすべての画像などのリソース類を読み込んでから処理を実行するときに利用します XMLHttpRequestは、ブラウザとWEBサーバ間でデータの送受信を行う際に利用するオブジェクトです　　Chart.js はグラフを描画してくれる JavaScript の　　ライブラリです。<!DOCTYPE html><html lang="ja"><head> <meta charset="utf-8">　<title>graph</title> </head><body> <h1>graph</h1> <canvas id="graph_x"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script> <script> readData(); function readData(){ var req = new XMLHttpRequest(); req.open("get", "sample.csv", true); req.send(null); req.onload = function(){ trans(req.responseText); }} function trans(str){ var value_data = []; var tmp = str.split("\n"); for(var i=0;i<tmp.length;++i){ value_data[i] = tmp[i].split(','); } var ctx = document.getElementById("graph_x"); var graph_x = new Chart(ctx, { type: 'line', data: { labels: ['1', '2', '3', '4', '5', '6', '7' ], datasets: [ { label: '値', data: [value_data[0], value_data[1], value_data[2], value_data[3], value_data[4], value_data[5], value_data[6] ], borderColor: "rgba(255,0,0,1)", backgroundColor: "rgba(0,0,0,0)" } ], }, }); } </script></body></html>CSVファイル1046201597欲をいえば、このCSVデータをブラウザから入力できればいいですね。それと横軸のデータ数を可変にできればいいです。デジカメプリント携帯プリント自動補正仕上げ写真現像写真プリントデジカメ写真楽天市場写真プリント写真現像スマホ写真 iPhone写真【中古】JavaScriptグラフィックスゲ-ム・スマ-トフォン・ウェブで使う最新テクニック /オライリ-・ジャパン/ラファエル・チェコ (大型本)

2020.07.17

コメント(0)

javascriptのお勉強：jQuery 文字色を変える

jQueryで文字色を変える実験サイト html <!DOCTYPE html><html> 　<head> 　　　<meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 　　　<script src="example.js" type="text/javascript"></script> 　　　<title>テスト</title> 　</head> 　<body> 　　　<ul> 　　　　　<li id="example1">文字1</li> 　　　　　<li id="example2">文字2</li> 　　　　　<li id="example3">文字3</li> 　　　　　<li id="example4">文字4</li> 　　　　　<li id="example5">文字5</li> 　　　</ul> 　</body></html> js readyにより HTMLの読み込みが終わったら function()の中の処理を実行することになる $(document).ready(function(){ $("#example1").css("color","#d9534f"); $("#example2").css("color","#50D86D"); $("#example3").css("color","#5069D8"); $("#example4").css("color","#84D850"); $("#example5").css("color","#C4302B");}); 【中古】 jQuery逆引きマニュアル Webデザインの現場で役立つ基本と実践 / 西畑一馬, 中村享介, 徳田和規 / インプレス [単行本（ソフトカバー）]【宅配便出荷】【中古】現場で役立つjQueryデザインパーツライブラリ / 矢野みち子, KLEE, Atelier*Spoon, 棧敷友香子, 錦織幸知 / エムディエヌコーポレーション [単行本]【宅配便出荷】 jQuery and Ajax Tutorial【電子書籍】[ Su TP ] A DAN Z YE JQUERY DERSLER?A DAN Z YE JQUERY DERSLER?【電子書籍】[ sel?uk ?etiner ] 【中古】jQuery　Mobile辞典 / 林豊（1973−）

2020.07.11

コメント(0)

javascriptのお勉強：恐れることはない　＄マーク

javascriptで＄の意味がようやくわかりました。なんと単なる文字にすぎないということでした。＄＝”abc" moji="abc" としたとき　＄とmojiは同等ということです。 $moji="abc"も同じです。恐れる事なかれ　＄（ドルマーク） jQueryの別名で＄を使う場合があります。これが話をややこしくしている一要因です。よくわかるJavaScriptの教科書【中古】【中古】JavaScriptの新しい教科書 / 比留間和也（1981−）【中古】 JavaScript教科書 I・O　BOOKS／片山幸雄【著】【中古】afb ◆◆本当によくわかるJavaScriptの教科書はじめての人も、挫折した人も、基礎力が必ず身に付く / ENTACL GRAPHICXXX／著 / SBクリエイティブ

2020.07.11

コメント(0)

javascriptのお勉強：innerHTML

【中古】ASUS ノートパソコン VivoBook Pro（日本正規代理店品）超狭額ベゼル/15.6型/1TB+256GB SSD/Core i5/8GB/GTX1050搭載/N580VD-FY815T innerHTMLの例実験サイト Tips クリックされたら　　p id=testidのテキスト部分を書きかえ処理がある　function()　を呼びます。 Element オブジェクトの innerHTML プロパティは、要素内の HTML または XML のマークアップを取得したり設定したりします。（つまりは読んだり書いたりできるということです） <!DOCTYPE html><html><meta charset="utf-8"> <body> <p id="testid"">初期値です</p> <input type="button" value="クリック" onclick="testfunc()"> <script> var testfunc = function(){ var elem = document.getElementById("testid"); elem.innerHTML = "クリックされました"; } </script> </body></html> よくわかるJavaScriptの教科書【中古】

2020.07.10

コメント(0)

javascriptのお勉強：クリック先へ画像が移動

クリック先へ画像が移動します実験サイトソースコードはchromeでPF12キーでみてくだださい。 androidならurlの前にview-source:をつけてアクセスします【中古】 JavaScript辞典／アンク(著者) 【中古】afb 【中古】 CSS＆JavaScript表現アイデア帖／情報・通信・コンピュータ【中古】afb 【中古】ホームページ辞典 HTMLスタイルシートJavaScript 第3版 / アンク / 翔泳社 [単行本]【宅配便出荷】

2020.07.10

コメント(0)

javascriptのお勉強：自動画像変更（jQueryは無し）

ASUS 薄型軽量モバイルノートパソコン E203MA スターグレー E203MA-4000G ds-2187984【1000円OFFクーポン〜7/25 23:59】【Webカメラ搭載 Zoom対応】ノートパソコン office付き新品 SSD Windows10 軽量 14.1インチ WPS office Celeron 64GB + SSD 128GB メモリ 4GB フルHD ノートPC MAL-FWTVPC02BBLenovo　ノートパソコン　IdeaPad L340 81LG00THJP [グラナイトブラック]実験サイトTips組み込み関数とは、JavaScrip側であらかじめ用意してくれているオブジェクトのことです。Arrayオブジェクトは、組み込み関数の1つで、配列を扱う際に使います。jqueryは使いません。<!doctype html><html> <body> <img id="picture" src="jpg/sample1.jpg" width="600" height="400"> <script> var picture_table = new Array("jpg/sample1.jpg","jpg/sample2.jpg","jpg/sample3.jpg"); var index = -1; interval(); function interval(){ if (index == 2){ index = 0; } else { index ++; } //img id="picture" src="jpg/sample1.jpg"を //picture_table[index]で入れ替えます document.getElementById("picture").src=picture_table[index]; setTimeout("interval()",1000); } </script> </body></html>【中古】 JavaScript辞典／アンク(著者) 【中古】afb【中古】 CSS＆JavaScript表現アイデア帖／情報・通信・コンピュータ【中古】afb【中古】一週間でマスターするJavaScript Internet　Explorer　Netscape　Navigator対応 1　week　master　se 【中古】afb【中古】 TECHNICAL　MASTER　はじめてのJavaScriptプログラミング JavaScript1．5対応 Technical　master／川添真【中古】afb【中古】 JavaScript辞典／アンク(著者) 【中古】afb【中古】 CSS＆JavaScript表現アイデア帖／情報・通信・コンピュータ【中古】afb【中古】一週間でマスターするJavaScript Internet　Explorer　Netscape　Navigator対応 1　week　master　se 【中古】afb【中古】 TECHNICAL　MASTER　はじめてのJavaScriptプログラミング JavaScript1．5対応 Technical　master／川添真【中古】afb

2020.07.08

コメント(0)

javascriptのお勉強：jqueryのクリックイベント

jqueryのクリックイベントです↓実験サイトTips　　$(this)は「イベントが発生した要素」　　　ここでの$(this)はクリックイベントが　　　発生した<p>要素<!DOCTYPE html><meta charset="utf-8" /><html><head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script>$(function(){　//<p>要素をクリックしたら発動 $('p').click(function () { $(this).text("押されました"); });});</script> <head><body> <p><a href="#">押してください</a></p> </body></html>【中古】 jQuery逆引きマニュアル Webデザインの現場で役立つ基本と実践 / 西畑一馬, 中村享介, 徳田和規 / インプレス [単行本（ソフトカバー）]【宅配便出荷】【中古】現場で役立つjQueryデザインパーツライブラリ / 矢野みち子, KLEE, Atelier*Spoon, 棧敷友香子, 錦織幸知 / エムディエヌコーポレーション [単行本]【宅配便出荷】【中古】jQuery　Mobile辞典 / 林豊（1973−）【中古】 jQuery逆引きマニュアル Webデザインの現場で役立つ基本と実践／西畑一馬，徳田和規，中村享介【著】【中古】afb【中古】 jQueryポケットリファレンス jQuery1．4対応／鶴田展之【著】【中古】afb【中古】実践！Ajaxフレームワーク　jQuery ／古籏一浩【著】【中古】afb【エントリーでポイント10倍！（7月11日01:59まで！）】【中古】単行本(実用) ≪産業≫ 改訂版 Webデザイナーのための jQuery入門 / 高津戸壮【中古】afb

2020.07.08

コメント(0)

javascriptのお勉強：jQuery テキスト入力

実験サイト<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>テキスト</title> <script src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("jquery", "1.3"); function doInput(){ var txts = "入力文字は、" + $("#txtin").val() + "　です"; $("#message").text(txts); } </script> </head> <body> <h1 id="title">テキスト</h1> <p id="message">入力文字テスト</p> <br /><br /> <input type="text" id="txtin" /> <input type="button" onclick="doInput()" value="押す" /> </body></html>【中古】現場で役立つjQueryデザインパーツライブラリ / 矢野みち子, KLEE, Atelier*Spoon, 棧敷友香子, 錦織幸知 / エムディエヌコーポレーション [単行本]【宅配便出荷】【中古】 jQuery逆引きマニュアル Webデザインの現場で役立つ基本と実践 / 西畑一馬, 中村享介, 徳田和規 / インプレス [単行本（ソフトカバー）]【宅配便出荷】jQuery and Ajax Tutorial【電子書籍】[ Su TP ]A DAN Z YE JQUERY DERSLER?A DAN Z YE JQUERY DERSLER?【電子書籍】[ sel?uk ?etiner ]【中古】jQuery　Mobile辞典 / 林豊（1973−）

2020.07.07

コメント(0)

javascriptのお勉強：チェックボックス

実験サイト<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>チェックボックス</title> <script type="text/javascript"> function checkDo(){ var message = null; if (document.getElementById("check_box").checked){ message = "チェックあり"; } else { message = "チェックなし"; } message += "<br />"; //p id="content"のメッセージを入れ替える document.getElementById("content").innerHTML = message; } </script> </head> <body> <h1 id="title">チェック</h1> <p id="content">チェック</p> <input type="checkbox" id="check_box" /> <label for="check_box">どっち？</label> <br /> <input type="button" onclick="checkDo();" value="押す" /> </body></html>【中古】 JavaScript辞典／アンク(著者) 【中古】afb【中古】 CSS＆JavaScript表現アイデア帖／情報・通信・コンピュータ【中古】afb【中古】一週間でマスターするJavaScript Internet　Explorer　Netscape　Navigator対応 1　week　master　se 【中古】afb【中古】 TECHNICAL　MASTER　はじめてのJavaScriptプログラミング JavaScript1．5対応 Technical　master／川添真【中古】afb

2020.07.07

コメント(0)

javascriptのお勉強：セレクトボックス

セレクトボックスの処理です実験サイト<!DOCTYPE html><html><head> <meta charset="utf-8"/> <title>box select test</title></head><body><p>なきごえ　　 <span id="space1"></span></p><form name="form1"> <select name="animal1"> <option value="ぶうぶう">豚</option> <option value="わんわん">犬</option> <option value="にゃんにゃん">猫</option> </select></form><input type="button" value="押す" onclick="Btn1()"/><script>function Btn1(){ const animal1 = document.form1.animal1; const num = animal1.selectedIndex; const str = animal1.options[num].value; document.getElementById("space1").textContent = str; }</script>

2020.07.06

コメント(0)

javascriptのお勉強：ラジオボタン取得

ラジオボタンの選択を取得します。実験サイト<!DOCTYPE html><html><head> <meta charset="utf-8"/> <title>radio test</title></head><body><p>よみは？　　 <span id="space"></span></p><input type="radio" name="select2" value="やまだ" checked> 山田<input type="radio" name="select2" value="すずき" > 鈴木<input type="radio" name="select2" value="よしだ" > 吉田</br><input type="button" value="押す" onclick="Btn2()"/><script>function Btn2(){ name_value = ""; const select2 = document.getElementsByName("select2"); for (i = 0; i < select2.length; i++){ if(select2[i].checked){ name_value = select2[i].value; break; } } document.getElementById("space").textContent = name_value;}</script></body></html>

2020.07.06

コメント(0)

javascriptのお勉強：ボタンでfunction()

ボタンを押してfunction()実行の例です。実験サイト<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8"><title>function test</title></head><body><script>function func1(val1) {　alert(val1 + "歳です");}</script><p>クリックして下さい。</p><button onclick="func1(10)">小学生</button><button onclick="func1(13)">中学生</button><button onclick="func1(17)">高校生</button></body></html>

2020.07.06

コメント(0)

javascriptのお勉強：簡単なfunction()

JavaScriptのfunctionを基本から解説まずはこれを読んでから。functionの記述方式1.関数宣言で書く function abc(){ }2.関数式で書く var abc=function(){ }3.コンストラクタで書く var abc=new Function('text', 'console.log(text)');以下は関数宣言の例です。<!DOCTYPE html><html lang = "ja"> <head> <meta charset = "utf-8"> <title>JavaScriptの勉強</title> </head> <body> <script> function result(point) { if (point > 79) { document.write("おめでとうございます。合格です"); } else if (point > 69){ document.write("補欠です。辞退者待ちです"); } else { document.write("不合格です。"); } } result(80); </script> </body></html>

2020.07.06

コメント(0)

javascriptのお勉強：選択動画の再生

動画を選択して再生します。実験サイトソース<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8"><title>sample</title><script>function Start(){ document.getElementById("douga").play();}function Stop(){ document.getElementById("douga").pause();}function PlayFromFirst1(){ document.getElementById("douga").currentTime=0; document.getElementById("douga").play();}function SelectVideo(num) { htmltag = document.getElementById("douga"); switch (num) { case 1: htmltag.src = "./douga.mp4"; break; case 2: htmltag.src = "./douga1.mp4"; break; } }</script></head><body> <video id="douga" width="1500" height="600" > <source src="./douga.mp4" type="video/mp4"> </video><br /><h3>select and play</h3><button onclick="SelectVideo(1)">動画1</button><button onclick="SelectVideo(2)">動画2</button><button onclick="Start()">play</button><button onclick="Stop()">pause</button><button onclick="PlayFromFirst1()">restart</button></body></html>【中古】「簡単」ホームページの作り方必要なソフトから動画・音声の入れ方まで PHPビジネス選書／高川敏雄(著者) 【中古】afb

2020.07.06

コメント(0)

javascriptのお勉強：動画の再生

mp4の再生です。以下を利用させてもらいました。HTML5 video要素で動画ファイルを再生するサンプル以下をクリックすると動画のサンプルを再生します。実験サイトソースはedgeかchromeでソース表示すれば見えます。HTML5＋JavaScriptによる画像・動画像処理入門 [ 松田晃一 ]

2020.07.04

コメント(0)

javascriptのお勉強：背景切り替え

以下を利用させてもらいました。背景画像をスライドショーやフェードで切り替える【jQuery.BgSwitcher】ソースの階層は以下です-jpg_changer.html-js jquery.bgswitcher.js-jpg sample1.jpg sample2.jpg sample3.jpg以下の実験ページをクリックすれば見れます実験ページ↓↓【中古】現場で役立つjQueryデザインパーツライブラリ / 矢野みち子, KLEE, Atelier*Spoon, 棧敷友香子, 錦織幸知 / エムディエヌコーポレーション [単行本]【宅配便出荷】

2020.07.04

コメント(0)

javascriptのお勉強：DOMについての参考

DOMについての参考のURL 以下、初心者に理解しやすいと思ったサイト今更聴けない！？DOM操作 JavaScriptでDOMを操作する方法【初心者向け】 DOMとは　ドキュメントをオブジェクトツリー　としてプログラムから操作可能に　したもの。　HTMLやXML文書を取り扱うためのAPI 　document.getElementById（）が例です　オブジェクト　　データ（属性）と機能（手続き）　　をひとかたまりにした実体 DOM ツリー javascriptは人気の言語なのになぜか出版物が少ない。この本は、読みやすく理解しやすいような記述になっており最初に読んでほしい本です。 3日でマスターJavaScript[本/雑誌] / 伊藤静香/著

2020.06.08

コメント(0)