دستورات بدون خروجی:
یک سری از دستورات هستند که خروجی ندارند و رکوردی را باز نمیگردانند و برای اجرای دستوراتی چون افزودن، به روزرسانی و حذف بسیار مناسبند. اجرای این دستورات را ما به متدی به نام run میسپاریم. در دفعه قبل که از این دستور استفاده کردیم، پارامتری برای تعیین کردن نداشت؛ ولی در این مقاله، دستور با پارامتر آن را اجرا میکنیم:
ابتدا کدهای زیر را به فایل html، برای درج رکورد جدید اضافه میکنیم:
First Name:<br/> <input type="text" id="txtfname" /><br/> Last Name:<br/> <input type="text" id=txtlname /><br/> Number:<br/> <input type="tel" id="txttel" /><br/> <button id="btnsubmit">Save</button><br/>
function GetValues() { let fname=$("#txtfname").val(); let lname=$("#txtlname").val() let tel=$("#txttel").val(); let row= { fname:fname, lname:lname, number:tel }; return row; }
$("#btnsubmit").click((e)=>{ e.preventDefault(); let row=GetValues(); //save in db //get last id let statement==db.prepare("select id from numbers order by id desc limit 1"); let lastRecord=statement.getAsObject({}).id; row.id=lastRecord++; let count=db.prepare("select count(*) as count from numbers order by id desc").getAsObject({}).count; statement.free(); let insertCommand="insert into numbers values(?,?,?,?)"; db.run(insertCommand,[row.id,row.fname,row.lname,String(row.number)]) let newcount=db.prepare("select count(*) as count from numbers order by id desc").getAsObject({}).count; SaveChanges(); //show in the table if(count<newcount) { AddToTable(row); } }); });
var statement= db.prepare("SELECT * FROM NUMBERS WHERE fname=@fname AND lname=@lname"); var result = statement .getAsObject({'@fname' :'ali', '@lname' : 'yeganeh'});
statement.bind(['hossein','yeganeh']);
متد step همانند متدهای next در cursor یا read در datareader عمل میکند و با هر بار صدا زدن، یک رکورد، به سمت جلو حرکت میکند. دریافت هر رکورد جاری توسط متد get و نوع خروجی آرایه انجام میشود:
while(statement.step()) { var rec=statement.get(); }
const {ipcRenderer} = require('electron'); function SaveChanges() { ipcRenderer.send("SaveToDb"); }
const {ipcMain} = require('electron'); ipcMain.on("SaveToDb", (event, arg) => { SaveToDb(); }); function SaveToDb() { var data=db.export(); var buffer=new Buffer(data); fs.writeFileSync(dbPath,buffer); }
ویرایش رکورد
ابتدا template string سطر جدول را به شکل زیر تغییر میدهیم:
function AddToTable(row) { let tableBody=$("#people"); let rowTemplate=`<tr><td>${row.fname}</td><td>${row.lname}</td><td>${row.number}</td><td><button class= "btn btn-success btnupdate" data-id="${row.id}" >Edit</button></td></tr>`; tableBody.append(rowTemplate); }
سپس در تگ اسکریپت، در رویداد ready جی کوئری، این دستورات را اضافه میکنیم:
$("#people").on('click','.btnupdate',function(e) { e.preventDefault(); row.id=$(this).data("id"); let row=GetValues(); db.run("UPDATE NUMBERS SET FNAME=?,LNAME=?,NUMBER=? WHERE ID=?",[row.fname,row.lname,row.number,row.id]); SaveChanges(); tr=$(this).closest("tr"); let column=0; tr.find("td").each(function(index) { oldRow=$(this); switch(column) { case 0: //fname oldRow.text(row.fname); break; case 1: //lname oldRow.text(row.lname); break; case 2: //number oldRow.text(row.number); break; } column++; }); });
خواندن و بازگردانی رکوردها
در مقاله قبلی با دستور each آشنا شدیم که یک متد غیرهمزمان بود و نتیجه هر رکورد را با یک callback به ما بازگشت میداد. در اصل این متد شامل 4 پارامتر است: پارامتر اول آن، کوئری ارسالی است. پارامتر دوم آن، پارامتر کوئریها ، پارامتر سوم، تابع callback که به ازای هر رکورد اجرا میشود و پارامتر چهارم، تابع done می باشد. یعنی زمانی که کلیه رکوردها بازگشت داده شدند. شکل کامل آن به این صورت است:
db.each("SELECT name,age FROM users WHERE age >= $majority", {$majority:18}, function(row){console.log(row.name)}, function(){console.log("done");} );
در این مقاله با متد دیگری به نام exec نیز آشنا میشویم که بازگردانی مقادیر در آن به صورت همزمان صورت میگیرد و توانایی آن را دارد که چندین دستور select را بازگردانی کند. به عنوان مثال دستور زیر را در نظر بگیرید:
SELECT ID FROM NUMBERS;SELECT FNAME,LNAME FROM NUMBERS
[ {columns: ['id'], values:[[1],[2],[3]]}, {columns: ['fname','lname'], values:[['ali','yeganeh'],['hossein','yeganeh'],['mohammad','yeganeh']]} ]
var records=db.exec("select * from numbers"); let values=records[0].values; let length=values.length; for(let i=0;i<length;i++) { let object=values[i]; let row={ id:object[0], fname:object[1], lname:object[2], number:object[3] }; AddToTable(row); }
پیشنیازهای سمت سرور
- ابتدا یک پروژهی خالی ASP.NET را ایجاد کنید. نوع آن مهم نیست که Web Forms باشد یا MVC.
- سپس قصد داریم مدل کاربران سیستم را توسط یک ASP.NET Web API Controller در اختیار Ember.js قرار دهیم. مباحث پایهای Web API نیز در وب فرمها و MVC یکی است.
مدل سمت سرور برنامه چنین شکلی را دارد:
namespace EmberJS02.Models { public class User { public int Id { set; get; } public string UserName { set; get; } public string Email { set; get; } } }
using System.Collections.Generic; using System.Web.Http; using EmberJS02.Models; namespace EmberJS02.Controllers { public class UsersController : ApiController { // GET api/<controller> public IEnumerable<User> Get() { return UsersDataSource.UsersList; } } }
همچنین فرض بر این است که مسیریابی سمت سرور ذیل را نیز به فایل global.asax.cs، جهت فعال سازی دسترسی به متدهای کنترلر UsersController تعریف کردهاید:
using System; using System.Web.Http; using System.Web.Routing; namespace EmberJS02 { public class Global : System.Web.HttpApplication { protected void Application_Start(object sender, EventArgs e) { RouteTable.Routes.MapHttpRoute( name: "DefaultApi", routeTemplate: "api/{controller}/{id}", defaults: new { id = RouteParameter.Optional } ); } } }
پیشنیازهای سمت کاربر
پیشنیازهای سمت کاربر این قسمت با قسمت «تهیهی اولین برنامهی Ember.js» دقیقا یکی است.
ابتدا فایلهای مورد نیاز Ember.js به برنامه اضافه شدهاند:
PM> Install-Package EmberJS
App = Ember.Application.create(); App.IndexRoute = Ember.Route.extend({ setupController:function(controller) { controller.set('content', ['red', 'yellow', 'blue']); } });
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="Scripts/jquery-2.1.1.js" type="text/javascript"></script> <script src="Scripts/handlebars.js" type="text/javascript"></script> <script src="Scripts/ember.js" type="text/javascript"></script> <script src="Scripts/app.js" type="text/javascript"></script> </head> <body> <script type="text/x-handlebars" data-template-name="application"> <h1>Header</h1> {{outlet}} </script> <script type="text/x-handlebars" data-template-name="index"> Hello, <strong>Welcome to Ember.js</strong>! <ul> {{#each item in content}} <li> {{item}} </li> {{/each}} </ul> </script> </body> </html>
در ادامه قصد داریم به هدر صفحه، دو لینک Home و About را اضافه کنیم؛ به نحوی که لینک Home به مسیریابی index و لینک About به مسیریابی about که صفحهی جدید «دربارهی برنامه» را نمایش میدهد، اشاره کنند.
تعریف صفحهی جدید About
برنامههای Ember.js، برنامههای تک صفحهای وب هستند و صفحات جدید در آنها به صورت یک template جدید تعریف میشوند که نهایتا متناظر با یک مسیریابی مشخص خواهند بود.
به همین جهت ابتدا در فایل app.js مسیریابی about را اضافه خواهیم کرد:
App.Router.map(function() { this.resource('about'); });
بنابراین به صفحهی index.html برنامه مراجعه کرده و صفحهی about را توسط یک قالب جدید تعریف میکنیم:
<script type="text/x-handlebars" data-template-name="about"> <h2>Our about page</h2> </script>
در این حالت اگر برنامه را در حالت معمولی اجرا کنید، خروجی خاصی را مشاهده نخواهید کرد. بنابراین نیاز است تا لینکی را جهت اشاره به این مسیر جدید به صفحه اضافه کنیم:
<script type="text/x-handlebars" data-template-name="application"> <h1>Ember Demo App</h1> <ul class="nav"> <li>{{#linkTo 'index'}}Home{{/linkTo}}</li> <li>{{#linkTo 'about'}}About{{/linkTo}}</li> </ul> {{outlet}} </script>
در اینجا با استفاده از امکان یا directive ویژهای به نام linkTo، لینکهایی به مسیریابیهای index و about اضافه شدهاند. به این ترتیب اگر کاربری برای مثال بر روی لینک About کلیک کند، کتابخانهی Ember.js او را به صورت خودکار به مسیریابی about و سپس نمایش قالب مرتبط با آن (قالب about ایی که پیشتر تعریف کردیم) هدایت خواهد کرد؛ مانند تصویر ذیل:
همانطور که در آدرس صفحه نیز مشخص است، هرچند صفحهی about نمایش داده شدهاست، اما هنوز نیز در همان صفحهی اصلی برنامه قرار داریم. به علاوه در این قسمت جدید، همچنان منوی بالای صفحه نمایان است؛ از این جهت که تعاریف آن به قالب application اضافه شدهاند.
دریافت و نمایش اطلاعات از سرور
اکنون که با نحوهی تعریف یک صفحهی جدید و برپایی سیم کشیهای مرتبط با آن آشنا شدیم، میخواهیم صفحهی دیگری را به نام Users به برنامه اضافه کنیم و در آن لیست کاربران ارائه شده توسط کنترلر Web API سمت سرور ابتدای بحث را نمایش دهیم.
بنابراین ابتدا مسیریابی جدید users را به صفحه اضافه میکنیم تا لیست کاربران، در آدرس users/ قابل دسترسی شود:
App.Router.map(function() { this.resource('about'); this.resource('users'); });
App.UsersLink = Ember.Object.extend({}); App.UsersLink.reopenClass({ findAll: function () { var users = []; $.getJSON('/api/users').then(function(response) { response.forEach(function(item) { users.pushObject(App.UsersLink.create(item)); }); }); return users; } });
پس از اینکه نحوهی دریافت اطلاعات از سرور مشخص شد، باید اطلاعات این مدل را در اختیار مسیریابی Users قرار داد:
App.UsersRoute = Ember.Route.extend({ model: function() { return App.UsersLink.findAll(); } }); App.UsersController = Ember.ObjectController.extend({ customHeader : 'Our Users List' });
همچنین در کنترلری که تعریف شده، صرفا یک خاصیت سفارشی و دلخواه جدید، به نام customHeader برای نمایش در ابتدای صفحه تعریف و مقدار دهی گردیدهاست.
اکنون قالبی که قرار است اطلاعات مدل را نمایش دهد، چنین شکلی را خواهد داشت:
<script type="text/x-handlebars" data-template-name="users"> <h2>{{customHeader}}</h2> <ul> {{#each item in model}} <li> {{item.Id}}-{{item.UserName}} ({{item.Email}}) </li> {{/each}} </ul> </script>
کدهای کامل این قسمت را از اینجا میتوانید دریافت کنید:
EmberJS02.zip
اگر با وب فرمها کار کرده باشید، حتما با تنظیم زیر در فایل web.config برنامههای وب آشنا هستید:
<pages validaterequest="false"></pages>
Request Validation قابلیتی است که از زمان ASP.NET 1.1 وجود داشتهاست و توسط آن اگر اطلاعات دریافتی از کاربر به همراه تگهای HTML و یا کدهای JavaScript ای باشد، خطرناک تشخیص داده شده و با ارائهی پیام خطایی (مانند تصویر فوق)، پردازش درخواست متوقف میشود. این اعتبارسنجی بر روی هدرها، کوئری استرینگها، بدنهی درخواست و کوکیها صورت میگیرد. هدف آن نیز به حداقل رساندن امکان حملات Cross-Site Scripting و یا XSS است.
محدودیتهای اعتبارسنجی درخواستها
هر چند Request validation یک ویژگی و امکان جالب است، اما ... در عمل راهحل جامعی نیست و تنها اگر کاربر تگهای HTML ای را ارسال کند، متوجه وجود یک خطر احتمالی میشود. برای مثال اگر این اطلاعات خطرناک به نحو دیگری در قسمتهای مختلفی مانند attributeها، CSSها و غیره نیز تزریق شوند، عکس العملی را نشان نخواهد داد. به علاوه اگر این نوع حملات به همراه ترکیب آنها با روشهای Unicode نیز باشد، میتوان این اعتبارسنجی را دور زد.
اعتبارسنجی خودکار درخواستها و حس کاذب امنیت
متاسفانه وجود اعتبارسنجی خودکار درخواستها سبب این توهم میشود که برنامه در مقابل حملات XSS امن است و بالاخره این قابلیت توسط مایکروسافت در برنامه قرار داده شدهاست و ما هم به آن اطمینان داریم. اما با توجه به نحوهی پیاده سازی و محدودیتهای یاد شدهی آن، این قابلیت صرفا یک لایهی بسیار ابتدایی اعتبارسنجی اطلاعات ارسالی به سمت سرور را شامل میشود و بررسی تمام حالات حملات XSS را پوشش نمیدهد (اگر علاقمند هستید که بدانید چه بازهای از این حملات ممکن هستند، آزمونهای واحد کتابخانهی HtmlSanitizer را بررسی کنید).
پایان اعتبارسنجی درخواستها در ASP.NET Core
طراحان ASP.NET Core تصمیم گرفتهاند که یک چنین قابلیتی را به طور کامل از ASP.NET Core حذف کنند؛ چون به این نتیجه رسیدهاند که ... ایدهی خوبی نبوده و در اکثر مواقع برنامه نویسها کاملا آنرا خاموش میکنند (مانند مثالهای وب فرم و MVC فوق). اعتبارسنجی درخواستها مشکل یک برنامه است و مراحل و سطوح آن از هر برنامه، به برنامهی دیگری بر اساس نیازمندیهای آن متفاوت است. به همین جهت تعیین اجباری اعتبارسنجی درخواستها در نگارشهای قبلی ASP.NET سبب شدهاست که عملا برنامه نویسها با آن کار نکنند. بنابراین در اینجا دیگر خبری از ویژگیهای ValidateInput و یا AllowHtml و یا مانند وب فرمها و HTTP Module مخصوص آن، به همراه یک میانافزار تعیین اعتبار درخواستها نیست.
اکنون برای مقابله با حملات XSS در کدهای سمت سرور برنامههای ASP.NET Core چه باید کرد؟
در ASP.NET Core، کار مقابلهی با حملات XSS، از فریمورک، به خود برنامه واگذار شدهاست و در اینجا شما بر اساس نیازمندیهای خود تصمیم خواهید گرفت که تا چه حدی و چه مسایلی را کنترل کنید. برای این منظور در سمت سرور، استفادهی ترکیبی از سه روش زیر توصیه میشود:
الف) تمیز کردن اطلاعات ورودی رسیدهی از کاربران توسط کتابخانههایی مانند HtmlSanitizer
ب) محدود کردن بازهی اطلاعات قابل قبول ارسالی توسط کاربران
[Required] [StringLength(50)] [RegularExpression(@"^[a-zA-Z0-9 -']*$")] public string Name {get;set;}
Gulp #5
در مقالات قبلی به طور کامل با گالپ آشنا شدیم و گفتیم که میتواند ما را در بهینه سازی ورک فلویمان کمک کند. در این قسمت یاد خواهیم گرفت که چگونه تجربهی کاربری بهتری را از سرعت بارگذاری سایتمان ایجاد کنیم.
افزایش کارآیی Performance وب با گالپ
۱− کنار هم قرار دادن و فشرده کردن فایلهای جاوا اسکریپت
npm install --save-dev gulp-uglify gulp-concat
// first load all required js files // concat them in to script.min.js // and minify it. gulp.task('js', function() { return gulp.src([ config.bowerDir + '/jquery/dist/jquery.min.js', // این فایل وابستگی فایلهای زیر است config.bowerDir + '/materialize/dist/js/materialize.min.js', './resources/js/app.js' ]) .pipe(concat('script.min.js')) .pipe(uglify()) .pipe(size()) .pipe(gulp.dest('./public/js')); });
فشرده کردن جاوا اسکریپت، حجم فایلها را ۳۰ تا ۹۰ درصد کاهش میدهد.
۲− حذف سکلتورهای بدون استفاده css
npm install gulp-uncss --save-dev
gulp.task('css', function() { return sass(config.sassPath + '/style.scss', { style: 'compressed', loadPath: [ './resources/sass', config.bowerDir + '/materialize/sass' ] }) .on('error', util.log) .pipe(size()) .pipe(uncss({ html: ['./index.html', './posts.html'] })) .pipe(gulp.dest('./public/css')) .pipe(size()) .pipe(connect.reload()); });
gulp.task('css', function() { return sass(config.sassPath + '/style.scss', { style: 'compressed', loadPath: [ './resources/sass', config.bowerDir + '/materialize/sass' ] }) .on('error', util.log) .pipe(size()) .pipe(uncss({ html: ['./index.html', './posts.html'], timeout : 2000, // wait for load js files ignore: [ ".waves-ripple ", ".drag-target", "#sidenav-overlay", ".waves-effect", ".waves-effect .waves-ripple", ".waves-effect.waves-pinck .waves-ripple", ".waves-block.waves-light" ] })) .pipe(minifyCss()) .pipe(size()) .pipe(gulp.dest('./public/css')) .pipe(connect.reload()); });
با تشکر از جناب راد بابت کتاب خوبشون.
این کتاب بسیار عالی است فقط چند مورد زیر جهت بهبود و تکمیل کتاب پیشنهاد میگردد:
1- خیلی مقدمه چینی داره و از نظر بنده حقیر نیاز نبوده و صرفا مستقیم اگر میرفتند سر اصل مطلب و نحوه استفاده در پروژه رو بصورت تصویری و عملی میگفتند خیلی بهتر بود.
ابتدای کتاب و مقدمه چینیهای زیاد آن آدم و خسته میکنه.
2- مثال در زمینه کد نویسی lambda و linq خیلی کم است و جای خالی چند مثال عملی (پروژه واقعی) خوب به شدت حس میشود.
به شخصه دوست داشتم چند مثال خیلی خوب عملی از روش first Database و first code ببینم که متاسفانه وجود نداشت.
البته این نظر بنده است و بنده در سطحی نیستم که درباره کتاب جناب راد فکر کنم (چه برسه به نظر دادن) و خودم رو در چنین سطحی نمیبینم.
صرفا در جهت پیشنهاد و در جهت کمک به بهتر شدن کتاب عرض کردم.
تقریبا بیشتر کتابهای جناب راد را دارم و به شخصه E.F رو از روی همین کتاب یاد گرفتم و این کتاب مرجع آموزش E.F برخی از اساتید مجتمع فنی تهران نیز میباشد که همانا نشان از سطح بسیار خوب این کتاب دارد.
مشتاقانه در انتظار انتشار کتابهای دیگری از جناب راد در زمینه هایی همچون "برنامه نویسی پروژههای بزرگ بصورت چند لایه" و یا Nuget (بهترین پلاگینهای آن) میباشم.
(جای خالی همچین کتابهایی واقعا خالیه)
*در تایید حرفهای جناب نصیری هم باید عرض کنم که بنده شخصا چنین کتابی اگر به پستم بخوره حتما یکیشو میخرم و جالب اینه که بنده کتاب E.F رو که میخواستم بخرم ، توی بازار هیچی نبود!
به انتشارات که مراجعه کردم دقیقا آخرین کتاب به بنده رسید :دی
(البته داستانش طولانیه که چطوری یک کتاب رو برای بنده نگهداشته بودند و تونستم آخرین نسخه موجود رو بخرم :دی )
خدا قوت
یا حق
برای استفاده، ابتدا DLL مورد نظر را دانلود و به Referencesها اضافه میکنیم؛ دانلود فایل Intelligencia.UrlRewriter.dll
دانلود آخرین نسخهی فایل از سایت مرجع: urlrewriter.net
مرحلهی بعد تنظیمات Web.Config است که به صورت زیر میباشد:
<configuration> <configSections> <section name="rewriter" requirePermission="false" type="Intelligencia.UrlRewriter.Configuration.RewriterConfigurationSectionHandler, Intelligencia.UrlRewriter" /> </configSections> <system.web> <httpModules> <add type="Intelligencia.UrlRewriter.RewriterHttpModule,Intelligencia.UrlRewriter" name="UrlRewriter" /> </httpModules> </system.web> <rewriter> <rewrite url="^.*-T([0-9]+)/?$*" to="~/ShowTerol.aspx?ID=$1" processing="stop" /> </rewriter> </configuration>
مرحله بعد تنظیم این است که کدام لینکها بازنویسی شوند که در کدهای بالا فقط یک مدل بازنویسی وجود دارد:
<rewrite url="^.*-T([0-9]+)/?$*" to="~/ShowTerol.aspx?ID=$1" processing="stop" />
و میگوید تمام لینکهایی را که در آخر آنها T- و عدد وجود دارد، به صفحهی ShowTerol.aspx با یک کوئری استرینگ به نام ID که مقدار آن، همان عدد بعد حرف T میباشد بفرست.
یعنی این لینک را
به این لینک تبدیل میکند
ShowTerol.aspx?ID=87
<rewrite url="^.*-p([0-9]+)/?$*" to="~/Products.aspx?p=$1" processing="stop"/> <rewrite url="^.*-c([0-9]+)pa([0-9]+)/?$*" to="~/Default.aspx?c=$1&pa=$2" processing="stop"/> <rewrite url="^.*-c([0-9]+)/?$*" to="~/Default.aspx?c=$1" processing="stop"/>
الگوی تبدیلات توسط Regular Expansion
NET 6. #C Blazor ASP.NET Web API ASP.NET MVC MongoDB Redis MediatR | Microservices DDD CQRS Event Sourcing Notification Repository Onion Architecture | Acceptance Testing Integration Testing Unit Testing UI Testing E2E Testing |
تصمیم گرفتم در طی چندین پست در حد توانم به آموزش jQuery بپردازم. (مطالب نوشته شده برداشت ازادی از کتاب jQuery in action است)
جی کوئری (jQuery) چیست؟
نکته: برای استفاده از جی کوئری باید HTML و CSS و جاوا اسکریپت آشنایی داشته باشید.
چگونه از جی کوئری استفاده کنیم؟
برای استفاده از جی کوئری باید ابتدا فایل آن را از سایت آن دانلود کرده و در پروژه خود استفاده نمایید. البته روشهای دیگری برای استفاده از این فایل وجود دارد که در آینده بیشتر با آن آشنا خواهیم شد. برای استفاده از این فایل در پروژه باید به شکل زیر آن را به صفحه HTML خود معرفی کنیم.
<html> <head> <script type="text/javascript" src="jquery-1.9.1.min.js"></script> </head> <body> </body> </html>
کوتاه کردن کد: هر زمان شما خواسته باشید کارکرد یک صفحه وب را پویاتر کنید، در اکثر مواقع به ناچار این کار از طریق عناصری بروی صفحه انجام داده اید که با توجه به انتخاب شدن آنها، صفحه کارکردی خاص خواهد داشت. مثلا در جاوا اسکریپت اگر بخواهیم عنصری را که در یک radioGroup انتخاب شده است را برگردانیم باید کدهای زیر را بنویسیم:
var checkedValue; var elements = document.getElementByTagName ('input'); for (var n = 0; n < elements.length; n++) { if (elements[n].type == 'radio' && elements[n].name == 'myRadioGroup' && elements[n].checked) { checkedValue = elements[n].value; } }
var checkedValue = $ ('[name="myRadioGroup"]:checked').val();
قدرت اصلی جی کوئری برگفته از انتخابکنندهها (Selector) هاست، انتخابکننده ، یک عبارت است که دسترسی به عنصری خاص بر روی صفحه را موجب میشود؛ انتخابکننده این امکان را فراهم میسازد تا به سادگی عنصر مورد نظر را مشخص و به آن دسترسی پیدا کنیم که در مثال فوق، عنصر مورد نظر ما گزینه انتخاب شده از myRadioGroup بود.
Unobtrusive JavaScript: اگر پیش از پیدایش CSS در کار ایجاد صفحههای اینترنتی بودهاید حتما مشکلات و مشقات آن دوران را به خاطر میآورید. در آن زمان برای فرمتدهی به اجزای مختلف صفحه ، به ناچار علائم فرمتدهی را به همراه دستورات خود اجزا، در صفحههای HTML استفاده میکردیم. اکنون بسیار بعید به نظر میرسد کسی ترجیح دهد فرمتدهی اجزا را به همراه دستورهای HTML آن انجام دهد. اگر چه هنوز دستوری مانند زیر بسیار عادی به نظر میآید:
<button type="button" onclick="document.getElementById('xyz').style.color='red';"> Click Me </button>
مجموعه عناصر در جی کوئری:
زمانی که CSS به عنوان یک تکنولوژی به منظور جداسازی طراحی از ساختار به دنیای صفحههای اینترنتی معرفی شد، میبایست راهی برای اشاره به اجزای صفحات از طرف فایل CSS نیز معرفی میشد. این امر از طریق انتخابکنندهها (Selector) صورت پذیرفت.
برای مثال انتخابکننده زیر، به تمام عناصر <a> اشاره دارد که در یک عنصر <p> قرار گرفتهاند:
p a
برای انتخاب مجموعهای از عناصر از یکی از دو Syntax زیر استفاده میکنیم.
$(Selector) یا jQuery(Selector)
مثال زیر نمونهای دیگر است که در آن مجموعهای از تمام لینکهایی که درون تگ <p> قرار دارند را انتخاب میکند:
$("p a")
در اصطلاح برنامه نویسی به چنین توابعی که گروهی از عناصر را جمع میکنند، Wrapper میگویند زیرا تمام عناصر مطلوب را تحت یک شی بستهبندی میکند. در جیکوئری به آنها Wrapped Set یا jQuery Wrapper میگویند و به متدهایی که قابل اعمال بروی اینها به نام jQuery Wrapper Methodes شناخته میشوند.
در مثال زیر میخواهیم تمام عناصر <div> در صورتی که دارای کلاس notLongForThisWorldباشند را مخفی (با فید شدن) کنیم.
$("div.notLongForThisWorld").fadeOut();
فرض کنید در مثال بالا بخواهیم پس از مخفی کردن هر <div> بخواهیم یک کلاس به نام removedبه آن بیافزاییم. به این منظور میتوان کدی مانند زیر نوشت:
$("div.notLongForThisWorld").fadeOut().addClass("removed");
چند نمونه انتخاب کننده:
نتیجه | انتخاب کننده | |
تمام <p>های زوج را انتخاب میکند | $('p:even') | |
سطر اول هر جدول را انتخاب میکند | $("tr:nth-child(1)"); | |
<div>هایی که مستقیما در <body> تعریف شده باشند را انتخاب میکند. | $("body > div"); | |
لینک هایی که به یک فایل pdf اشاره دارند را انتخاب میکند. | $("a[href$=pdf]"); | |
تمام <div> هایی که مستقیما در <body> معرفی شده اند و دارای لینک میباشند را انتخاب میکند. | $("body > div:has(a)") | |
ادامه مطالب در پستهای بعدی تشریح خواهد شد.
جهت مطالعه بیشتر میتوانید از این منابع ^ و ^ و ^ و ^ و ^ استفاده کنید.
موفق و موید باشید