ساخت اسلایدر شیک و حرفه ای در جاوا اسکریپت

حسین باقری — Mon, 07 Nov 2022 15:49:32 +0330

در این آموزش قصد دارم با 2 روش نحوه پیاده سازی اسلایدر را به شما آموزش دهم در روش اول از 0 تا 100 را خودمان کد نویسی کرده و اسلایدر را می سازیم ذدر روش دوم از کتابخانه splide.js استفاده کرده و 9 اسلایدر مختلف را پیاده سازی می کنیدویدیوی روش اول https://cdn1.rapidcode.ir/videos2/how-to-create-slider-in-js.mp4 ویدیوی روش دوم https://cdn1.rapidcode.ir/videos2/how-to-use-splide.js.mp4 منبع

کار با متغیر ها در جاوا اسکریپت

حسین باقری — Wed, 05 Jan 2022 10:28:39 +0330

نوع داده در JSآموزش انواع داده در جاوا اسکریپت – در زبان های برنامه نویسی نوع داده یا دیتا تایپ نقش مهمی را در ذخیره داده ، آن هم به شکل های مختلف ایفا می کند .انواع مختلفی از داده ها وجود دارد که با توجه به نیاز و کاربرد آن در برنامه مورد استفاده قرار می گیرد که در پایین لیست شده است :شامل 8 نوع داده یا همان data types در زبان برنامه نویسی جاوا اسکریپتnumber : عددیBigInt : اعداد صحیح کلانstring : رشته ای ( نوشته )boolean : منطقی ( true / false )null : پوچundefined : مقداردهی نشدهobject : شی ( آرایه ، دیگر مقادیر complex )symbol : منحصر به فرد برای debug0- ابتدا با پیشوندهای تعریفی const , let , var آشنا شویماین 3 پیشوند تاثیر به سزایی در ساختار برنامه مان خواهد داشت پس در هنگام تعریف باید آگاهی کافی نسبت به کارایی شان داشت :پیشوند constهمانطور که از اسمش پیداست ثابت است و فقط یک declare ( تعریف ) و assign ( مقدار دهی ) می شود .const myConstant = 3.14; // 3.14 const myConstant = 3.14; // SyntaxError: has already been declared myConstant = 3.14; // TypeError: Assignment to constant variable.پیشوند letاین یکی فقط باید یک بار declare شود ولی به طور نامحدودی می تواند reassign شود .let userID = 1377; // 1377 let userID = 1378; // SyntaxError: has already been declared userID = 1379; // 1379پیشوند varمی تواند هم declare و reassign شود آن هم به طور نامحدودیvar number = 1999; // 1999 var number = 2000; // 2000 number = 2001; // 20011- نوع داده number (عددی)می تواند به انواع مختلفی از عدد باشد همانند : صحیح مثبت و منفی ، اعشاریvar num1 = 199; var num2 = -199; var num3 = 1.798456456;2 نوع عددی ویژه با نام های Infinity و NaN در جاوا اسکریپت وجود دارد .عددی Infinityنامحدود . زمانی که عددی تقسیم بر صفر شود یا موارد دیگر با این نوع روبرو می شویم همچنین اگر بخواهیم آن را تشخیص دهیم تابع isFinite نیازمان می شود .var myInfinity = 999 / 0; console.log(myInfinity); // Infinity if(isFinite(myInfinity) === false) console.log("your number is infinite");عددی NaNمخفف Not A Number می باشد و در زمانی رخ می دهد که یک عمل ریاضی به جز + با عدد و رشته انجام دهیم .var myNan = 2 - "mens" console.log(myNan); // NaN // #1-روش اشتباه تشخیص if(myNan == NaN) console.log("your number is NaN") // #2-روش صحیح تشخیص if(isNaN(myNan)) console.log("your number is NaN")2- نوع داده BigInt اعداد صحیح کلانبه طور طبیعی اعداد صحیح تا عدد 9,007,199,254,740,991 یا عدد 2 به توان 53 منها 1 قابل پشتیبانی می باشد اما اعداد بزرگ تر از آن عضو نوع داده BigInt محسوب می شوند .var max_safe_int = Number.MAX_SAFE_INTEGER; // 9007199254740991 # (Math.pow(2,53))-1روش تعریف BigIntبه 2 روش می توان تعریف کرد که در کد زیر مشاهده می کنید :var myBigInt1 = BigInt(9007199254740993); var myBigInt2 = 9007199254740992n;حل مشکل مقایسهموردی که توجه من رو به خودش جلب کرد این بود که در هنگام مقایسه نتیجه اشتباهی رو دریافت کردم :console.log(myBigInt1 == myBigInt2); // trueاین مشکل برمی گردد به متغیر myBigInt1 که باید آن را به صورت عدد داخل رشته وارد سازی کنیم و مشکل حل خواهد شد :var myBigInt1 = BigInt("9007199254740993"); var myBigInt2 = 9007199254740992n; console.log(myBigInt1 == myBigInt2); // falseBigInt ها در مرورگر های Firefox/Chrome/Edge/Safari پشتیبانی می شود اما در IE این امکان وجود ندارد .3- نوع داده string رشته ای ( نوشته )این نوع می تواند به 3 شکل تعریف شود با :1- دابل کوت2- سینگل کوت3- بک تیک ( قابلیت های زیادی می دهد )var string1 = "welcome" var string2 = 'arman'; function sayMyName(){ return "'RapidCoDe.iR'" } var welcome = `${string1} ${string2} ${1+1} ${sayMyName()}`; console.log(welcome); // welcome arman 2 'RapidCoDe.iR'یک روش برای برعکس نمایش دادن رشتهvar reverseString = ("edocdipar").split("").reverse().join(""); console.log(reverseString); // rapidcode4- نوع داده boolean منطقی ( true / false )این نوع داده فقط می تواند 2 مقدار داشته باشد یا true(1) یا false(0) و محض اطلاع boolean نیز در مای اس کیو ال به عنوان (1)tinyint هم شناخته می شود .var myBoolean1 = true; var myBoolean2 = false; var myBoolean3 = 1 == "1" // true5- نوع داده null ( پوچ )این نوع داده را با undefined اشتباه نگیرید زمانی که به یک متغیر مقدار null می دهید درواقع مقدار ناشناخته یا پوچ را می دهید .var fullname = null; if(fullname == null) console.log("your Name is Unknown");6- نوع داده undefined (مقداردهی نشده)زمانی که مقدار undefined می گذاریم اعلام می کنیم که متغیر تعریف شده اما مقداری برای آن تعریف نشد یا اگر بخواهیم به مقدار یک index تعریف نشده از آرایه دسترسی پیدا کنیم .var myUndefined; myUndefined = undefined; // same as above var arrayList = [1,2]; console.log(myUndefined); // undefined console.log(arrayList[2]); // undefined7- نوع داده object (شی ( آرایه ، دیگر مقادیر complex ))آرایه ها و object ها از وجود چند نوع داده ی مختلف به وجود می آیند که complex یا چندمنظوره نامید می شوند .در واقع آرایه ها هم عضوی از object محسوب می شوند .const myArray = [120, "arMan", true, null, undefined , function(name){return "hi " + name }]; const func = myArray[5]; console.log(func(myArray[1])) // hi arManمثلا اگر بخواهیم به مقدار arMan دسترسی پیدا کنیم از myArray[1] استفاده می کنیم حال اگر بخواهیم به جای عدد 1 از نام استفاده کنیم از object استفاده می کنیم و می توانیم به مقدار آن دست پیدا کنیم .وتعریف آن به شکل زیر است :var myObject = { username : "aryan", age : 33 , showBio : function(){ return `${this.username} ${this.age} years old from ${this.city}`; } } myObject.age = 21; myObject.city = "Meshad (:" myObject['city'] = "Meshad (:" // same as aboveیا به شکلی دیگر هم می توان آن را تعریف کرد ( ;var myObject = new Object(); myObject.username = "aryan" myObject.age = "21" myObject.city = "Meshad (:" myObject.showBio = function(){ return `${this.username} ${this.age} years old from ${this.city}`; };هم چنین می توانیم با تابع به مقدار آبجکت دسترسی پیدا کنیم :console.log(myObject.showBio()); // "aryan 21 years old from Meshad (:"نمونه گیری آبجکت از تابعمی توانیم تابع را طوری تعریف کنیم که بتوانیم از آن آبجکت نمونه گیری کنیم به شکل زیر :var myObject = function(username, age, city){ this.username = username; this.age = age; this.city = city; this.showBio = function(){ return `${this.username} ${this.age} years old from ${this.city}`; } } const object1 = new myObject("Poorya" , 23 , "tehran"); console.log(object1.showBio()); // Poorya 23 years old from tehranترفند های جالب Objectاگر بخواهیم به کلیدواژه های شی یا همان object دسترسی پیدا کنیم می توانیم از متود های زیر استفاده کنیم :console.log(Object.keys(object1)); // ["username", "age", "city", "showBio"] console.log(Object.getOwnPropertyNames(object1)); // ["username", "age", "city", "showBio"]همچنین می توانیم از object داخل حلقه بهره ببریم :for(var key in object1){ console.log(key + " -> " + object1[key]) }8- Symbol : منحصر به فرد برای debugهمانطور که از اسمش پیداست اَشکال برای علامت گذاشتن است و با استفاده از این نوع داده می توانیم در بخش های مختلفی از برنامه علامت گذاری کرده و آن را رفع خطا کنیم .const mySymbol1 = Symbol("line"); const mySymbol2 = Symbol("line"); console.log(mySymbol1 === mySymbol2) // false console.log(mySymbol1.description) // line console.log(mySymbol1.toString()) // Symbol(line)معرفی تابع و عملگر typeoftypeof در واقع هم یک تابع و هم عملگر است یعنی می توانیم به صورت :typeof val typeof (val)استفاده کنیم .و با آن می توانیم نوع داده متغیر را بدست آوریم و خیلی کاربردی می باشد و نوع را به صورت رشته برمی گرداند :typeof 0 // "number" typeof 10n // "bigint" typeof undefined // "undefined" typeof false // "boolean" typeof "arMan" // "string" typeof Symbol("line") // "symbol" typeof new Date // "object" typeof(null) // "object" typeof console.log // "function"و در پایان variable handlingکلاس های از پیش ساخته javascript وجود دارد که می توان به صورت تابع هم از آن استفاده کرد و می توانیم داده های مختلفی را به آن نوع داده مدنظر مان تبدیل کنیم :Number("1.75")// 1.75 Number(false) //0 Number(true) //1 =============== String(1.5) // "1.5" String(true) // "true" String({}) // [object Object] =============== Boolean(1) // true Boolean(0) // false Boolean("") // false Boolean("0") // true Boolean(null) // false Boolean(undefined) // false ============= Object(true) // Boolean {true} Object("arMan") // String {"arMan"} Object(1489948454) // Number {1489948454} Object(null) {} Object(undefined) {}لینک مقاله

کوتاه کننده لینک با پی اچ پی و MYSQL

حسین باقری — Mon, 18 Oct 2021 11:42:01 +0330

کوتاه کننده لینک با پی اچ پی و MYSQLکوتاه کننده لینک با PHP ، مای اس کیو ال و Javascript – ساخت یک انتقال دهنده لینک نیازمند این است که راه حلی را داشته باشیم که بتوانیم یک آدرس طولانی را به یک آدرس کوتاه تبدیل کنیم .در این آموزش یک URL Shortener نیمه حرفه ای را خواهیم ساخت که از تکنولوژی Ajax پشتیبانی می کند .فایل index.phpخط 18 : از اونجایی که فرم ajax خواهد بود زمانی که آدرس وارد شد و کاربر ENTER زد نمی خواهیم هدایت بشیم بنابراین با مقدار false برمی گردانیم کــــه ریدایرکت نشیم .خط 19 : pattern را برای ورودی http و https تنظیم می کنیم که با یکی از این 2 شروع شود . Rapidcode.iR - سورس کد

رپید کد • کتابخانه مجازی برنامه نویسان

نوشته های حسین باقری

ساخت اسلایدر شیک و حرفه ای در جاوا اسکریپت

کار با متغیر ها در جاوا اسکریپت

کوتاه کننده لینک با پی اچ پی و MYSQL