IIT M DIPLOMA FN1 EXAM ETD1 11 Dec 2022 - 11 Dec 2022

Consider the below Vue component and Vuex store definition.

```javascript
const store = new Vuex.Store({
  state: {
    stateA: 10,
    stateB: 20,
    stateC: 30,
  }
})

Vue.component('Vuex-demo', {
  template: `
    <div>
      state A : {{stateA}}
      state B : {{stateB}}
      state C : {{stateC}}
    </div>
  `,
  computed: code
})
```

Which of the following is the best suitable definition of the "code" placeholder in the above app (assuming the store is binded with the Vue app, and the mapState is imported appropriately)?

Suppose an application is being loaded from the origin http://origin1.com. Which of the following origins the browser will allow while making a fetch call, by default?

Which of the following shows the correct output, if the below program is executed?

```javascript
for (var i=1; i<4; i+=2)
    setTimeout(() => console.log(i), 0)
```

Suppose a particular user of an application hosted on http://example1.com has
delete privilege and URL to delete resource with ID 1 is 'http://example1.com/delete?id=1'.
The user visits a malicious website having an image link with definition
```html
"<img src='http://example1.com/delete?id=1' />",
```
and the user clicks on the link, which
in turn leads to the deletion of the resource without the knowledge of the user.

Which of the following correctly describes the above scenario?

Consider the following javascript program. What will be logged on to console after executing the program?

```javascript
const promiseFactory = (data) => {
  return new Promise(((resolve) => {
    resolve(data)
  }))
}

result = []
p1 = promiseFactory('Hello')
p1.then((data) => {
  result.push(data)
  return promiseFactory('World')
}).then((data) => {
  result.push(data)
})

console.log(result)
```

Consider the following javascript code. What will be logged on the console after executing this program?

```javascript
const Person = function (name, city, pinCode) {
  this.name = name
  this.city = city
  this.pin = pinCode
}

Person.prototype.getAddress = function () {
  return `Name: ${this.name}, City: ${this.city}, ${this.pin}`
}

per1 = new Person('Rohit', 'Mumbai', '277403')
console.log(per1.getAddress())
```

Consider the following javascript program. What will be logged on to console after executing this program?

```javascript
const promiseFactory = (isShopOpen) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (isShopOpen) {
        resolve('Making Coffee')
      } else {
        reject('Making Tea')
      }
    }, 1000)
  })
}

const bringTea = promiseFactory(true)
bringTea
  .then((data) => {
    console.log(data)
  })
  .catch((data) => {
    console.log(data)
  })
console.log('Boiling Water ....')
```

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

index.html:

```html
<head>
  <style>
    .booked {
      background-color: red;
    }
  </style>
</head>
<body>
  <div id="app">
    <button :class="{booked:seat.isBooked}" v-for="seat in seats">
      {{seat.seatNo}}
    </button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script src="app.js"></script>
</body>
```

app.js:

```javascript
new Vue({
  el: '#app',
  data: {
    seats: [
      { seatNo: 1, isBooked: false },
      { seatNo: 2, isBooked: true },
      { seatNo: 3, isBooked: true },
    ],
  },
})
```

Suppose the application is running on 'http://localhost:8080'. What will be the background colour of seat with seatNo 1 and 2, respectively, when the user visits the home page of the application (Assume the default background colour of button to be white)?

Consider the below javascript program, and predict the output, if executed. Also, what will be the minimum time taken by the program to execute?

```javascript
exams = ['quiz1', 'quiz2', 'enterm']

new Promise((rej, res) => {
    let count = 2
    let a = setInterval(() => {
        count += 3;
        exams.pop();
        if (count % 2) {
            exams.push('endterm')
        }
        else if (count % 7 == 0) {
            clearInterval(a);
            rej();
        }
    }, 2000)
}).then(d => console.log("Rejected", exams))
  .catch(e => console.log("Resolved", exams))
```

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

index.html:

```html
<div id = "app">
    <input v-model = "subject" @change = "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 += "2";
            this.marks = localStorage.marks + 20;
        }
        else {
            this.subject += "1";
            this.marks += 20;
        }
    },
    methods : {
        compute_marks() {
            localStorage.setItem("subject", this.subject);
            localStorage.setItem("marks", this.marks + 10);
        }
    }
})
```

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

index.html:

```html
<body>
    <div id="app">
        <h4 id="total">Total Run: {{total}}</h4>
        <h4 id="player">{{Player.name}}: {{Player.run}}</h4>
        <button @click="extra=true">Extra</button>
        <button @click="addRuns(4)">Run</button>
    </div>
    <script
        src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"></script>
    <script src="app.js"></script>
</body>
```

app.js:

```javascript
new Vue({
    el: '#app',
    data: {
        extra: false,
        total: 20,
        Player: { name: 'M.S. Dhoni', run: 10 }
    },

    methods: {
        addRuns(run) {
            if (this.extra === true) {
                this.Player.run += run
            }
            this.total += run
            this.extra = false
        },
    },
})
```

Suppose the application is running on 'http://localhost:8080'. If the user clicks on the button with the text "Extra", and then clicks on the button with the text "Run" twice. What will be rendered inside the element with ID "total" and "player", respectively?

Consider the following javascript program, and predict the output if executed.

```javascript
new Promise((arg1, arg2) => {
  if (5 === "5") arg1(5)
  else arg2(5)
}).
then(d => {
  console.log("Checkpoint 3", d);
  throw new Error(20);
  return d * 5;
}).
then(d => {
  console.log("Checkpoint 1", d);
  return d;
}).
catch(e => {
  console.log("Checkpoint 4", e + 6);
  return e * 5;
}).finally(d => {
  console.log("Checkpoint 6", d);
  return d * 5;
}).then(d => {
  console.log("Checkpoint 2", d);
  return d * 5;
})
```

Consider the below Vue class binding and select the most appropriate option(s).

```html
<div v-bind:class="[isClassA ? classA : '', classB]"></div>
```

Consider the following javascript program, and predict the output, if executed as a script.

```javascript
var a = 39
const obj1 = {
    'a' : 50,
    'func' : function () {
        let in_func = () => console.log("This :", this.a, ", Normal :", a)
        in_func();
    }
}

const obj2 = {
    'a' : 60,
    'func' : function () {
        let in_func = () => console.log("This :", this.a, ", Normal :", a)
        in_func();
    }
}

obj1.func.call()
```

Suppose the application is running on 'http://localhost:8080'. What will be rendered by the browser inside the div element with ID 'slot-detail', when the user visits the website home page for the first time (except the button)?

Suppose the application is running on
‘http://localhost:8080’. What will be
rendered inside the ‘router-view’ of
Booking component when user visits
the URL ‘http://127.0.0.1:8080/#/'?

What will be rendered inside the
'router-view' of Booking component
when user visits the URL
'http://127.0.0.1:8080/#/booked'?

Suppose the application is running on
'http://localhost:8080', and a user visits
the same URL. What will be rendered
inside the div element having ID 'sort'?

Suppose the application is running on
'http://localhost:8080', and a user visits
the same URL. What will be rendered
inside the div element having ID "status"?

Consider the application is running on 'http://localhost:8080'. Suppose the user visits the URL 'http://127.0.0.1:8080/#/slot/true'. What will be rendered by the browser inside the "router-view"?

Suppose the user visits the URL
'http://127.0.0.1:8080/#/slot/true?offset=1',
what will be rendered inside the
'router-view'?