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

天気をTABの中でajaxから読み出す

ソースgithub実験サイトここをクリックルーチェと白の契約　5巻　特装版（ZERO-SUMコミックス） [ 御巫桃也 ]

2024.10.15

コメント(0)

html css tabの中でajaxでニュースを見る

すべてを一度で読み込みタブ選択により表示を分けます。ソース改善中github動かし方は一つ前の記事参照。ここが一つ前

2024.10.05

コメント(0)

いろんな画像がばらばら

以下をクリックバラバラ画像

2024.09.15

コメント(0)

javascript ２つの異なる画像表示

画像サイズを変更すると別画像が取得できます。640と641<!DOCTYPE html><html lang="ja"><head> <meta charset="UTF-8"> <title>Sample</title></head><body> <button onclick="buttonClick()">画像表示</button> <p id="content_area"></p> <p id="content_area1"></p><script> function buttonClick(){ let img_element = document.createElement('img'); img_element.src = 'https://picsum.photos/640/480'; img_element.width = 500; img_element.height = 400; let content_area = document.getElementById("content_area"); content_area.appendChild(img_element); let img_element1 = document.createElement('img'); img_element1.src = 'https://picsum.photos/641/480'; img_element1.width = 500; img_element1.height = 400; let content_area1 = document.getElementById("content_area1"); content_area1.appendChild(img_element1); } </script></body></html>

2024.09.14

コメント(0)

javascript 子要素の削除

<!DOCTYPE html><html lang="ja"><head> <meta charset="UTF-8"> <title>Sample</title></head><body> <button onclick="buttonClick()">picture</button> <button onclick="removeClick()">remove</button> <p id="content_area"></p> <script> function buttonClick(){ // img要素を作成 let img_element = document.createElement('img'); img_element.src = 'https://picsum.photos/640/480'; // 画像パス img_element.width = 500; // 横サイズ（px） img_element.height = 400; // 縦サイズ（px） // 指定した要素にimg要素を挿入 let content_area = document.getElementById("content_area"); content_area.appendChild(img_element); } function removeClick(){ let list_element = document.getElementById("content_area"); let remove_element = list_element.removeChild(list_element.firstElementChild); } </script></body></html>

2024.09.13

コメント(0)

javascript img display onclick

<!DOCTYPE html><html lang="ja"><head> <meta charset="UTF-8"> <title>Sample</title></head><body> <button onclick="buttonClick()">picture</button> <article id="content_area"> </article> <script> function buttonClick(){ // img要素を作成 let img_element = document.createElement('img'); img_element.src = 'https://picsum.photos/640/480'; // 画像パス img_element.width = 500; // 横サイズ（px） img_element.height = 400; // 縦サイズ（px） // 指定した要素にimg要素を挿入 let content_area = document.getElementById("content_area"); content_area.appendChild(img_element); } </script></body></html>

2024.09.12

コメント(0)

javascript change bgcolor by button

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> body{ background-color: rgb(255, 174, 0); } button{ font-size: 30px; } </style></head><body> <button onclick="changeColor();">背景色変更</button> <script> state=0; function changeColor() { if (state==0){ document.body.style.backgroundColor = 'red'; state=1; return; } if (state==1){ document.body.style.backgroundColor = 'blue'; state=2; return; } if (state==2){ document.body.style.backgroundColor = 'green'; state=0; return; } } </script></body></html>

2024.09.09

コメント(0)

javascript canvas lineto move

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #cw { position: relative; } body { margin: 20px; } </style></head><body> <canvas id="cw"></canvas> <script>const WIDTH = 800;const HEIGHT = 700;const canvas = document.createElement('canvas');canvas.width = WIDTH;canvas.height = HEIGHT;const context = canvas.getContext('2d');document.body.appendChild(canvas);class Art { constructor(param0) { this.param0 = param0; this.index =param0; this.state=0; } update() { if(this.index > 500){ this.index = this.param0; if(this.state==0){ this.state=1; }else{ this.state=0; } } this.index += 10; } render(context) { if(this.state==0){ context.beginPath(); context.moveTo(0, 0+this.index); context.lineTo(0, 100+this.index); context.lineTo(100, 100+this.index); context.lineTo(100, 0+this.index); context.fill(); }else{ context.beginPath(); context.moveTo(0+this.index, 0); context.lineTo(0+this.index, 100); context.lineTo(100+this.index, 100); context.lineTo(100+this.index, 0); context.fill(); } }}obj=new Art(0);function loop(timestamp) { context.clearRect(0, 0, WIDTH, HEIGHT); obj.update(); obj.render(context); window.requestAnimationFrame((ts) => loop(ts));}window.requestAnimationFrame((ts) => loop(ts)); </script></body></html>

2024.09.07

コメント(0)

javascript slot machine

ボタンをクリックすると<button>にoptionクラスが追加されます。ボタンに表示される数字は乱数で決まります。<!DOCTYPE html><html lang="en"><head> <title>Document</title> <style> button{ width: 40px; height: 40px; background-color: rgb(12, 12, 12); font-size: 30px; } .option{ animation:0.5s linear rotation0; animation-fill-mode: forwards; } @keyframes rotation0{ 0% { top: -10%; transform: translateX(0) rotateX(0) rotateY(0); } 100% { top: 100%; background-color: rgb(0, 255, 85); transform: translateX(0) rotateX(360deg) rotateY(0); } } </style></head><body><button id="base0" onclick="click0()">0</button><button id="base1" onclick="click1()">1</button><button id="base2" onclick="click2()">2</button><script> function click0() { const element = document.getElementById("base0"); if(element.classList.contains('option')){ element.classList.remove("option"); }else{ element.classList.add("option"); } const num = Math.floor(Math.random() * 10) element.textContent = num; } function click1() { const element = document.getElementById("base1"); if(element.classList.contains('option')){ element.classList.remove("option"); }else{ element.classList.add("option"); } const num = Math.floor(Math.random() * 10) element.textContent = num; } function click2() { const element = document.getElementById("base2"); if(element.classList.contains('option')){ element.classList.remove("option"); }else{ element.classList.add("option"); } const num = Math.floor(Math.random() * 10) element.textContent = num; }</script></body></html>

2024.09.02

コメント(0)

javascript classList add remove

最初<button id="base0" onclick="click0()">0</button><button id="base1" onclick="click1()">1</button>がボタンを押してクラスが追加されると<button id="base0" onclick="click0()" class="option">0</button><button id="base1" onclick="click1()" class="option">1</button>と変化する。ソース<!DOCTYPE html><html lang="en"><head> <title>Document</title> <style> button{ width: 40px; height: 40px; background-color: rgb(12, 12, 12); font-size: 30px; } .option{ animation:0.5s linear rotation0; animation-fill-mode: forwards; } @keyframes rotation0{ 0% { top: -10%; transform: translateX(0) rotateX(0) rotateY(0); } 100% { top: 100%; background-color: rgb(0, 255, 85); transform: translateX(0) rotateX(360deg) rotateY(0); } } </style></head><body><button id="base0" onclick="click0()">0</button><button id="base1" onclick="click1()">1</button><script> function click0() { const element = document.getElementById("base0"); if(element.classList.contains('option')){ element.classList.remove("option"); }else{ element.classList.add("option"); } } function click1() { const element = document.getElementById("base1"); if(element.classList.contains('option')){ element.classList.remove("option"); }else{ element.classList.add("option"); } }</script></body></html>

2024.09.02

コメント(0)

javascript animatoin and css animation both

<!DOCTYPE html><head> <title>circle</title> <style> #circle0{ position: absolute; top: 25px; left: 30px; width:400px; height:400px; border-radius:100%; box-sizing:border-box; border:20px dotted rgb(47, 0, 255); animation:3s linear infinite rotation0; } @keyframes rotation0{ 0%{ transform:rotate(0);} 100%{ transform:rotate(360deg); } } #cw{ position: absolute; top: 100px; left: 100px; } </style></head><body> <p id="circle0"></p> <canvas id="cw"></canvas> <script> const WIDTH = 800; const HEIGHT = 700; const canvas = document.createElement('canvas'); canvas.width = WIDTH; canvas.height = HEIGHT; const context = canvas.getContext('2d'); document.body.appendChild(canvas); class Circle { constructor(color,x, y, radius) { this.x = x; this.y = y; this.radius = radius; this.color=color; this.velocity = 2; this.state=0; } update() { if(this.radius > 70 ) { this.radius = 2 if(this.color==0){ this.color=1; }else if(this.color==1){ this.color=2; }else if(this.color==2){ this.color=3; }else if(this.color==3){ this.color=0; } }else{ this.radius += 2; } } render(context) { context.beginPath(); if(this.color==0){ context.fillStyle = 'rgb(255, 0, 0)'; // 赤色 }else if(this.color==1){ context.fillStyle = 'rgb(0, 0, 255)'; // 青色 }else if(this.color==2){ context.fillStyle = 'rgb(0, 255, 0)'; // 緑色 }else if(this.color==3){ context.fillStyle = 'rgb(100, 100, 100)'; // } context.arc(this.x, this.y, this.radius, 0, 2 * Math.PI); context.fill(); } } const objects = []; objects.push(new Circle(0,150,150, 40)); objects.push(new Circle(1,300,150, 40)); objects.push(new Circle(2,150,300, 40)); objects.push(new Circle(3,300,300, 40)); function loop(timestamp) { context.clearRect(0, 0, WIDTH, HEIGHT); objects.forEach((obj) =function(obj){ obj.update()}); objects.forEach((obj) => obj.render(context)); window.requestAnimationFrame((ts) =function(ts){loop(ts)}); } window.requestAnimationFrame((ts) =function(ts){loop(ts)}); </script></body></html>

2024.08.27

コメント(0)

javascript 4つのカラーサークル

<!DOCTYPE html><head> <title>circle</title></head><body> <canvas id="cw"></canvas> <script> const WIDTH = 800; const HEIGHT = 700; const canvas = document.createElement('canvas'); canvas.width = WIDTH; canvas.height = HEIGHT; const context = canvas.getContext('2d'); document.body.appendChild(canvas); class Circle { constructor(color,x, y, radius) { this.x = x; this.y = y; this.radius = radius; this.color=color; this.velocity = 2; this.state=0; } update() { if(this.radius > 70 ) { this.radius = 2 if(this.color==0){ this.color=1; }else if(this.color==1){ this.color=2; }else if(this.color==2){ this.color=3; }else if(this.color==3){ this.color=0; } }else{ this.radius += 2; } } render(context) { context.beginPath(); if(this.color==0){ context.fillStyle = 'rgb(255, 0, 0)'; // 赤色 }else if(this.color==1){ context.fillStyle = 'rgb(0, 0, 255)'; // 青色 }else if(this.color==2){ context.fillStyle = 'rgb(0, 255, 0)'; // 緑色 }else if(this.color==3){ context.fillStyle = 'rgb(100, 100, 100)'; // } context.arc(this.x, this.y, this.radius, 0, 2 * Math.PI); context.fill(); } } const objects = []; objects.push(new Circle(0,150,150, 40)); objects.push(new Circle(1,300,150, 40)); objects.push(new Circle(2,150,300, 40)); objects.push(new Circle(3,300,300, 40)); function loop(timestamp) { context.clearRect(0, 0, WIDTH, HEIGHT); objects.forEach((obj) =function(obj){ obj.update()}); objects.forEach((obj) => obj.render(context)); window.requestAnimationFrame((ts) =function(ts){loop(ts)}); } window.requestAnimationFrame((ts) =function(ts){loop(ts)}); </script></body></html>

2024.08.26

コメント(0)

javascript animation 3色の円

2024.08.24

コメント(0)

javascript appendchild

<!DOCTYPE html><html><head> <meta charset="utf-8"/> <title>appendchild</title></head><body> <button onclick="addChild()">追加</button><br> <div id="parent">親 <p>子</p> </div> <script> var parent = document.getElementById("parent"); function addChild() { var child = document.createElement("p"); child.innerText = "子追加"; child = parent.appendChild(child); } </script></body></html>

2024.08.22

コメント(0)

javascript querySelectorAll

<!DOCTYPE html><head></head><body><p>p0</p><p>p1</p><p>p2</p><script> var sel = document.querySelectorAll("p"); sel[0].innerHTML = "000"; sel[1].innerHTML = "111";</script></body></html>結果000111p2

2024.08.21

コメント(0)

javascript じわっとスライドショー

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>じわっと</title> <style> .jiwa { opacity: 0; } </style></head><body> <p>じわっと・スライドショー</p> <img id = "pic" src="9.jpg" class="jiwa" width=300px alt=""> <script> // フェード const jiwa = document.querySelector('.jiwa'); const jiwaKeyframes = { opacity: [0, 1], } const jiwaOptions = { duration: 2000, easing: 'ease', fill: 'forwards', } const img = [ "0.jpg", "1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg", "7.jpg", ]; let count = -1; jpgChange(); function jpgChange() { jiwa.animate(jiwaKeyframes, jiwaOptions); count++; if (count == img.length) count = 0; pic.src = img[count]; setTimeout("jpgChange()",2000); } </script></body></html>実験サイト

2024.07.19

コメント(0)

javascript animation カラフルボール

参考サイト<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>カラフル</title></head><body> <p style="color:rgb(255, 0, 170);font-size:30px;position: fixed;top:150px;left:120px;">カラフル</p> <canvas id="canvas" width="400" height="400"></canvas> <script> const canvas = document.getElementById("canvas"); const context = canvas.getContext("2d"); let rrr; const tama = { x: 200, y: 200, vx: 5, vy: 2, radius: 25, color1: "blue", color2: "red", color3: "green", color4: "yellow", paint1() { context.beginPath(); context.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true); context.closePath(); context.fillStyle = this.color1; context.fill(); }, paint2() { context.beginPath(); context.arc(this.y, this.x, this.radius, 0, Math.PI * 2, true); context.closePath(); context.fillStyle = this.color2; context.fill(); }, paint3() { context.beginPath(); context.arc(400-this.x, 400-this.y, this.radius, 0, Math.PI * 2, true); context.closePath(); context.fillStyle = this.color3; context.fill(); }, paint4() { context.beginPath(); context.arc(400-this.y, 400-this.x, this.radius, 0, Math.PI * 2, true); context.closePath(); context.fillStyle = this.color4; context.fill(); }, }; function paint() { context.clearRect(0, 0, canvas.width, canvas.height); tama.paint1(); tama.paint2(); tama.paint3(); tama.paint4(); tama.x += tama.vx; tama.y += tama.vy; tama.vy *= 0.99; tama.vy += 0.25; if ( tama.y + tama.vy > canvas.height - tama.radius || tama.y + tama.vy < tama.radius ) { tama.vy = -tama.vy; } if ( tama.x + tama.vx > canvas.width - tama.radius || tama.x + tama.vx < tama.radius ) { tama.vx = -tama.vx; } rrr = window.requestAnimationFrame(paint); } rrr = window.requestAnimationFrame(paint); tama.paint(); </script></body></html>実験サイト

2024.07.18

コメント(0)

javascript requestAnimationFrame

<!doctype html><html><head><meta charset="UTF-8"><title>アニメーション</title></head><body><main> <canvas id="canvas" width="800" height="500"></canvas></main><script> var canvas = document.getElementById("canvas"), ctx = canvas.getContext("2d"), cx = -30, cy = canvas.height / 2; rd=0; ctx.beginPath(); ctx.arc(cx, cy, 30, 0, Math.PI * 2); ctx.fillStyle = "#28a6c2"; ctx.fill(); ctx.closePath(); move(); function move() { cx += 1; if(rd>100){ rd=0; } rd+=1; if(cx > canvas.width + 30) cx = -30; ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.beginPath(); ctx.arc(cx, cy, 30+rd, 0, Math.PI * 2); ctx.fill(); ctx.closePath(); window.requestAnimationFrame(move); }</script></body></html>

2024.07.17

コメント(0)

javascript canvas で描画

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <canvas id="cw"></canvas> <script> const WIDTH = 800; const HEIGHT = 700; const canvas = document.createElement('canvas'); canvas.width = WIDTH; canvas.height = HEIGHT; const context = canvas.getContext('2d'); document.body.appendChild(canvas); class Art { constructor(param0) { this.param0 = param0; this.index =0; } render(context) { context.fillStyle = "#ffcc00"; let i; for(i=0;i<50;i++){ context.fillRect(i*20,this.index,5,5); context.fillRect(this.index,i*20,5,5); } if(this.index > 50*20){ this.index = 0; context.clearRect(0, 0, WIDTH, HEIGHT); } this.index += 1; } } let execution = () => { obj.render(context); } obj=new Art(0) let intervalId = setInterval(execution, 1);</script></body></html>

2024.07.14

コメント(0)

javascript canvas 正方形を動かす

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <canvas id="cw"></canvas> <script> const WIDTH = 800; const HEIGHT = 700; const canvas = document.createElement('canvas'); canvas.width = WIDTH; canvas.height = HEIGHT; const context = canvas.getContext('2d'); document.body.appendChild(canvas); class Art { constructor(param0) { this.param0 = param0; this.index =0; } render(context) { if(this.index==0){ //context.beginPath(); context.strokeRect(0,0,100,100); }else if(this.index==1){ context.strokeRect(100,0,100,100); }else if(this.index==2){ context.strokeRect(200,0,100,100); }else if(this.index==3){ context.strokeRect(300,0,100,100); }else if(this.index==4){ context.strokeRect(400,0,100,100); }else { } if(this.index > 5){ this.index = 0; } this.index += 1; } } let execution = () => { context.clearRect(0, 0, WIDTH, HEIGHT); obj.render(context); } obj=new Art(0) let intervalId = setInterval(execution, 100);</script></body></html>

2024.07.13

コメント(0)

javascriptでボタン操作

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>ボタンテスト</title></head><body><p id="p0">初期値</p><button id="btn0"> buttunタグ </button><input type="button" value="input タグ" onclick="func()"><script>//方法その１ buttonタグdocument.getElementById("btn0").onclick=function(){ document.getElementById("p0").textContent=("buttonタグ");}//方法その２　inputタグfunction func(){ document.getElementById("p0").textContent=("inputタグ");}</script></body></html>

2024.07.08

コメント(0)

丸い写真

HTML Canvasのインターフェイスのまとめ #2【canvas】ctx.arc()を使って円を描画する<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <canvas id="canid" width=200 height=200></canvas> <script> var canid = document.getElementById("canid"); var ctx = canid.getContext("2d"); ctx.beginPath(); ctx.arc(60, 60, 60, 0, 2*Math.PI, true); ctx.clip(); var image = new Image(); image.src = "1.jpg"; image.onload = function() { ctx.drawImage(image, 0, 0, canid.width, canid.height); } </script></body></html>

2024.06.28

コメント(0)

無名関数

【JavaScript入門】すぐわかる！無名関数とは

2024.06.14

コメント(0)

アロー関数

参考サイトarrow 　矢印allow 許す　これではない比較通常表記let sum = function(a,b){ return a+b; };アロー関数の表記let sum = (a,b) => { return a+b; };htmlで動くやつ<!DOCTYPE html><html lang="en"><head> <title>アロー関数</title></head><body><p>テスト</p><input type="text" maxlength="40" id="any"><p><input type="submit" value="実行" id="execute"></p><script> // function() document.getElementById("execute").onclick = ()=> { const indata = document.getElementById("any").value; document.write(indata);};</script></body></html>

2024.06.13

コメント(0)

javascript export importの記述

実際のサーバー環境でないと動作しない。index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body><script type="module"> import {morning, evening} from './greeting.js'; morning('太郎'); evening('花子'); </script></body></html>greeting.jsfunction morning(name) { alert(`おはよう, ${name}!`); } function evening(name) { alert(`こんばんは, ${name}!`); } export {morning, evening};

2024.05.25

コメント(0)

javascriptのお勉強：localstrage 日記帳　拡張

カレンダーから獲得した日付および日付nextをキーとしてLocalStrageへ格納しています。実験サイトソース

2024.03.29

コメント(0)

javascriptのお勉強：locatstrageによる日記帳

カレンダーから獲得した日付をキーとしてLocalStrageへ格納しています。実験サイト<html> <head> <meta charset="UTF-8"> <title>localStorageの日記</title> </head> <body> <h1>localStorageの日記</h1> <input type="date" id="date0" value="" onchange="load()"><br> <input type="button" value="書き込み" onclick="save()" ><br> <textarea name="example2" id="text1" value="" cols="50" rows="10"></textarea> <script type="text/javascript"> function load() { var keyData = document.getElementById('date0').value; var storageData = ""; if(!localStorage.getItem(keyData)) { storageData = "空"; } else { storageData = localStorage.getItem(keyData); } document.getElementById('text1').value=storageData; } function save() { var keyData = document.getElementById('date0').value; var storageData = document.getElementById('text1').value; localStorage.setItem(keyData, storageData); } </script> </body></html>

2024.03.27

コメント(0)

javascriptのお勉強：LocalStrageのテスト　key付

実験サイト<html> <head> <meta charset="UTF-8"> <title>localStorageのテスト</title> </head> <body> <h1>localStorageのテスト key付き</h1> <input type="button" value="書き込み" onclick="save()" > key<input id="key0" type="text" value="initial_key"> data<input id="text1" type="text" value="1234"><br> <input type="button" value="読み出し" onclick="load()" > out<input id="text2" type="text" value="...."> <script type="text/javascript"> function load() { var keyData = document.getElementById('key0').value; var storageData = ""; if(!localStorage.getItem(keyData)) { storageData = "空"; } else { storageData = localStorage.getItem(keyData); } document.getElementById('text2').value=storageData; } function save() { var keyData = document.getElementById('key0').value; var storageData = document.getElementById('text1').value; localStorage.setItem(keyData, storageData); } </script> </body></html>

2024.03.26

コメント(0)

javascriptのお勉強： localStorageのテスト

ローカルストレージってどこにある？各ブラウザでWebStorage（LocalStorage）を確認する方法ブラウザごとに別の場所に格納されます。<html> <head> <title>localStorageのテスト</title> </head> <body> <h1>localStorageのテスト</h1> <input id="text1" type="text" value="1234"><br> <input id="text2" type="text" value="...."> <p> <input type="button" value="書き込み" onclick="save()" > <input type="button" value="読み出し" onclick="load()" > </p> <script type="text/javascript"> function load() { var storageData = ""; if(!localStorage.getItem('storageData')) { storageData = "空"; } else { storageData = localStorage.getItem('storageData'); } document.getElementById('text2').value=storageData; } function save() { var storageData = document.getElementById('text1').value; localStorage.setItem('storageData', storageData); } </script> </body></html>実験サイト

2024.03.24

コメント(0)

javascriptのお勉強：ajaxで天気予報地域を選択

実験サイトajax参考<!DOCTYPE html><html lang="ja"><head> <meta charset="UTF-8"> <title>Ajax</title> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script></head><body> <label for="area">地域を選択してください</label><select id="area"> <option value="020000">青森県</option> <option value="050000">秋田県</option> <option value="030000">岩手県</option> <option value="040000">宮城県</option> <option value="060000">山形県</option> <option value="070000">福島県</option> <option value="080000">茨城県</option> <option value="090000">栃木県</option> <option value="100000">群馬県</option> <option value="110000">埼玉県</option> <option value="130000">東京都</option> <option value="120000">千葉県</option> <option value="140000">神奈川県</option> <option value="200000">長野県</option> <option value="190000">山梨県</option> <option value="220000">静岡県</option> <option value="230000">愛知県</option> <option value="210000">岐阜県</option> <option value="240000">三重県</option> <option value="150000">新潟県</option> <option value="160000">富山県</option> <option value="170000">石川県</option> <option value="180000">福井県</option> <option value="250000">滋賀県</option> <option value="260000">京都府</option> <option value="270000">大阪府</option> <option value="280000">兵庫県</option> <option value="290000">奈良県</option> <option value="300000">和歌山県</option> <option value="330000">岡山県</option> <option value="340000">広島県</option> <option value="320000">島根県</option> <option value="310000">鳥取県</option> <option value="360000">徳島県</option> <option value="370000">香川県</option> <option value="380000">愛媛県</option> <option value="390000">高知県</option> <option value="350000">山口県</option> <option value="400000">福岡県</option> <option value="440000">大分県</option> <option value="420000">長崎県</option> <option value="410000">佐賀県</option> <option value="430000">熊本県</option> <option value="450000">宮崎県</option> <option value="460100">鹿児島県</option> </select><div><input type="button" value="予報を見る" onclick="checkButton()"></div> <p class= "output2"></p><script> function checkButton(){ $(function(){ var url = "https://www.jma.go.jp/bosai/forecast/data/overview_forecast/"+area.value+".json"; $.ajax({ type: "GET", url: url, dataType: "json", // 取得に成功したときの処理 success:function(data){ console.log(JSON.stringify(data, null, 2)); const data_text = data.text; //data.キー名で値を参照 $(".output2").html("<p>"+data_text+"</p>"); }, // 完了したときの処理 complete:function(){ console.log("通信が完了しました。"); }, // 失敗したときの処理 error:function(){ console.log("通信に失敗しました。"); } }); }); }; </script></body></html>2024.06.01 : 予報エリアをtextareaとした。

2024.03.16

コメント(0)

javascriptのお勉強：ajaxで天気予報(東京都）

実験サイト<!DOCTYPE html><html lang="ja"><head> <meta charset="UTF-8"> <title>Ajax</title> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script></head><body> <p class= "output2"></p><script> $(function(){ const url = "https://www.jma.go.jp/bosai/forecast/data/overview_forecast/130000.json"; $.ajax({ type: "GET", url: url, dataType: "json", // 取得に成功したときの処理 success:function(data){ console.log(JSON.stringify(data, null, 2)); const data_text = data.text; //data.キー名で値を参照 $(".output2").html("<p>"+data_text+"</p>"); }, // 完了したときの処理 complete:function(){ console.log("通信が完了しました。"); }, // 失敗したときの処理 error:function(){ console.log("通信に失敗しました。"); } }); }); </script></body></html>

2024.03.15

コメント(0)

javascriptのお勉強：マウスオーバーでチェックオン

クリックをシミュレートします。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <form> <input type="checkbox" id="check1" onmouseover="Function1()"> </form><script> function Function1() { document.getElementById("check1").click(); }</script></body></html>

2024.03.14

コメント(0)

javascriptのお勉強：ローカルファイルにテキスト書き込み

<!DOCTYPE html><html> <head> <meta charset="utf-8"/> </head> <body> <label>ファイル書き込みテスト</label> <input type="text" id="call" value="初期値" onchange="textchange()" > <br /> <br /> <div id="message_a"></div> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script language="javascript" type="text/javascript"> // イベントハンドラー function textchange() { var call = document.getElementById("call").value; var message = ""; message = call.toUpperCase(); document.getElementById("message_a").innerHTML = message; download_txt("test.txt", message); } // イベントハンドラーを対応付ける document.getElementById("call").onchange = textchange; function download_txt(file_name, data) { const blob = new Blob([data], {type: 'text/plain'}); const url = URL.createObjectURL(blob); const a = document.createElement("a"); document.body.appendChild(a); a.download = file_name; a.href = url; a.click(); a.remove(); URL.revokeObjectURL(url); }</script></body></html>

2024.03.11

コメント(0)

javascriptのお勉強：画像へジャンプ

実験サイト<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>画像ジャンプ</title> </head> <body> <h1>ジャンプ</h1> <div id="top"></div> <p> <img src="./jpg/0.jpg" width="30"></a> <a href="#link0">画像0へジャンプ</a> <img src="./jpg/1.jpg" width="30"></a> <a href="#link1">画像1へジャンプ</a> </p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <img id="link0" src="./jpg/0.jpg" width="300"></a> <a href="#top">先頭</a> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <img id="link1" src="./jpg/1.jpg" width="300"></a> <a href="#top">先頭</a> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> <p> aaaaaaaa</p> </body></html>

2024.03.06

コメント(0)

javascriptのお勉強： canvasに画像を重ねる

<html><body><canvas id="canvas"></canvas></body><script> const canvas = document.getElementById("canvas"); let imagePath = "jpg/0.jpg"; draw(canvas,imagePath); function draw(canvas,imagePath){ const image = new Image(); image.addEventListener("load",function (){ canvas.width = image.naturalWidth; canvas.height = image.naturalHeight; const ctx = canvas.getContext("2d"); ctx.drawImage(image, 0,0,canvas.width,canvas.height, 0,0,canvas.width/6,canvas.height/6 ); ctx.drawImage(image, 0,0,canvas.width,canvas.height, 200,200,canvas.width/6,canvas.height/6 ); }); image.src = imagePath; } </script></html>

2024.03.04

コメント(0)

javascriptのお勉強： ajaxを２つ起動

実験サイト

2024.03.01

コメント(0)

javascriptのお勉強： ajax スライドショー

サーバー側画像はphpで集めます。php<?php// ファイル$files = glob('../jpg/*.jpg');$imax=count($files)-1;$ran=rand(0,$imax);$i=0;foreach ($files as $key => $value) { if($i==$ran){ $file_name=$value; break; } $i++;}$type = 'image/jpeg'; // base64エンコード$img = base64_encode(file_get_contents($file_name));// Ajax応答データ$list = array("img" => $img, "type" => $type);// JSONデータを出力echo json_encode($list);exit();?>実験サイト

2024.02.29

コメント(0)

javascriptのお勉強： ajax テキスト受信の繰り返し

<!DOCTYPE html><html lang="ja"><head> <meta charset="UTF-8"> <title>Ajax</title> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script> function get_text() { $.ajax({ url: "loop_test.php", async: true, success: function(data) { console.log("======>succes"); document.write(data); document.write("<br>"); } }); } $(document).ready(function() { console.log("======>interval in"); setInterval(get_text, 1000); }); </script></head><body></body></html>実験サイト

2024.02.29

コメント(0)

javascriptのお勉強：thisの例

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <input type="text" onchange="func(this)"><script>function func(obj){ alert(obj.value);}</script></body></html><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <button type=”button” onclick="func(this)">ボタン</button> <script>function func(obj){ alert(obj.textContent);}</script></body></html>

2024.02.22

コメント(0)

javascriptのお勉強：画像プレビュー

実験サイト参考参考サイト

2024.02.19

コメント(0)

ajax JSONオブジェクト受信

html<!DOCTYPE html><html><head> <meta charset="utf-8"> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <title>Ajax Sample1</title></head><body> 名前 : <input type="text" id="name" /> <button id="btn">SEND</button> <div><br></div> <div id="res">JSONオブジェクト表示</div> <script> $(function(){ $("#btn").on("click", function(event){ name = $("#name").val(); $.ajax({ type: "POST", url: "send.php", data: { "name" : name }, dataType : "json" }).done(function(rcvdata){ $("#res").text(JSON.stringify(rcvdata)); }).fail(function(XMLHttpRequest, textStatus, error){ alert(error); }); }); }); </script></body></html>php<?php $name = filter_input(INPUT_POST, 'name'); $list = array("name" => $name); header("Content-type: application/json; charset=UTF-8"); echo json_encode($list); exit;

2024.02.18

コメント(0)

まちがえやすいajax functionの引数

$.ajax({ type: 'POST', url: 'send.php', dataType: 'text', /* 受信データの型*/ data: { /* 送信データ */ 'input_name': $input_name.val(), 'input_mail': $input_mail.val(), 'input_title': $input_title.val(), 'input_content': $input_content.val() }, success: function(data) { alert(data); }, error: function(error) { alert('エラーが起きまた。'); } });functionの引数dataは受信データです！送信dataと切り分けるため success: function(receive_data) { alert(receive_data);と書いたほうがいいでしょう。

2024.02.17

コメント(0)

javascriptのお勉強：テキストボックスからテキストボックス

送信０：上のテキストから下へ送信１：下のテキストから上へ<!DOCTYPE html><html lang="ja"><head><meta charset="UTF-8"><title>input to out</title></head><body> <input id="text0" type="text" size="80" value="あいうえお" /> <input type="button" value="送信0" onclick="inData0()" /><br> <input id="text1" type="text" size="80" value="abcdefgh" /> <input type="button" value="送信1" onclick="inData1()" /> <script> function inData0() { text = document.getElementById("text0"); text1.value=text.value; } function inData1() { text = document.getElementById("text1"); text0.value=text.value; }</script></body></html>実験サイト

2024.02.15

コメント(0)

javascriptのお勉強： base64 encode decode

javascriptのみで実行<!DOCTYPE html><html lang="ja"><head><meta charset="UTF-8"><title>input to out</title></head><body><input id="text0" type="text" size="50" value="" /> <input type="button" value="送信" onclick="inData0()" /><br> <div id="outdata0"></div> <input id="text1" type="text" size="50" value="" /> <input type="button" value="送信" onclick="inData1()" /> <div id="outdata1"></div><script> function inData0() { text = document.getElementById("text0"); indataText = btoa(unescape(encodeURIComponent(text.value))); outdata0.innerText = indataText; } function inData1() { text = document.getElementById("text1"); indataText = decodeURIComponent(escape(atob(text.value))); outdata1.innerText = indataText; }</script></body></html>実験サイト

2024.02.15

コメント(0)

javascriptのお勉強：エンコードbase64

php+javascript実験サイト

2024.02.14

コメント(0)

javascriptのお勉強：base64をデコードする

javascript + php実験サイト

2024.02.14

コメント(0)

javascriptのお勉強：ajaxでbase64を確認する

js<html><head><meta charset="utf-8"><title>test canvas</title><script src="https://code.jquery.com/jquery-3.4.1.min.js"></script><script type="text/javascript">//ページロード時イベント$(function() { $("#button").click(function(event){ $.ajax({ type: "POST", url: "base64.php", data: { key: "44OA44Kk44Ko44OD44OI44GM5Yq55p6c44KS6KGo44GX44G+44GZ" }, dataType : "text" }).done(function(data){ $("#result").text(data); }).fail(function(XMLHttpRequest, textStatus, errorThrown){ alert(errorThrown); });});});</script></head><body> <h2>base64 test</h2> <button id="button">実行</button><br> <input type="hidden" id="test1" name="text1" size="5" value=""><br> <div id="result"></div> <br /></body></html>php<?php$id1 = $_POST['key'];$ide=base64_decode($id1); echo ($ide);?>結果実行ダイエットが効果を表します

2024.02.14

コメント(0)

javascriptのお勉強：ボタンで画像をランダムに表示

実験サイト

2024.02.06

コメント(0)

javascriptのお勉強：innerhtmlで画像表示

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <button type=”button” id="sample0" onclick=buttonText0()>クリック0</button> <button type=”button” id="sample1" onclick=buttonText1()>クリック1</button> <p id="pid0"> </p> <p id="pid1"> </p> <script> function buttonText0 () { var pppp = document.getElementById('pid0'); pppp.innerHTML="<img src=\"http://snc29654.php.xdomain.jp/jpg/33.jpg\" width=\"300px\">" ; } function buttonText1 () { var pppp = document.getElementById('pid1'); pppp.innerHTML="<img src=\"http://snc29654.php.xdomain.jp/jpg/1.jpg\" width=\"300px\">" ; } </script></body></html>innerhtmlを使わなくても、以下で同じ結果となる<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <button type=”button” id="sample0" onclick=buttonText0()>クリック0</button> <button type=”button” id="sample1" onclick=buttonText1()>クリック1</button><br> <img src="" width="300px" id="pid0"><br> <img src="" width="300px" id="pid1"> <script> function buttonText0 () { var pppp = document.getElementById('pid0'); pppp.src="http://snc29654.php.xdomain.jp/jpg/33.jpg"; } function buttonText1 () { var pppp = document.getElementById('pid1'); pppp.src="http://snc29654.php.xdomain.jp/jpg/1.jpg"; } </script></body></html>

2024.02.04

コメント(0)

javascriptのお勉強：ボタンクリックでp tagを変える

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <button type=”button” id="sample0" onclick=buttonText0()>クリック0</button> <button type=”button” id="sample1" onclick=buttonText1()>クリック1</button> <p id="pid0"> </p> <p id="pid1"> </p> <script> function buttonText0 () { var pppp = document.getElementById('pid0'); pppp.innerHTML="click後のテキスト0"; } function buttonText1 () { var pppp = document.getElementById('pid1'); pppp.innerHTML="click後のテキスト1"; } </script></body></html>

2024.02.03

コメント(0)