IIT M FOUNDATION DIPLOMA AN EXAM QDF4 28 Apr 2024 - 28 Apr 2024

Consider the following Script embedded in an HTML document.

```javascript
let langName = 'Python';
function showLanguage() {
    let langName = "JavaScript";
    let message = 'Learn ' + langName;
    console.log(message);
}

let message = 'Learn ' + langName;
console.log(message)
console.log(showLanguage());
```

What will be the output on console, if the HTML document is rendered using a browser?

Consider the following Script embedded in an HTML document.

```javascript
let x = [1, 'p', a => a + 1];

for (const i = 0; i<x.length; i++) {
    console.log(i, x[i], typeof(x[i]))
}
```

Which of the following statement is correct, if the HTML document is rendered using a browser?

Assuming the URL gives a valid json response, what will be the output in the console?

```javascript
fetch('https://study.iitm.ac.in/api/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

console.log('End of script');
```

Consider the following Script embedded in an HTML document.

```javascript
let myQual = {
    degree: "B-tech",
    college: "IIT Delhi",
    get qualification(){
        return `degree: ${this.degree}, college: ${this.college}`
    },
    set qualification(q){
        let components = q.split(' ');
        this.degree = components[0];
        this.college = components[1];
    }
}
```

Which of the following statements will throw an error on the console when the HTML document is rendered using a browser?

Consider the following two HTML documents and the Vue app created in script.js file and select the correct option(s).

index1.html
```html
<body>
    <div id="app">
        <h1 v-if="result">Hello am I visible?</h1>
    </div>
    <script src="./script.js"></script>
</body>
```

index2.html
```html
<body>
    <div id="app">
        <h1 v-show="final">Hello am I visible?</h1>
    </div>
    <script src="./script.js"></script>
</body>
```

script.js
```javascript
var app = new Vue({
    el: '#app',
    data: {
        result: false,
        final: false
    }
})
```

Consider the following Vue application and the rendered HTML output below.

Filename: script.js

```javascript
var app = new Vue({
  el: '#app',
  data: {
    items: [
      {id: 1, name:"mad 1"},
      {id: 2, name:"mad 2"},
      {id: 3, name:"mad 3"}
    ]
  }
})
```

Rendered output:
mad 1
mad 2
mad 3

What should be the content of `<div id = "app"></div>` in index.html that generates the given rendered output?

Consider the following Script embedded in an HTML document.

```javascript
class Twowheeler {
  constructor(name) {
    this.name = name;
    this.gear = 4;
    this.seating = 2;
  }

  get description() {
    return `${this.name} has ${this.gear} gear and has ${this.engine} engine.`;
  }
}

class Moped extends Twowheeler {
  constructor(name) {
    super(name);
    this.engine = '4 stroke';
  }
}

let myBike = new Twowheeler("Discover");
let myDrive = new Moped("Activa");
console.log(myDrive.description);
console.log(myBike.description);
```

What will be the output on console, if the HTML document is rendered using a browser?

Consider the following Script embedded in an HTML document.

```javascript
function parentFunc(name) {
  return {
    sayHello: () => "Hi! " + name,
    sayBye: () => "Bye! " + name,
    changeName: (newName) => {
      name = newName;
    },
  };
}

const arpan = parentFunc("Arpan");
const beli = parentFunc("Beli");

console.log(arpan.sayHello());
console.log(beli.sayHello());
arpan.changeName("Beli");
console.log(arpan.sayBye());
```

What will be the output on console, if the HTML document is rendered using a browser?

What will be the text displayed in a web page if the Vue app given below is running
in a development mode?

Filename: index.html

```html
<div id="app1">
    <h1>{{ title }}</h1>
    <h4>{{ greetings() }}</h4>
</div>
<div id="app2">
    <h1>{{ title }}</h1>
    <h4>{{ greetings }}</h4>
</div>
```

Filename: app.js

```javascript
new Vue({
    el: "#app1",
    data: { title: "App No 1" },
    computed: {
        greetings() {
            return "hello from " + this.title;
        },
    },
});

new Vue({
    el: "#app2",
    data: { title: "App No 2" },
    computed: {
        greetings() {
            return "hello from " + this.title;
        },
    },
});
```

Consider the following Script embedded in an HTML document.

```javascript
var var1 = 25;
var var2 = 35;

const myObj = {
    var2: 45,
    var1: 35,
    ObjFunc: function(var3){
        let var4 = var3**2;
        return 10 + this.var2 + var4;
    }
}

let m = myObj.ObjFunc
console.log(m.bind()(5))
console.log(m.call(myObj,6))
```

What will be the output on console, if the HTML document is rendered using a browser?

Consider the following Script embedded in an HTML document.

```javascript
let obj1 = {
    subject: 'Mechanics',
    stream: 'Physics'
}

let obj2 = obj1;
let obj3 = {};

for (let key in obj1){
    obj3[key] = obj1[key];
}

obj2.subject = 'Thermodynamics'
obj3.stream = 'Chemistry'

console.log(Obj1)
```

What will be the output on console, if the HTML document is rendered using a browser?

Consider the following Script embedded in an HTML document.

```javascript
var var1 = 25;

const exObj = {
    var2: 45,
    var1: 35,
    inObj : {
        var1: 45,
        inObjFunc: ()=>{
            return "Value is " + this.var1;
        }
    },
    exObjFunc: function(){
        let var2 = 10;
        return "Value is " + this.var2;
    }
}

let x = exObj.inObj
console.log(x.inObjFunc())
console.log(exObj.exObjFunc())
```

What will be the output on console, if the HTML document is rendered using a browser?

Consider the following Script "script.js" embedded in an HTML document, "index.html" and an external script "app.js" given below.

Filename: index.html
```html
<html lang="en">
<head></head>
<body>
    <script src="./script.js"></script>
</body>
</html>
```

Filename: script.js
```javascript
function loadScript(src, cbf){
    let script = document.createElement('script');
    script.src = src;
    script.onload = () => cbf();
    document.head.append(script);
}

let cbf = function(){
    console.log("callback function executed here.");
    extFunc()
}

loadScript("./support_m6.js", cbf)
extFunc()
```

Filename: app.js
```javascript
console.log("Now I am loaded, let's support")

function extFunc(){
    console.log("loaded and run from external script")
}
```

What will be the output on console, if the HTML document is rendered using a browser?

Consider the below JavaScript program.

```javascript
Array.prototype.double = function (arr) {
  const res = [];
  for (let i=0; i<placeholder.length; i++)
    res.push(placeholder[i] * 2);
  return res;
}

const arr = [2, 3, 7, 8];
console.log(arr.double());
```

What of the following can be used in place of "placeholder" in the above program so that the program yields the below output array?
[ 4, 6, 14, 16 ]

Consider the below JavaScript program.

```javascript
const fetchData = (url) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (url.includes("success")) {
        resolve(`Data fetched successfully from: ${url}`);
      } else {
        reject(`Error fetching data: ${url}`);
      }
    }, 1000);
  });
};

const processData = (data) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(`Processed data: ${data.toUpperCase()}`);
    }, 500);
  });
};

const handleError = (error) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(`Handled Error: ${error}`);
    }, 300);
  });
};

fetchData("https://example.com/success")
  .then(processData)
  .then(fetchData)
  .then(handleError)
  .then((result) => {
    console.log(result);
  })
  .catch((error) => {
    console.error(error);
  });
```

What will be the output of the above program, if executed?

Consider the following Vuex module definition for managing a shopping cart.

```javascript
const cartModule = {
  state: {
    items: []
  },
  mutations: {
    addItem(state, item) {
      state.items.push(item);
    },
  },
  actions: {
    async addToCart({ commit }, item) {
      // TODO: Implement adding item to cart
    },
  },
}
```

Which of the following options correctly completes the code for the "addToCart" action function?

Consider the following Vue application with markup "index.html" and JavaScript file "app.js".

index.html:

```html
<div id = "app">
  <input v-model = "subject" @input = "compute_marks">
  <p> {{marks}} </p>
</div>
<script scr = "app.js"></script>
```

app.js:

```javascript
new Vue({
  el : "#app",
  data : {
    subject : "AppDev",
    marks : 50,
  },

  mounted () {
    this.subject = "AppDev";
    this.marks = 50;
    if (localStorage.marks) {
      this.subject += "1";
      this.marks = parseInt(localStorage.marks) + 20;
      localStorage.marks = this.marks;
      localStorage.subject = this.subject;
    }
    else {
      this.subject += "2";
      this.marks += 20;
    }
  },

  methods : {
    compute_marks() {
      localStorage.setItem("subject", this.subject);
      localStorage.setItem("marks", this.marks + 10);
    }
  }
})
```

Suppose you open "index.html" file in a browser, and type the text "EndTermExam" in the text box shown (after removing the previous text, if any), and hard refresh the page thrice, without clicking anywhere. What will be the value shown in the text box, and the "marks" placeholder, respectively?

Consider the following Vue application with markup "index.html" and JavaScript file "app.js".

index.html:

```html
<div id="app">
  <router-link :to="{ name: 'user', params: { id: 'Jyoti' }}">User Profile</router-link>
  <router-view></router-view>
</div>
<script src="app.js"></script>
```

app.js:

```javascript
const UserProfile = {
  template: `
    <div>
      <h1>User Profile</h1>
      <p>User ID: {{ id }}</p>
    </div>
  `,
  props: ['id']
};

const routes = [
  { path: '/user/:id', name: 'user', component: UserProfile, props: true }
];

const router = new VueRouter({
  routes
});

new Vue({
  el: '#app',
  router,
});
```

Based on this setup, what will be displayed in the browser when the user clicks on the "User Profile" link?