f@ctor

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

JavaScript関連のことを調べてみた2022年09月05日
目次

Javascript　画像を表示する方法

## はじめに
この記事は、「なんとなく理解できた」を目的としているため、正確性、具体性に欠ける表現がございます。

精度の高い情報を求めている方には向かないので、ご理解ください。

## 完成図

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1782859/9b77a65a-ff59-fb4d-d910-a44ca18583fa.png)

## 解説

コード

“`
var album = [
{gazou : ‘img/2.jpg’ , alto : ‘成功’},
{gazou : ‘img/1.jpg’ , alto : ‘2枚目’}
];

var image = document.createElement(‘img’);
image.setAttribute(‘src’, album[1].gazou);
image.setAttribute(‘alt’, album[0].alto);

var mainf = document.querySelec

元記事を表示

79.プロトタイプ

# prototypeとは
オブジェクトに存在する特別なプロパティ
コンストラクタ関数と合わせて使う
# prototypeのフロー
1.コンストラクタ関数を作成する
2.1.のコンストラクタからprototypeを呼び出す
3.コンストラクタ関数の手順通り、呼び出すところまでやる
# prototypeのメリット
1.簡単に処理を追加することができる
2.メモリの節約ができる
# 書き方
#### 1.コンストラクタ関数を作成
“`javascript
function Person(name,age){
this.name = name;
　　　　this.age = age;
　　　　this.intro = function(){
console.log(`私は${this.name}です${this.age}`)
}
}
“`
#### 2.1.のコンストラクタからprototypeオブジェクトに処理を格納する
“`javascript
Person.prototype.sayHello = function(){
console.log(`$

元記事を表示

77.78コンストラクター関数（クラスについて）

## コンストラクター関数とは
新しくオブジェクトを作成するための雛形となる関数
## メリット
オブジェクトを簡単に生成できる
## 主なフロー
1.関数を宣言する
2.オブジェクトを生成(インスタンス化)
3.実行する

## 書き方
1.関数を宣言する
“`javascript
function Person(name,age){
this.name = name;
this.age = age;
this.intro = function(){
console.log(`私は${this.name}です${this.age}`)
}
} 　
}
関数を作成するが
Personのnameという変数に名前を代入しておく
＊自分のなかでは A of B(AのB)を作る作業だと考えている
“`
2.オブジェクトを生成(インスタンス化)
“`javascript
const tani = new Person(“taniyan”,34);
console.log(tani.age)
“`
1.で作ったAのBの変数に代入して、オブジェクトを作る

元記事を表示

【Javascript】6.変数

# 前提知識
変数は数字や文字列を格納しておく箱
## 1.変数は値の意味を明示できる*値の意味はAとBはどちらがわかりやすい？
“`javascript:A
let snack = 120
let tax = 1.08
console.log(snack * tax) //console.logは（　）に入れた値を表示
“`
“`javascript:B
console.log(120 * 1.08) //console.logは（　）に入れた値を表示
“`
Aの方はお菓子の値段を消費税でかけた額というのが見たらわかるようになるね

## 2.変更が簡単
“`javascript:A
// 1995年には消費税が5%です
let snack = 120
let tax = 1.05
console.log(snack * tax) // 5%の時の消費税が表示される
// 2020年には消費税が10%です
tax = 1.10
console.log(snack * tax) // 10%の時の消費税が表示される
“`

“`javascript:B
console.l

元記事を表示

【Google MAP】クリックによる多地点間の距離を取得する(ルート考慮)

# はじめに

前回、以下の投稿をしました。

https://qiita.com/yoshi_yast/items/1cc5cc4ca1ef74de6170

今回は続きで、徒歩や自動車などの移動手段をもとにルートを考慮して、地点間の距離を求めてみたいと思います。参考にさせていただいたURLのほとんど載っていましたが、勉強のためカスタマイズさせながら作成したいと思います（感謝）

実際の移動に際しての距離とおおよその時間がわかるようになります。
もちろん、普通にGoogle MAPのサイトで経路検索をやればできますが、より簡素にできるようにするといった目的です。（車は検索時の渋滞情報も出してくれたり、複数候補を出してくれたりするので、より詳しい情報はそちらのほうが断然よいとは思いますが）

# 作成するもの
– クリックにより指定した(最大10カ所まで可能)多地点間の距離を求めます。
– 徒歩・自転車・車の場合、それぞれの距離と時間を表示します。
– いつでもボタン押下でクリア可能とします。

# プログラム
[作成したデモサイト](https://anotherskyjp.site

元記事を表示

最も凶悪な関数とは？【挑戦状第4弾・MVP発表】

# 先日、Twitter上でこんな大喜利企画を行いました

# 大喜利の内容

#### 【お題】
足し算関数に1行追加して凶悪にしてください

#### 【解答方法】
引用RTで解答お願いしますやで！

#### 【元となるコード】

“`ts
const add = (a: number, b: number): number => {
// ここに1行追加して、凶悪な関数にしてください。
return a + b
}
“`

—

第3弾まではちゃんとしたクイズだったのですが、もう完全に大喜利です。

> ワイ「もうクイズのネタが思いつきまへんわ・・・」
> ワイ「ガッツリ大喜利みたいな問題なら1個だけあるんですけど」
>
> 同僚「じゃあ、実験的にその問題で行ってみましょう！」

ということで、この問題になりました。

**この記事では、MVPの発表をして行きます。**

元記事を表示

Python,Ruby,PHP,Java,JavaScript,Perlの演算子の比較

Qiita > プログラミング言語の比較

Python,Ruby,PHP,Java,JavaScript,Perlの演算子の比較

# Python

https://qiita.com/G-Rape/items/cd3f2f284ba990164564

# Ruby

https://www.tohoho-web.com/ruby/operators.html

# PHP

https://qiita.com/mzmz__02/items/8bfbcf2cd48d9e9f2806

# Java

https://qiita.com/suema0331/items/7045e3ce3e2f5faa9acf

# JavaScript

https://qiita.com/uhyo/items/cc92a553059274d85403

# Perl

https://perlzemi.com/blog/20161005147566.h

元記事を表示

【JS初心者向け】変数の使い分け（let、const、var）

アウトプット用の記事です！
間違ってる点があったらごめんなさい<(_ _)>

# 変数の使い分け

JavaScriptの変数は、最もよく使われているだろうlet、constの２つ、そして最近ではあまり使われることがなくなったvarを加えた合計３つの変数あります。　　
この３つの変数の使い分けで困った人も多いと思います。本記事ではその使い分けについて解説していきます。

# それぞれの変数の特徴
特徴は以下の表のようになります。

| | 再代入 | 再宣言 | スコープ |ホイスティング
（変数の巻き上げ）|
| —– | —— | —— | ——– | ——————————– |
| let | 〇 | × | ブロック | × |
| const | × | × | ブロック | × |
| var | 〇

元記事を表示

TAB / Shift + TAB でインデントを上げ / 下げする実装

# はじめに
各種エディターやQiitaなどでもサポートされている、`TAB` もしくは `Shift` + `TAB`によるインデントを上げ下げする実装をしてみました。

[[JS] Tabキーによる移動を禁止してTabを入力する。](https://qiita.com/nisda/items/da1cc0cfdaebe789d047)
※ベース部分の実装は上記の記事を参考にさせていただきました。ありがとうございました?‍♂️
※また、今回はvueで実装してます。

# サンプル

– 今回作成したコンポーネント
“`vue:CommonTextArea.vue