የመጀመሪያ የሚደረጉትን ዝርዝር ማመልከቻዎን ያሰማሩ-8 ደረጃዎች

2024 ደራሲ ደራሲ: John Day | [email protected]. ለመጨረሻ ጊዜ የተሻሻለው: 2024-01-30 07:30

ለኮዲንግ ሙሉ በሙሉ አዲስ ከሆኑ ወይም አንዳንድ የጀርባ ኮድ ካደረጉ ፣ መማር የት እንደሚጀመር እያሰቡ ይሆናል። እንዴት ፣ ምን ፣ የት ኮድ እንደሚደረግ እና ከዚያ ፣ አንዴ ኮዱ ከተዘጋጀ ፣ እንዴት ለጠቅላላው ለማየት እንደሚያሰማሩት መማር ያስፈልግዎታል።

ደህና ፣ መልካም ዜናው ኮድ መስጠቱ አስቸጋሪ አይደለም።

የዒላማ ታዳሚዎች - ይህ መማሪያ በድር ልማት ውስጥ ሙያ ለመጀመር ለሚፈልጉ ፣ በአጠቃላይ ስለ የድር ቴክኖሎጂዎች ግንዛቤ ላላቸው ለጀማሪዎች የታሰበ ነው።

የግንባታ ጊዜ: 90 ደቂቃዎች።

አስቸጋሪ: ቀላል።

ደረጃ 1: ምን እንገነባለን?

በዚህ አጋዥ ስልጠና መጨረሻ እኛ የሚከተሉትን እናደርጋለን

• ኤችቲኤምኤል 5 ን በመጠቀም ቀላል የሚደረጉ ዝርዝር የድር መተግበሪያን ይፍጠሩ።
• ጥሩ መልክ እና ፈጣን ዘይቤን ለመጨመር Bootstrap ን ከመተግበሪያችን ጋር ያዋህዱ።
• በመተግበሪያችን ላይ አንዳንድ ተለዋዋጭ ባህሪዎችን ለማከል ጃቫስክሪፕትን እና JQuery ቤተ -መጽሐፍትን ይጠቀሙ።
• ዚይትን/አሁን በመጠቀም መተግበሪያችንን በደመና ውስጥ ያሰማሩ።

በድርጊት ፦

ደረጃ 2 - ወደ ኤችቲኤምኤል ፣ ቡትስትራፕ ፣ ጃቫስክሪፕት እና ጄኬሪ መግቢያ

HTML ምንድን ነው?

Hyper Text Markup Language (HTML) እንደ “የበይነመረብ ቋንቋ” ሊታሰብ ይችላል። ኤችቲኤምኤል የድር ገጾችን ለመፍጠር የሚያገለግል መደበኛ ምልክት ማድረጊያ ቋንቋ ነው። እሱ በመጀመሪያ ሳይንሳዊ ሰነዶችን ለማጋራት የተቀየሰ ነው። ባለፉት ዓመታት ከኤችቲኤምኤል ጋር የተደረጉ ማስተካከያዎች በበይነመረብ ላይ እንደ ድር ገጾች ሊታዩ የሚችሉ ሌሎች በርካታ የሰነዶችን ዓይነቶች ለመግለጽ ተስማሚ አድርገውታል።

የኤችቲኤምኤል ገጽን ለማሳየት የሚያስፈልገው ብቸኛው መስፈርት እንደ Microsoft Internet Explorer (IE) ፣ ሞዚላ ፋየርፎክስ ፣ ጉግል ክሮም ወይም አፕል ሳፋሪ ያሉ የድር አሳሽ ነው።

Bootstrap ምንድነው?

Bootstrap ምላሽ ሰጪ ፣ ተንቀሳቃሽ የመጀመሪያ ድር ጣቢያዎችን ለመገንባት በጣም ታዋቂው ኤችቲኤምኤል ፣ ሲኤስኤስ እና ጃቫስክሪፕት ማዕቀፍ ነው። ቡትስትራፕ በትዊተር የተገነባ ክፍት ምንጭ ፕሮጀክት ነው። እሱ በተከታታይ እነሱን ለመቅረጽ በንጥሎች ላይ ሊተገበሩ የሚችሉ የ CSS ክፍሎችን እና ተጨማሪ ማሻሻያ የሚያከናውን የጃቫስክሪፕት ኮድ ያካትታል።

ጃቫስክሪፕት ምንድነው?

ጃቫስክሪፕት በድር መተግበሪያዎች ውስጥ ለደንበኛ-ጎን ለፕሮግራም የሚያገለግል የፕሮግራም ቋንቋ ነው። የጃቫስክሪፕት ኮድ በአሳሹ የሚመራ እና የድር መተግበሪያ መርሃግብሮች እንደ ተለዋዋጭ የሚያሳዩ ወይም የተደበቁ ፣ መልክን የሚቀይሩ እና የተጠቃሚ ግቤትን የሚያረጋግጡ እንደ ተለዋዋጭ የድር ይዘት እንዲገነቡ ያስችላቸዋል።

JQuery ምንድነው?

JQuery ፈጣን ፣ ትንሽ እና በባህሪያት የበለፀገ የጃቫስክሪፕት ቤተ-መጽሐፍት ፣ እንደ ኤችቲኤምኤል ሰነድ መሻገሪያ ፣ እና ማጭበርበር ፣ የክስተት አያያዝ ፣ እነማ በጣም ቀላል ያደርገዋል።

ሁሉም የ JQuery ኃይል በጃቫስክሪፕት በኩል ደርሷል ፣ ስለሆነም የጃቫስክሪፕትን ጠንካራ መረዳት ኮድዎን ለመረዳት ፣ ለማዋቀር እና ለማረም አስፈላጊ ነው።

ለተጨማሪ ዝርዝሮች

ኤችቲኤምኤል

ጃቫስክሪፕት

JQuery

የጫማ ማሰሪያ

ደረጃ 3 - የመጀመሪያ ገጽዎ በኤችቲኤምኤል

ደረጃ 1 አዲስ አቃፊ ይፍጠሩ

mkdir ቀላል-ታዳጊ

ደረጃ 2-በቀላል-ታዳጊ አቃፊ ውስጥ አዲስ ፋይል ይፍጠሩ እና index.html ብለው ይሰይሙት።

ሲዲ ቀላል-ታዳጊ

ይንኩ index.html

ደረጃ 3 የሚከተለውን ኮድ ወደ index.html ያክሉ።

የሚደረጉ ነገሮች ዝርዝር

የእኔ የማደርገው ዝርዝር

ደረጃ 4: በአሳሽዎ ላይ index.html ን ይክፈቱ።

የእኔ የሚደረጉ ነገሮች ዝርዝር ሲታይ ያያሉ (ከላይ ያለውን ፎቶ ይመልከቱ)።

ደረጃ 4 - የ Bootstrap ን ማከል

በሚሰራው ዝርዝር መተግበሪያ ላይ ፈጣን እና ጥሩ ዘይቤን ለመጨመር በዚህ ክፍል ውስጥ የ ‹Bootstrap› ድጋፍን በእኛ የመረጃ ጠቋሚ html ገጽ ላይ እንጨምራለን።

ማሳሰቢያ -በዚህ መተግበሪያ ውስጥ ቡትስትራፕ 3 ን እንጠቀማለን ፣ እንደ ሴማኒቲ በይነገጽ ማንኛውንም ሌላ የ CSS ማዕቀፍ ይጠቀማሉ።

ደረጃ 1: በራስ መለያው ውስጥ የ Bootstrap CSS ፋይልን ያክሉ

STEP2: በሰውነት መለያው መጨረሻ ላይ የ Bootstrap እና JQuery CDN ስክሪፕቶችን ፋይሎች ያክሉ

ደረጃ 3 በአሳሽዎ ላይ index.html ን ይክፈቱ።

እንኳን ደስ አለዎት ፣ በጥቂት ደረጃዎች ውስጥ የ Bootstrap ድጋፍን በተሳካ ሁኔታ ወደ ገጻችን እንጨምራለን።

ደረጃ 5 - በይነገጽን ያጠናቅቁ

እኛ የእኛን መተግበሪያ የ Bootstrap ድጋፍን በተሳካ ሁኔታ ካከልን በኋላ። አሁን እንሂድ እና ተጠቃሚው አዳዲስ ተግባሮችን እንዲጨምር ለማድረግ በይነገጽ (የተጠቃሚ በይነገጽ) እንወዳደር። የሚደረጉ ነገሮች ዝርዝር በዝርዝሩ ውስጥ አዲስ ንጥሎችን ማከል እንዲሁም ነባር ዕቃዎችን ማስወገድ ይችላል።

ደረጃ 1 የሚከተለውን ኮድ ወደ index.html ያክሉ።

አዲስ ተግባር አክል ሁሉንም አጽዳ!

የእኔ የተግባር ዝርዝር

ደረጃ 2 በአሳሽዎ ላይ ያለውን index.html ፋይል ይክፈቱ።

ደረጃ 6: ሎጂክን ወደ መተግበሪያ ማከል

የተግባር ስም ሲያስገቡ እና አክል የሚለውን ቁልፍ ጠቅ ሲያደርጉ በአሁኑ ጊዜ ምንም ነገር አይከሰትም። ያንን እናስተካክል።

በዚህ ደረጃ መጨረሻ የእኛን index.html ወደ ተለዋዋጭ ገጽ እናዞራለን ፣ ስለዚህ ለተጠቃሚ መስተጋብር ባህሪ ይሆናል።

ደረጃ 1-በቀላል-ታዳጊ ውስጥ አዲስ አቃፊ ይፍጠሩ ፣ js ብለው ይሰይሙት እና በዚያ ፋይል ውስጥ ስክሪፕትን ያኑሩ።

mkdir js

cd js touch script.js

STEP2: በጭንቅላቱ መለያ መጨረሻ ላይ የሚከተለውን ኮድ በማከል script.js ን ወደ index.html ያገናኙ

ደረጃ 3 የሚከተለውን ኮድ ወደ script.js ፋይል ያክሉ

$ (ሰነድ)። ቀድሞውኑ (() => {

var ተግባራት = 0 $ ("#removeAll")። ደብቅ (); / * አዲስ የተግባር ተቆጣጣሪ ያክሉ */ $ ("#አክል")። ላይ ("ጠቅ ያድርጉ" ፣ (ክስተት) => {event.preventDefault () ፤ event.stopPropagation () ፤ var val = $ ("ግቤት"))። val (); ከሆነ (val! == "") {ተግባራት += 1; var elm = $ ("

• "); $ ("#mylist "). append (elem); $ (" ግብዓት ") clikc "፣ ተግባር (ክስተት) {event.preventDefault () ፤ event.stopPropagation () ፤ ተግባራት -= 1; $ (ይህ) ተግባራት */ ከሆነ (ተግባራት> 2) {$ («#remveAll») (); event.stopPropagation (); $ (". ተሰናክሏል")። ወንድሞች እና እህቶች ();

  ማሳሰቢያ -ክሎንን ማግኘት ወይም የኮዱን ዚፕ ከ GitHub ማከማቻዬ ማውረድ ይችላሉ ፣ ይህ ከመንካት ያድንዎታል።

  git clone github.com/ahmnouira/ ቀላል-ቶዶሊስት

  ደረጃ 4 - ኮዱን ይፈትሹ

  አሳሽዎን ይክፈቱ እና አንድ ተግባር ያስገቡ ከዚያም አክልን ጠቅ ያድርጉ ፣ አዲስ ተግባር በዝርዝሩ ውስጥ ሲታከል ያያሉ ፣ 3 ተግባሮችን ካከሉ ግልፅ አዝራር እንደታየ ያስተውላሉ ፣ ይህ ቁልፍ ሁሉንም የተጨመሩ ተግባሮችን እንድናስወግድ ያስችለናል ፣ እርስዎ እንዲሁም በእሱ ቁልፍ ላይ ጠቅ በማድረግ አንድ ተግባር ብቻ መግዛት ይችላሉ።

  ደረጃ 7 (አማራጭ) መተግበሪያውን ያሰማሩ

  

  እስካሁን ድረስ እኛ ቀላል የ todo ዝርዝር መተግበሪያን ገንብተናል ፣ አሁን በደመና ውስጥ ለማሰማራት እና ሥራችንን በዓለም ዙሪያ ላሉት ለሌሎች ለማካፈል ጊዜው አሁን ነው።

  ይህንን ለማሳካት ZEIT Now የተባለ የደመና መድረክን እንጠቀማለን።

  ZEIT አሁን ምንድነው?

  ZEIt Now ለስታቲክ ጣቢያዎች እና አገልጋይ አልባ ተግባራት የደመና መድረክ ነው ፣ ገንቢዎች ወዲያውኑ የሚያሰማሩ ድር ጣቢያዎችን እና የድር አገልግሎቶችን እንዲያስተናግዱ ያስችላቸዋል ፣ ይህ ሁሉ በዜሮ ውቅር።

  1. አሁን CLI ን ይጫኑ

  ከ ZEIT Now ጋር ለማሰማራት አሁን CLI ን መጫን ያስፈልግዎታል።

  አስፈላጊ: npm መጫኑን ያረጋግጡ።

  npm -v # npm ከተጫነ ያረጋግጡ

  npm install -g now@latest # Now CLI የመጨረሻውን ስሪት አሁን በአለምአቀፍ ደረጃ -V # ቼክ አሁን CLI ከተጫነ እና ስሪቱን ያትመው

  2. አሰማራ

  እርስዎ ማድረግ የሚጠበቅብዎት ወደ ማውጫው ውስጥ መግባት እና ከዚያ መተግበሪያዎን በአንድ ትዕዛዝ ማሰማራት ብቻ ነው-

  አሁን --prod # መተግበሪያውን ያሰማሩ

  አንዴ ከተሰማሩ ፣ በአድራሻው ስር ያሉትን የቅርብ ጊዜ ለውጦች ለማጋራት በእያንዳንዱ ማሰማራት ላይ የተመደበ የቅድመ -እይታ ዩአርኤል ያገኛሉ።

  የእኔ መተግበሪያ

  ደረጃ 8 መደምደሚያ

  ያ ብቻ ነው!

  አዳዲስ ባህሪያትን በማቀናበር እና መተግበሪያውን በማስፋት ኮዱን ለማሰስ ነፃነት ይሰማዎት እና በአስተያየቱ አካባቢ ውስጥ የእርስዎን ተሞክሮ እና ጥያቄዎች ያጋሩ።

  ተጨማሪ ሥራዎቼን ለማየት እባክዎን በ GitHub ላይ ክፍት ምንጭን ይጎብኙ።

  myYouTube.

  myLinkedIn

  አስተማሪ የሆነውን read ን ለማንበብ ጊዜ ስላገኙ አመሰግናለሁ።

  መልካም ቀን ይሁንልህ.

  አህመድ ኑይራ