JavaScript関連のことを調べてみた2022年08月18日

人事のおじさんプログラミングを学ぶ Day2「JavaScriptのファイルをHTMLファイルに読み込む」

書籍『確かな力が身につくJavaScript「超」入門 第2版』をKindleで購入。
JavaScriptのファイルをHTMLファイルに読み込んでみる。
うむ、わかりやすい。

jQueryを使ってテーブルの行をドラッグ&ドロップで並び替え

# 背景
ユーザーにより自分が好きな順番でtableの表示データーを設定できるように
`jQuery UI`の`sortable`を使用してHTMLのtable項目の並び順設定を作ってみました。

# 結果

# 環境
* jQuery: `1.8.3`
* jQuery UI: `1.8.24`

# 今回試したブラウザ
以下はテストしてみたブラウザのリストです。これ以外のブラウザにも対応できるかもしれません。
* Mozilla Firefox: `103.0.2`
* Chrome: `104.0.5112.79`
* Microsoft Edge: `104.0.1293.47`
* Safari: `15.6`

# ソースコード
## 並び替えたいHTMLのtableを用意する
“`html:html

元記事を表示

第2弾! html & css & javascript で かっこいいサイト を 作る[アニメーション]

https://qiita.com/caleb7023/items/bfa2b365d675616196a3

前回この記事が私にとって絶好だったので2弾目を作りました。
是非、LGTMお願いします。

—

最近サイトを作りました。
https://caleb7023.hmath.pro/
私のサイトはレンタルサーバーが高いので仕方なくgoogle sitesで作ってあります。
しかし、google sitesは自由度が低すぎるということで最近、
結局レンタルサーバーを借りてhtmlで作ろうと思っています。

しかしhtmlには弱点があります。
それは ***「専門知識が必要になる」*** ということです。
サイトの見栄えをよくしないと誰も来てくれません。
そこでサイトの見栄えをよくするアニメーションなどの作り方が書いてある
[動くwebデザインアイデア帳](https://coco-factory.jp/ugokuweb/)というサイトを参考に作っていこうと思います。

私が気に入ってるサイトです。

では、ここから役に立ちそうな背景のアニメーションを紹介していこうと思います。

元記事を表示

javascriptにおけるスコープについて

# 前置き
まずは以下のコードを実行するとどうなるでしょう。

~~~javascript:javascript
function count() {
for (var i = 1; i < 10; i++) { setTimeout(() => {
console.log(i)
}, i*100)
}
}
count()
~~~
このコードを実行すると、1, 2, 3, … 9を0.1秒間隔で出力すると思うけど、実は10が９回出力されます。
なぜこのような結果になったのでしょうか。
また、1, 2, 3, … 9を0.1秒間隔で出力させるためにはどのように修正すれば良いでしょうか。
これを説明するためにはこれから説明するスコープについて知る必要があります。

# 関数スコープとブロックスコープ
### 関数スコープ
~~~javascript:javascript
function someFn() {
if (true) {
var text = ‘foo’;
}

元記事を表示

【夏休み企画】#IT用語一問一答【毎朝投稿10日目】XHR

# この記事を読むと、、
– 「関連用語」を使って「XHR」を説明できるようになる
– 「XHR」がもっと好きになる(多分)

# 関連用語
Fetch API / Ajax

[**復習用**] 記事の内容を見る前に上記の言葉で「XHR」を説明してみよう！

# 企画説明
– クラウドって何？って人に聞かれて説明してるけど俺もよく知らないや、、
– ドキュメント読んでみてるけど半分くらい何言ってるか分かんない、、
– 今日の夕飯はナスの炒めものにしよっかな〜、あれ、NASってなんだっけ？

みたいなことが結構あったので、知ったかしていたIT用語を毎日一個ずつちゃんと学んでいこうっていう企画です！

昨日の記事はこちら↓

https://qiita.com/acta/items/4d0a30ff0ed6b9c9f766

# XHRとは
XHR = XMLHttpRequest = ブラウザからサーバーとデータをやり取りするためのAPI

– ブラウザのJavaScript環境で使える
– 実はHttpじゃないプロトコルでも使えるらしい
– 実はXMLじゃない形式でもデータをやり取り

元記事を表示

JavaScript_var、let、const変数宣言違い

“`js
・var,let,constの違いは
ブロックスコープ : let, const
関数スコープ : var
※ブロックは{}
例：

click me