javascript一覧 - つぶデコジェネレーターメーカー

ハクト@WEBエンジニア

hakuto00

複数削除する場合は以下。
jQuery:
$('#id').removeClass('class1 class2');

JavaScript:
el.classList.remove('class1','class2');

#jquery
#javascript
#駆け出しエンジニアと繋がりたい
 #プログラミング勉強中

$('#id').removeClass('class');jQueryクラスを削除する方法let el=document.getElementById('id');
el.classList.re

ハクト@WEBエンジニア

hakuto00

複数追加する場合は以下
jQuery:
$('#id').addClass('class1 class2');

JavaScript:
el.classList.add('class1','class2');

#jquery
#javascript
#駆け出しエンジニアと繋がりたい
 #プログラミング勉強中

$('#id').addClass('class');jQueryクラスを追加する方法let el=document.getElementById('id');
el.classList.add('

ハクト@WEBエンジニア

hakuto00

IEで使う場合はgetAttribute、setAttributeを使いましょう。

#jquery
#javascript
#駆け出しエンジニアと繋がりたい
 #プログラミング初心者

$('#id').data('name');　　　　 //取得
$('#id').data('name','yamada'); //設定jQuerydata属性の取得・設定let elem=do

ハクト@WEBエンジニア

hakuto00

jQueryシンプル

#jquery
#javascript
#駆け出しエンジニアと繋がりたい
 #プログラミング初心者

$('#id').css('color');jQuery要素のスタイルを取得する方法var elem = document.getElementById("id");
window.getCompu

ハクト@WEBエンジニア

hakuto00

属性値の取得、設定はJavaScriptも直感的で覚えやすいですよね。
取得:getAttribute
設定:setAttribute

#jquery
#javascript
#駆け出しエンジニアと繋がりたい
 #プログラミング初心者

$('#id').attr('src', 'test.jpg');jQuery属性値を要素に設定する方法document.getElementById('id').setAttribute('src'

ハクト@WEBエンジニア

hakuto00

jQueryとJavaScriptの違い

#jquery
#javascript
#駆け出しエンジニアと繋がりたい
 #プログラミング初心者

$('#link').attr('href');jQuery属性値を取得する方法document.getElementById('link').getAttribute('href');javaScr

ハクト@WEBエンジニア

hakuto00

document.querySelector('html body')
でも取得できます

#jquery
#javascript
#駆け出しエンジニアと繋がりたい
 #プログラミング初心者

$('body');jQuerybody要素を取得する方法document.body;
or
document.getElementsByTagName('body'

ハクト@WEBエンジニア

hakuto00

jQueryは
$iframe.contents().find('div')

javascriptは
iframe.contentDocument.querySelectorAll('div')

などで参照できます。

#jquery
#javascript
#駆け出しエンジニアと繋がりたい
 #プログラミング初心者

$iframe.contents();jQueryiframe内の要素を参照するiframe.contentDocument;

// IE7以下の場合
iframe.contentWindow

ハクト@WEBエンジニア

hakuto00

clickイベントなどで、radioボタンの何番目が押されたか調べたい場合などに使えます。

#jqueryとjavascriptの比較
 #駆け出しエンジニアと繋がりたい
 #プログラミング初心者

$(e.currentTarget).index('.radio');
jQuery要素の順番を取得Array.prototype.indexOf.call(document.querySelect

ハクト@WEBエンジニア

hakuto00

「function a()」は「巻上げ」というJavaScriptの仕様により、関数の先頭で宣言されたのと同じように動作します。

「var a=function()」の場合、変数のみが巻き上げられるのでエラーとなります。

#javascript
#駆け出しエンジニアと繋がりたい
 #プログラミング初心者

違いは何？JavaScript function a(){}a(); // helloが出力される
function a(){
　console.log('hello');
}

var a

ハクト@WEBエンジニア

hakuto00

見つかった場合(0以上)、見つからなかった場合
PHP:false
JavaScript:-1

を返すので、文字列の存在を判定する場合は

PHP:if (strpos(string,'oo')!==false)
JavaScript:if(strpos(string,'oo')!==-1)

となります

#PHP
#javascript
#駆け出しエンジニアと繋がりたい
 #プログラミング初心者

string = 'foo';
echo strpos(string,'oo');//1PHP特定文字列の位置を取得するlet string='foo';
console.log(string.i

ハクト@WEBエンジニア

hakuto00

要素にidが付いてたら
document.getElementById('id').value
でも取得できます

#jqueryとjavascriptの比較
 #駆け出しエンジニアと繋がりたい
 #プログラミング初心者

$('#id').val();jQueryinputなどフォーム要素のvalue値を取得する方法document.querySelector('#id').value;javaScript

ハクト@WEBエンジニア

hakuto00

クロージャーの特徴として
・グローバル変数の回避
・オブジェクトの変数(cnt)やメソッドが他のプログラムから変更されない
・クラスみたいな使い方ができる（継承やコンストラクタはなし）
といったことが挙げられます

#javascript
#駆け出しエンジニアと繋がりたい
 #プログラミング初心者

違いは何？JavaScript 通常の関数var cnt = 0;
function countUp() {
cnt++;
console.log(cnt);
};

co

ハクト@WEBエンジニア

hakuto00

同じ階層の直後の要素を取得します

#jqueryとjavascriptの比較
 #駆け出しエンジニアと繋がりたい
 #プログラミング初心者

$('#id').next();jQuery直後の兄弟要素を取得する方法document.getElementById("id"). nextElementSiblingjavaScript

ハクト@WEBエンジニア

hakuto00

location.replaceは履歴に残らないので、ブラウザの戻るボタンなどでページに戻ることができなくなります。

自動でリダイレクトする場合など戻る必要のないページに利用できますね。

#javascript
#駆け出しエンジニアと繋がりたい
 #プログラミング初心者

履歴が残るwindow.location.href="http://aaa.com";JavaScriptリダイレクト方法履歴が残らないwindow.location.replace("http://

ハクト@WEBエンジニア

hakuto00

配列を利用する際はシンプルな記述ができる「for..of」がおすすめ。
普通のオブジェクトをループさせるには
「Object.keys」
などを利用する必要があるので注意が必要です

#javascript
#駆け出しエンジニアと繋がりたい
 #プログラミング初心者

違いは何？JavaScript forlet data = [ 'aaa', 'bbb', 'ccc'];
for (let i = 0; i < data.length; i++) {
　　co

ハクト@WEBエンジニア

hakuto00

jQueryの場合、以下のような書き方もできます。
動作は全て同じです。

jQuery(document).ready(function() {
..
});

jQuery(function(){
..
});

#jqueryとjavascriptの比較
 #駆け出しエンジニアと繋がりたい
 #プログラミング初心者

$(function(){
...
});
jQueryDOMにアクセスできる準備が出来たら実行するdocument.addEventListener("DOMContentLoaded

ハクト@WEBエンジニア

hakuto00

reactや vue.jsなど多くの機能をJavaScriptで実装する案件が増えてきています。
潜在的なバグ等を早期に発見するためにも「use strict」積極的に使用していきたいですね。

#javascript
#駆け出しエンジニアと繋がりたい
 #プログラミング初心者

JavaScript内で使う"use strict"って何してるの？"use strict"を宣言するとより厳しくコードのエラーチェックが
行われるようになります。

・一般的にNGされているコ

ハクト@WEBエンジニア

hakuto00

関数リファレンス用のテンプレです。
https://generator.tubudeco.com/g6576/

substrは一覧表示などでタイトルや概要の一部だけを表示したい場合によく使いますね。

#javascript
#駆け出しエンジニアと繋がりたい
 #今日の積み上げ

substr文字列の切り出し書式substr(開始位置 [,切り出す長さ] )例let str='abcdefgh';
str.substr(3); //defghを返す
str.subs

ハクト@WEBエンジニア

hakuto00

構文:array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

array.splice(2); //[1,2]
array.splice(2,2); //[1,2,5]
のように削除も可能

#javascript
#駆け出しエンジニアと繋がりたい
 #プログラミング初心者

配列要素を削除するJavaScriptlet array=[1,2,3,4,5];
array.splice(2,1);
console.log(array);[1,2,4,5]

ハクト@WEBエンジニア

hakuto00

同じ階層の直前の要素を取得できます

#jqueryとjavascriptの比較
 #駆け出しエンジニアと繋がりたい
 #プログラミング初心者

$('#id').prev();jQuery直前の兄弟要素を取得する方法document.getElementById("id").previousElementSiblingjavaScript

ハクト@WEBエンジニア

hakuto00

JavaScriptで書くと少し面倒ですね

#jqueryとjavascriptの比較
 #駆け出しエンジニアと繋がりたい
 #プログラミング初心者

$el.siblings();jQuery兄弟要素を取得する方法Array.prototype.filter.call(el.parentNode.children, function(child)

ハクト@WEBエンジニア

hakuto00

最初の要素を取得する場合
jQuery:「$('#id').find('p').eq(0)」
JavaScript:「id.querySelector('p')」
です

#jqueryとjavascriptの比較
 #駆け出しエンジニアと繋がりたい
 #プログラミング初心者

$('#id').find('p');jQuery子要素を取得する方法let id=document.getElementById('id');
id.querySelectorAll('p');j

ハクト@WEBエンジニア

hakuto00

最初の要素の値を確認する場合
・jQuery
=> $('input[type=checkbox]').eq(0).val();

・JavaScript
=>document.querySelectorAll('input[type=checkbox]')[0].value;

#jqueryとjavascriptの比較
 #駆け出しエンジニアと繋がりたい
 #プログラミング初心者

$('input[type=checkbox]');jQuery属性を指定して要素を取得する方法 document.querySelectorAll('input[type=checkbox]')

ハクト@WEBエンジニア

hakuto00

IDの取得はJavaScriptの記法でもよく使います。
最近はブログもJavaScriptのみサンプルも増えてきたのでどちらも覚えたほうがいいですね。

#jqueryとjavascriptの比較
 #プログラミング初心者
 #駆け出しエンジニアと繋がりたい

$('#id')jQueryIDを指定して要素を取得する方法document.getElementById('id');javaScript

ハクト@WEBエンジニア

hakuto00

配列化したinput要素をカンマ区切りでDBのカラムに格納する場合などによく使用してます。

#PHPとjavascriptの書き方
 #駆け出しエンジニアと繋がりたい
 #web制作

$animals=['dog','cat','pig'];
$str_animal=implode(',',$animals);
echo $str_animal; //dog,cat,pigP

ハクト@WEBエンジニア

hakuto00

クラス指定で取得する場合の書き方の比較です

#jqueryとjavascriptの比較

$(’.class-name’)jQueryクラスを指定して要素を取得する方法document.getElementsByClassName('class-name')javaScript

ハクト@WEBエンジニア

hakuto00

比較用のテンプレです
https://generator.tubudeco.com/g6555/

jQueryとJavaScriptの書き方の違いを比較してみました。
jQueryシンプル

#jqueryとjavascriptの比較

$(’div’)jQueryCSSセレクターで取得する要素を指定document.querySelectorAll('div')javaScript

ハクト@WEBエンジニア

hakuto00

PHPとJavaScriptの文字列結合の違いです。
どちらのコードも書いているとたまに間違えます。。。

#PHP
#javascript
#プログラミング初心者
 #駆け出しエンジニアと繋がりたい

$str='文字列を' . '連結する';
echo $str;=>文字列を連結するPHP文字列を連結・結合する$str='文字列を' + '連結する';
console.log($str);=>

ハクト@WEBエンジニア

hakuto00

文字列を区切り文字で配列化する場合
・PHPは「explode」
・JavaScriptは「split」
で可能です。たまに忘れる。。。

#PHP
#javascript
#駆け出しエンジニアと繋がりたい

つぶデコ

投稿一覧