جاوا اسكريپت در وب

اين وبلاگ مرجع كامل مقالات طراحي سايت در مشهد است

جاوا اسكريپت در وب

۴۳ بازديد


HTML JavaScriptفراگيري جاوا اسكريپت در تارنما جاوا اسكريپت طراحي سايت در مشهد صفحه هاي اينترنت را بيشتر تعاملي مي نمايد. 
نمونه:



 My First JavaScript
 onclick="document.getElementById('demo').innerHTML = Date()">Click me to display Date and Time. 


همان طور كه مي‌بينيد اين كد يك دكمه ساخت و ساز مي نمايد كه با فشار دادن آن تاريخ به اكران در مي‌آيد. مشاهده فيض  تگ  
مشاهده فيض 
ديدن امكان هاي جاوا 
درزير جند نمونه براي اينكه ملاحظه كنيد جاوااسكريپت چه بضاعت هاي دارااست آمده ميباشد.
1. تغيير تحول محتوا در اچ تي ام ال :
document.getElementById("demo").innerHTML = "Hello JavaScript!";
 
مشاهده فيض 
2. جاوا اسكريپت قادر است استايل يا اين كه CSS يك پوشه اچ تي ام ال را تغيير‌و تحول دهد:
document.getElementById("demo").style.fontSize = "25px";document.getElementById("demo").style.color = "red";
مشاهده سود
جاوا اسكريپت مي‌تواند خصوصيت هاي يك تگ را تغيير‌و تحول دهد. 
document.getElementById("image").src = "picture.gif";
مشاهده فيض
تگ
رنگ دهي به كليه چيز روي دكمه Add در صدر سمت راست كليك نمائيد اين فعاليت يك استايل تازه به اسم استايل 1 ساخت‌و‌ساز مي نمايد. تا شما بتوانيد موادتشكيل دهنده ديگر را تعيين و رنگهاي متفاوتي را اعمال فرماييد. 
در حاليك ه استايل 1 را گزينش نموده ايد . در پنل  Map Style و درحالي كه هنوز همگي چيز در Feature type در موقعيت تعيين ميباشد. روي خصوصيت هاي lable كليك كرده در ليست دوم در منوي Element type روي گذينه hue كليك نمائيد. و مقدار آن را ffa200 براين اساس كل lable هاي شما بجاي پر‌نور خيس شدن تيره مي گردند . به صورت بالا نگاه نمائيد.
مجدد به عبارتي فرايند را تكراد كرده و اينبار water را تعيين كرده و Color را روي 8F9B98 تهيه و تنظيم نمائيد. 
باقي موادتشكيل دهنده را هم طبق جدول ذيل استايل دهي نمائيد. 
Feature type: AllElement type: All > Labels > Text > FillColor: #f8ead0Feature type: AllElement type: All > Labels > Text > StrokeColor: #6a5035Feature type: All > Landscape > Man madeElement type: All > GeometryColor: #9f8053Feature type: All > Landscape > NaturalElement type: All > GeometryColor: #9c9743Feature type: All > Point of interestElement type: All > GeometryColor: #ACA74CFeature type: All > RoadElement type: All > Geometry > FillColor: #d3b681Feature type: All > RoadElement type: All > Geometry > StrokeColor: #644F34Feature type: All > Road > ArterialElement type: All > Geometry > FillColor: #c6a15eFeature type: All > Road > LocalElement type: All > Geometry > FillColor: #b09061Feature type: AllElement type: All > Labels > Text > StrokeColor: #483521Feature type: All > Transit > LineElement type: All > GeometryColor: #876b48Feature type: All > Transit > StationElement type: All > GeometryColor: #a58557خروجي به چنگ آوردن از استايل نقشه . در پنل Map Style روي دكمه ي Show JSON كليك كرده  و يك پنجره گشوده مي‌گردد كه يك آرايه با جاوا در آن درج شده ميباشد. 
كليه نوشته در ميان دو براكت را نسخه برداري نمائيد. [] همگي چيز بجز سرتيتر را . 
در نخستين عملگر ()initialize اين خط را اضافه نمائيد. 
var styles = ;
ماوس خويش را پيش از نماد نقطه ويرگول نهاده و كدي را كه نسخه برداري نموده ايد درج نماييد. 
var styles = [  {    "elementType": "geometry",    "stylers": [      { "hue": "#ffa200" },      { "invert_lightness": true },      { "lightness": 50 },      { "saturation": 35 },      { "gamma": 1.31 }    ]  },{    "elementType": "labels",    "stylers": [      { "hue": "#ffa200" }    ]  },{    "featureType": "water",    "elementType": "geometry",    "stylers": [      { "color": "#8F9B98" }    ]  },{    "elementType": "labels.text.fill",    "stylers": [      { "color": "#f8ead0" }    ]  },{    "elementType": "labels.text.stroke",    "stylers": [      { "color": "#6a5035" }    ]  },{    "featureType": "landscape.natural",    "elementType": "geometry",    "stylers": [      { "color": "#9c9743" }    ]  },{    "featureType": "landscape.man_made",    "elementType": "geometry",    "stylers": [      { "color": "#9f8053" }    ]  },{    "featureType": "poi",    "elementType": "geometry",    "stylers": [      { "color": "#ACA74C" }    ]  },{    "featureType": "road",    "elementType": "geometry.fill",    "stylers": [      { "color": "#d3b681" }    ]  },{    "featureType": "road",    "elementType": "geometry.stroke",    "stylers": [      { "color": "#644F34" }    ]  },{    "featureType": "road.arterial",    "elementType": "geometry.fill",    "stylers": [      { "color": "#c6a15e" }    ]  },{    "featureType": "road.local",    "elementType": "geometry.fill",    "stylers": [      { "color": "#b09061" }    ]  },{    "featureType": "transit.line",    "elementType": "geometry",    "stylers": [      { "color": "#876b48" }    ]  },{    "featureType": "transit.station",    "elementType": "geometry",    "stylers": [      { "color": "#a58557" }    ]  }];
در آخر ي عملگر ()initialize كدهاي تحت را درج فرمائيد. 
var styledMap = new google.maps.StyledMapType( styles, {name: "Styled Map"} );
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
در اثر اين كد ها نقشه ي شما مي بايست به طور صورت ذيل در آمده باشد.

تا كنون نظري ثبت نشده است
ارسال نظر آزاد است، اما اگر قبلا در رویا بلاگ ثبت نام کرده اید می توانید ابتدا وارد شوید.