תרגילי JavaScript כולל פתרונות

עודכן לאחרונה: 8 אוקטובר, 2023

יש לכם שאלות? נשמח לדבר איתכם ולענות על הכל
rt-projects

הקדמה ללימודי JavaScript

שפת TypeScript היא שפה מבית היוצר של מיקרוסופט והיא מקבלת השראה משפת JavaScript.

במסגרת קורס JavaScript לומדים את היסודות של שפה זו ואת הבסיס שיקנה לכל מתכנת מתחיל את המיומנויות שהוא זקוק להן. שפת TypeScript משמשת לבניית יישומי WEB גדולים במיוחד בקורס לומדים לחפש את הבעיות שעלולות להופיע, ליצור, להרחיב ולהשתמש בכל הסוגים.

מדובר בשפת תכנות חינמית המבוססת קוד פתוח. היא תוכננה לפיתוח של מערכות מורכבות ויודעת לבצע קומפילציה לשפת JavaScript. המטרה העיקרית שלשמה פותחה השפה היא להתמודד עם חוסרים שקיימים ב JavaScript בזכות אפשרות הוספת סוגים, מודולים, מחלקות ועוד. נדגיש כי TypeScript היא שפת הרחבה.

JavaScript היא שפת תכנות דינמית מונחית עצמים המותאמת לשילוב באתרי אינטרנט ורצה על ידי הדפדפן בצד הלקוח. אתם יכולים ללמוד עוד על לימוד שפת JavaScript בקורס המקיף שלנו. צוות Real Time College הכין במיוחד בשבילכם תרגול מעשי בשפת JavaScript לבדיקת הידע, ולצורך הכנה לראיונות עבודה.

תרגילים שפת JavaScript

שאלה 1:
כתוב פונקציה שמחזירה עצרת (למשל 5!=120) של מספר נתון (ברירת מחדל 5) או שהמשתמש מקליט?|

שאלה 2:
כתוב פונקציה שמקבלת מהמשתמש סוג רכב, שנת עליה לכביש ומחיר הרכב המקורי.
הפונקציה מחשבת את המחיר של הרכב בהנחה- מהמחיר המקורי יורד 10% לכל שנה מאז עליה לכביש.
שומרת כל הנתונים בתוך מערך ומדפיסה אותו בתוך המסוף.

שאלה 3:
כתבו פונקציה שמקבלת מהמשתמש זמן ומדפיסה ל- console את הקלט שהמשתמש הכניס.
השתמשו ב- promise כדי להציג הודעה אם ההקלטה הצליחה (הזמן פחות מ 2000) או לא

שאלה 4:
כתוב פונקציה שמחזירה את עצרת (למשל 5!=120) של מספר נתון(ברירת מחדל 5) או שהמשתמש מקליט (בצורה רקורסיבית)?

שאלה 5:
כתבו פונקציה שמציגה לנו את התאריך והשעה, כשלוחצים על הכפתור.

שאלה 6:
כתוב פונקציה שמדפיסה את המספרים מ 1 עד מספר נתון (ברירת מחדל 5) או עד המספר שהמשתמש מקליט (בסדר הפוך).

שאלה 7:
כתבו פונקציה שרצה במקביל בעזרת worker. שמאפשרת גם לחשב כפל בריבוע (עד מספר 20) וגם לשנות צבע של הרקע- מירוק לצהוב.

שאלה 8:
כתבו פונקציה מדפיסה את הזמן הנוכחי.

שאלה 9:
כתבו פונקציה כשלוחצים על הכפתור פותחת דף חדש.

שאלה 10:
כתבו פונקציה כשלוחצים על הכפתור, עושה display לכפתור אחר.

תשובות שפת JavaScript

תשובה 1:

<html>
<head></head>
<body>
<p>the result on console</p>
<script>
function factoral_n(num, sum){
for(let i=1; i<=num; i++){
sum=sum*i;
}
return(sum);
}
let num = prompt("enter number:", 5);
let sum = 1;
console.log(factoral_n(num, sum));
</script>
</body>
</html></html>

תשובה 2:

<html>
<head></head>
<body>
<script>

// function to calculate and put discount prices.
// The discount is calculated as a 10% reduction in price for each year.
function calculate_discount_price(year, price){
let x = new Date();
let current_year = x.getFullYear();
let car_age = current_year - year;
for(let i=0; i<car_age; i++){
price= price * 0.9;
}
return (price);
}

// function to add new car object
function new_car(){
var model = prompt("enter your model car?", "BMW");
var year = prompt("enter car's year?", 2012);
var base_price = prompt("enter base price?", 30500);
//var discount_price = prompt("enter discount price?", 28000);
var discount_price = calculate_discount_price(year, base_price);
return{
model : model,
year : year,
base_price : base_price,
discount_price : discount_price
};
}

//function to add new car to array.
function push_to_array(arr){
arr.push(new_car());
arr.push(new_car());
}

var car={
model :"",
year:null,
base_price:null,
discount_price:null
};

let second_hand_cars = [];

push_to_array(second_hand_cars);
console.log(second_hand_cars);

</script>

</body>

</html>

תשובה 3:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Promise time over</title>
</head>
<body>
<input type="text" id="time"/>
<button onclick="call()">Check Time</button>
<script>
const TIME_OVER = 2000;
call= () =>{
t = document.getElementById("time").value;
console.log(t);
let promise = new Promise ((res, rej) =>{
setTimeout(() => res("result"),t);
setTimeout(() => rej("reject"), TIME_OVER);

})
promise
.then(
res => alert("OK "+res),
rej => alert("ERR "+rej)
)
}
</script>
</body>
</html>

תשובה 4:

<html>
<head></head>
<body>
<p>the result on console</p>

<script>
function factoral_n(num, sum){
for(let i=num; i>=1; i--){
sum=sum*i;
}
return(sum);
}

let num = prompt("enter number:", 5);
let sum = 1;
console.log(factoral_n(num, sum));

</script>

</body>
</html>
תשובה 5:
<!DOCTYPE html>
<html>
<head>
</head>

<body style="text-align:center">

<button onclick="timeCurrent()">
click here to see the time
</button>

<p id="printTime"></p>

<script>
function timeCurrent() {
var t = document.lastModified;
document.getElementById("printTime").innerHTML = t;
}
</script>
</body>
</html>


תשובה 6:

<html>
<head></head>
<body>
<p>the result on console</p>
<script>
function printNumbers(num){
for(let i=num; i>=1; i--){
console.log(i);
}
return null;
}
let num = prompt("enter number:", 5);
printNumbers(num);
</script>
</body>
</html>

תשובה 7:

//HTML file
<!DOCTYPE html>
<html>
<body>
<p>Counter: <output id="count"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<button onclick='(document.body.style.backgroundColor === "green") ? document.body.style.backgroundColor = "yellow" : document.body.style.backgroundColor = "green"'>toggle color</button>
<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support Web Workers.</p>
<script>
var work;
function startWorker() {
if(typeof(Worker) !== "undefined") {
if(typeof(work) == "undefined") {
work = new Worker("./demo_workers.js");
}
work.onmessage = function(event) {
document.getElementById("count").innerHTML = event.data;
};
} else {
document.getElementById("count").innerHTML = "Sorry, your browser does not support Web Workers...";
}
}
function stopWorker() {
work.terminate();
work = undefined;
}
</script>
</body>
</html>
//a Web Worker File- demo_workers.js
function countTime(){
for(var i= 0; i <= 20; i++ ){
console.log(i,'*',i,"=",i*i);
postMessage(i*i);
setTimeout("countTime()", 500);
}
}
countTime();

תשובה 8:

<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<script>
function getTime() {
var datee = new Date();
var year = datee.getFullYear();
var month = datee.getMonth()+1;
var day = datee.getDate();
var hour = datee.getHours();
var minute = datee.getMinutes();
var second = datee.getSeconds();
if(month.toString().length == 1) {
month = '0'+month;
}
if(day.toString().length == 1) {
day = '0'+day;
}
if(hour.toString().length == 1) {
hour = '0'+hour;
}
if(minute.toString().length == 1) {
minute = '0'+minute;
}
if(second.toString().length == 1) {
second = '0'+second;
}
var time = year+'/'+month+'/'+day+' '+hour+':'+minute+':'+second;
return time;
}

setInterval(function(){
current = getTime();
document.getElementById("clock").innerHTML = current;
}, 1000);
window.requestAnimationFrame(setInterval);

</script>
<div id="clock"></div>

</body>
</html>

תשובה 9:

<!DOCTYPE html>
<html>
<body>
<p>Click the button to open a new window.</p>

<button onclick="newW()">open new window</button>

<script>
function newW() {
var i = window.open();
i.document.open();
i.document.write("<h1>Hello World!!!</h1>");
i.document.close();
}
</script>

</body>
</html>

תשובה 10:

<!DOCTYPE html>
<html>
<body>
<form>
<input type="button" id="btn1" value="click">
</form>
<p>Click to "Disable" button, to disable the "click" button:</p>
<button onclick="disableBtn()">Disable</button>
<script>
function disableBtn() {
document.getElementById("btn1").disabled = true;
}
</script>
</body>
</html>

בואו ללמוד JavaScript במכללה

מעוניין ללמוד בהרחבה על כל הנושאים המצוינים בתרגילים בשפת JavaScript? הגעת למקום הנכון!!!
קורס JavaScript של Real Time College, נותן לכם את המענה המלא על שפה בסיסית אך חשובה זו, כדי להשתלב במהרה בתעשיית ההייטק.
הקורס מועבר בצורה של תרגול מעשי, יחס אישי והכנה לשוק העבודה!!!

תחומי לימוד הכי מבוקשים בהייטק בשנת 2024
הבא
מערכות Real Time Embedded - המדריך המלא
קרא עוד
הקודם
מדריך פייתון למתחילים
קרא עוד
יש לכם שאלות? נשמח לדבר איתכם ולענות על הכל
© כל הזכויות שמורות Real Time Group