MAD Study Hub

Home / Past papers / MAD2 End Term / this paper

IIT M FOUNDATION DIPLOMA ENDTERM QPD2 07 Aug 2022 IBA NS - 07 Aug 2022

MAD2 End Term33 questions100 marks21 MCQ · 12 MSQFoundation / Diploma / QPD2
Elapsed 00:00
Q1MCQ0 marks
question figure
Text of the picture (copyable)
THIS IS QUESTION PAPER FOR THE SUBJECT "DIPLOMA LEVEL: MODERN APPLICATION DEVELOPMENT 2"

ARE YOU SURE YOU HAVE TO WRITE EXAM FOR THIS SUBJECT?
CROSS CHECK YOUR HALL TICKET TO CONFIRM THE SUBJECTS TO BE WRITTEN.

(IF IT IS NOT THE CORRECT SUBJECT, PLS CHECK THE SECTION AT THE TOP FOR THE SUBJECTS REGISTERED BY YOU)
  1. Yes
  2. No
Q2MSQ2 marksselect all that apply
Which of the following statement(s) is/are true regarding JavaScript language?
  1. JavaScript is a low level programming language.
  2. The “const” keyword can be used to declare objects with block level scope.
  3. Int, char are some primitive data types in the JavaScript language.
  4. The JavaScript language supports both the first order and higher orderfunctions.
Q3MSQ2 marksselect all that apply
Which of the following statement(s) is/are false?
  1. A web application must implement token based authentication to make theapplication secure.
  2. The JAMStack approach separates out the frontend from the backend, andthey both can be updated/modified independently without affecting the other.
  3. It is recommended to avoid the usage of verbs in the API data URLs.
  4. The idea behind bringing an API is to implement caching.
Q4MSQ2 marksselect all that apply
Which of the following statement(s) is/are true regarding Celery and Redis?
  1. A Celery system can only use Redis as the message broker.
  2. A Celery system may consist of a number of batch jobs.
  3. A Celery system needs worker(s) to execute tasks.
  4. All of these
Q5MSQ2 marksselect all that apply
Which of the following statement(s) is/are true regarding webhooks and polling?
  1. A webhook uses HTTP protocol.
  2. The term “polling” generally refers to short polling.
  3. Webhooks are used for 1 way communication, unlike web sockets.
  4. In polling, the connection to the server is kept open, until the data is available.
Q6MSQ2 marksselect all that apply
Which of the following statement(s) is/are true regarding cookies?
  1. Cookies are stored on the server.
  2. Cookies are stored on the browser.
  3. Browser sends the cookies to the origin server automatically in general.
  4. Client has to include cookies manually with the request, in general.
Q7MSQ2 marksselect all that apply
Which of the following statement(s) is/are true regarding OAuth?
  1. It is a protocol to allow access to resources, hosted on a different server, onbehalf of a user.
  2. It is used for authorization.
  3. It is used for authentication.
  4. None of these
Q8MSQ2 marksselect all that apply
Which of the following is true regarding the Closure in JavaScript?
  1. Closure is the state of the outer function.
  2. Closure is the state of a variable.
  3. Closure is a function along with its lexical environment or surrounding state.
  4. Closures are created every time a function is created in JavaScript.
Q9MCQ3 marks
Which of the following shows the correct output if the javascript program written below is executed? question figure Which of the following shows the correct output if the javascript program written below is executed?
Text of the picture (copyable)
```javascript
const arr = [1, 2, 3, 4, 5, 6, 7, 8]
const arr1 = arr.map(r => r**3)
const arr2 = arr1.filter(r => ((r % 3 == 2) || (r % 4 == 3)))
console.log(arr2)
```
  1. [1, 8, 125, 343, 512]
  2. [8, 27, 64, 343, 512]
  3. [8, 27, 125, 343, 512]
  4. None of these
Q10MCQ3 marks
Consider the following Vue application with markup “index.html” and javascript file “app.js”. question figure Consider the following Vue application with markup “index.html” and javascript file “app.js”. Suppose you open “index.html” file in a browser, and type the text “IIT Madras” in the text box shown (after removing the previous text, if any), and hard refresh the page twice, without clicking anywhere. What will be the value shown in the text box, and the “age” placeholder, respectively?
Text of the picture (copyable)
index.html:
```html
<div id = "app">
    <input v-model = "name" @input = "do_something">
    <p>{{age}}</p>
</div>
<script scr = "app.js"></script>
```

app.js:
```javascript
new Vue({
    el : "#app",
    data : {
        name : "#app",
        age : 0,
    },

    mounted () {
        try {
            this.name = localStorage.getItem("name").split(" ")[0];
            this.age = localStorage.getItem("name").split(" ")[1];
        }
        catch {
            this.name = "Default";
            this.age = "Default";
        }
    },

    methods : {
        do_something() {
            localStorage.setItem("name", this.name);
            localStorage.setItem("age", this.age);
        }
    }
})
```
  1. The app will show an error in the console
  2. Default, Default
  3. IIT, Madras
  4. None of these
Q11MCQ3 marks
Which of the following statements is false regarding CORS and CSRF?
  1. The flask framework enforces CSRF protection by default.
  2. The CORS mechanism allows a developer to secure a web application fromexternal origins.
  3. The CORS headers are generally prefixed with the value “Access-Control-Allow”.
  4. An anti CSRF token must be sent with the request, if CSRF protection isenabled.
Q12MCQ3 marks
Consider the following Vue application with markup “index.html” and javascript file “app.js”. question figure Consider the following Vue application with markup “index.html” and javascript file “app.js”. question figure Consider the following Vue application with markup “index.html” and javascript file “app.js”. What will be the color of text rendered inside the div with ID “run”, if the user clicks on the button with text “Six”, 3 times and the button with text “Four”, 4 times?
Text of the picture (copyable)
index.html:

```html
<html>
<head>
    <style>
        .onstrike {
            color: blue;
        }
    </style>
</head>
<body>
    <div id="app">
        <div :class="{onstrike:changeStrike}" id="run">{{ run }}</div>
        <button @click="run+=4">Six</button>
        <button @click="run+=3">Four</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="app.js" type="module"></script>
</body>
</html>
```
app.js:

```javascript
new Vue({
  el: '#app',
  data: { run: 0 },
  computed: {
    changeStrike() {
      return this.run % 2 === 0 ? true : false
    },
  },
})
```
  1. Black
  2. Blue
  3. White
  4. None of these
Q13MCQ3 marks
Consider the following Vue application with markup “index.html” and javascript file “app.js”. question figure Consider the following Vue application with markup “index.html” and javascript file “app.js”. question figure Consider the following Vue application with markup “index.html” and javascript file “app.js”. What will be the color and font-weight of the text “IITM online degree”?
Text of the picture (copyable)
index.html:

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .active {
            color: blue;
        }
        .bold {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div id="app">
        <Home class="bold" />
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="app.js" type="module"></script>
</html>
```
app.js:
```javascript
Vue.component('Home', {
    template: `<div class='active'>
        IITM online degree
    </div>`,
})

new Vue({
    el: '#app',
})
```
  1. blue, normal
  2. black, normal
  3. blue, bold
  4. black, bold
Q14MCQ3 marks
Consider the following Vue application with markup “index.html” and javascript file “app.js”. question figure Consider the following Vue application with markup “index.html” and javascript file “app.js”. question figure Consider the following Vue application with markup “index.html” and javascript file “app.js”. What will be rendered on the screen?
Text of the picture (copyable)
index.html:

```html
<body>
    <div id="app">
        <template v-for="cont in contributions">
            <div>{{cont.player}}: {{cont.run}}/{{partnerShip}}</div>
        </template>
    </div>
    <script
        src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="app.js" type="module"></script>
</body>
```
app.js:
```javascript
new Vue({
  el: '#app',
  data: {
    partnerShip: 210,
    contributions: [
      { player: 'Rohit', run: 100 },
      { player: 'Kohli', run: 110 },
    ],
  },
})
```
  1. Rohit: 100/210Kohli: 110/210
  2. Rohit: 0.48Kohli: 0.52
  3. Rohit: 100Kohli: 110
  4. None of these
Q15MCQ3 marks
Consider the following Vue application with markup “index.html” and javascript file “app.js”. question figure Consider the following Vue application with markup “index.html” and javascript file “app.js”. question figure Consider the following Vue application with markup “index.html” and javascript file “app.js”. What will be rendered inside the div with ID “collections”, when the user selects the option “Type Two” ?
Text of the picture (copyable)
```html
index.html:

<body>
    <div id="app">
        <div>
            <select v-model="collType">
                <option value="all">All</option>
                <option value="typeOne">Type One</option>
                <option value="typeTwo">Type Two</option>
            </select>
        </div>
        <div id="collections">
            <Numbers :numbers="numbers" v-show="collType==='all' "
            /></Numbers>
            <Numbers :numbers="typeOne" v-show="collType==='typeOne' "
            /></Numbers>
            <Numbers :numbers="typeTwo" v-show="collType==='typeTwo' "
            /></Numbers>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="app.js" type="module"></script>
</body>
```
app.js:
```javascript
Vue.component('Numbers', {
  template: `<div>
    <span v-for="num in numbers">
      {{num}}
    </span></div>`,
  props: ['numbers'],
})

new Vue({
  el: '#app',
  data: {
    numbers: [2, 3, 4, 6, 7],
    collType: 'typeOne',
  },
  computed: {
    typeOne() {
      return this.numbers.filter((num) => num % 2 === 0)
    },
    typeTwo() {
      return this.numbers.filter((num) => num % 2 !== 0)
    },
  },
})
```
  1. 2 3 4 6 7
  2. 2 4 6
  3. 3 7
  4. None of these
Q16MCQ3 marks
Consider the following Vue application with markup “index.html” and javascript file “app.js”. question figure Consider the following Vue application with markup “index.html” and javascript file “app.js”. Suppose the user types “Apple” in the input box (after removing the existing text, if any). What will be rendered inside the div with ID “result”?
Text of the picture (copyable)
index.html:

```html
<body>
    <div id="app">
        <custom-input v-model="searchText"></custom-input>
        <div id="result">Searching for: {{searchText}}</div>
    </div>
    <script
        src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="app.js" type="module"></script>
</body>
```

app.js:

```javascript
Vue.component('custom-input', {
    props: ['value'],
    template: `
        <input
            v-bind:value="value"
            v-on:input="$emit('input', $event.target.value)"
        >
    `
})

new Vue({
    el: '#app',
    data: { searchText: 'type something ...' },
})
```
  1. Searching for:
  2. Apple
  3. Searching for: ‘type something …’
  4. Searching for: Apple
Q17MCQ3 marks
Consider the following Vue application with markup “index.html” and javascript file “app.js”. question figure Consider the following Vue application with markup “index.html” and javascript file “app.js”. question figure Consider the following Vue application with markup “index.html” and javascript file “app.js”. Suppose the application is running on ‘http://127.0.0.1:8080/’. If the user visits the application for the first time and clicks on the button “Go to profile”, what will be displayed on the screen?
Text of the picture (copyable)
index.html:

```html
<body>
    <div id="app">
        <router-view></router-view>
    </div>
    <script
        src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script
        src="https://unpkg.com/vue-router@2.0.0/dist/vue-router.js"></script>
    <script src="app.js" type="module"></script>
</body>
```
app.js:

```javascript
const Profile = {
  template: `<div> Welcome {{this.$route.params.name}}</div>`,
}

const Home = {
  template: `<div> This is home page
    <button @click='goToProfile'> Go to profile </button>
  </div>`,
  methods: {
    goToProfile() {
      this.$router.push({ name: 'profile', params: { name: 'narendra' } })
    }
  },
}

const router = new VueRouter({
  routes: [
    { path: '/profile/:name', name: 'profile', component: Profile },
    { path: '/', component: Home },
  ],
})

new Vue({
  el: '#app',
  router,
})
```
  1. Welcome narendra
  2. Welcome
  3. narendra
  4. None of these
Q18MCQ3 marks
Consider the following Vue application with markup “index.html” and javascript file “app.js”. question figure Consider the following Vue application with markup “index.html” and javascript file “app.js”. question figure Consider the following Vue application with markup “index.html” and javascript file “app.js”. Suppose the application is running on ‘http://127.0.0.1:8080/’. What will be rendered for the URL “http://127.0.0.1:8080/#/” ?
Text of the picture (copyable)
index.html:

```html
<body>
    <div id="app">
        <router-view></router-view>
    </div>
    <script
        src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script
        src="https://unpkg.com/vue-router@2.0.0/dist/vue-router.js"></script>
    <script src="app.js" type="module"></script>
</body>
```
```javascript
app.js:
const Movies = {
  template: `<div><ul>
    <div>Movies</div>
    <router-view />
  </ul></div>`,
}
const Error = {
  template: `<div> Some Error</div>`,
}
const Hindi = {
  template: `<div><ul>
    <li v-for='movie in hindiMovies'>{{movie.name}}</li>
  </ul></div>`,
  data() {
    return {
      movies: [
        { name: 'Soley', language: 'hindi' },
        { name: 'Dexter', language: 'english' },
      ],
    }
  },
  computed: {
    hindiMovies() {
      return this.movies.filter((movie) => {
        return movie.language === 'english'
      })
    },
  },
}

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Movies,
      children: [
        { path: 'hindi', component: Hindi },
        { path: '*', component: Error },
      ],
    },
  ],
})

new Vue({
  el: '#app',
  router,
})
```
  1. Movies
  2. MoviesSome Error
  3. MoviesSoley
  4. MoviesDexter
Q19MCQ3 marks
Consider the following Vue application with markup “index.html” and javascript file “app.js”. question figure Consider the following Vue application with markup “index.html” and javascript file “app.js”. What will be rendered inside the “custom-comp” component?
Text of the picture (copyable)
index.html:

```html
<body>
    <div id="app">
        <custom-comp ref="custom" />
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="app.js" type="module"></script>
</body>
```

app.js:

```javascript
Vue.component('custom-comp', {
    data() {
        return { name: 'Rohit Sharma' }
    },
    template: `<div>Welcome {{name}}</div>`,
})

new Vue({
    el: '#app',
    mounted() {
        this.$refs.custom.name = 'Virat Kohli'
    },
})
```
  1. Welcome Rohit Sharma
  2. Welcome Virat Kohli
  3. Welcome
  4. None of these
Q20MSQ3 marksselect all that apply
Which of the following is the correct way to do class binding in Vue (to apply ‘classA’ on the div element), if the data object in the Vue constructor is defined as below? question figure Which of the following is the correct way to do class binding in Vue (to apply ‘classA’ on the div element), if the data object in the Vue constructor is defined as below?
Text of the picture (copyable)
```
data : {
    classObj : {
        classA : true,
        classB : false
    },

    classA : true,
    classB : false,
}
```
  1. question figure
    text
    ```html
<div :class="{classA : classA, classB : classB}"></div>
```
  2. question figure
    text
    ```html
<div :class="{classA : 'classA', classB : 'classB'}"></div>
```
  3. question figure
    text
    ```html
<div :class = "classObj"></div>
```
  4. question figure
    text
    ```html
<div :class="{classObj}"></div>
```
Q21MSQ3 marksselect all that apply
Which of the following statement(s) is/are false?
  1. The server sent events is a mechanism for a server to push events, and it mustrequire service workers on the client to function properly.
  2. In general, a webhook is meant to pull message(s) from an application.
  3. The usage of a message broker over “point-to-point” communication makesthe application scalable.
  4. There is no difference between webhooks and short polling.
Q22MSQ3 marksselect all that apply
Which of the following statement(s) is/are true regarding Celery and Redis, assuming a task named “send_email” is defined using 2 approaches given below? Approach 1: send_email.delay() Approach 2: send_email.apply_async(countdown = 10)
  1. The approach 1 will wait for a user input before dispatching the task to thecelery system.
  2. The approach 2 will dispatch the task to the celery system after waiting for 10seconds, and start the execution, assuming a worker is available.
  3. The approach 2 will immediately dispatch the task to the celery system, butstart the execution after waiting for 10 seconds, assuming a worker is available.
  4. The approach 1 will immediately dispatch the task to the celery system, andstart the execution, assuming a worker is available.
Q23MSQ3 marksselect all that apply
Which of the following statement(s) is/are false regarding Vuex and Vue router?
  1. In general, an application should have separate Vuex stores for all thecomponents.
  2. A path defined in the routes array in Vue router can consist of a number ofchildren paths.
  3. The wildcard (*) should be put at the top of the routes array in the Vue router,so that it matches with all the paths, which are not implemented.
  4. A Vuex store must be used with all Vue applications.
Q24MSQ3 marksselect all that apply
Which of the following statement(s) is/are true regarding fetch API?
  1. The credentials property of the Request interface allows the user agent tosend or receive cookies in cross-origin requests.
  2. The value “omit” of “credentials” will force the browser not to send cookies withthe request.
  3. The value “include” of “credentials” will allow the browser to send credentialseven in cross-origin requests.
  4. The value “include” of “credentials” will allow the browser to send credentialsonly for same origin requests.
Q25MCQ4.5 marks
Which of the following shows the correct output, if the javascript program written below is executed? question figure Which of the following shows the correct output, if the javascript program written below is executed?
Text of the picture (copyable)
```javascript
new Promise((reject, resolve) => {
  let a = 2 * 4 || 0 / 4;
  let b = 3 * 4 && 0 / 4;

  if (a > b) resolve(a);
  else reject(b);
})
  .then((d) => console.log("Passed:", d))
  .catch((e) => console.log("Failed:", e))
  .finally((d) => {
    console.log("About to finish");
    return "Over";
  })
  .then((d) => console.log("Finished !!", d));
```
  1. Failed: 2About to finishFinished !! Over
  2. Passed: 0About to finishFinished !! undefined
  3. Passed: 0About to finishFinished !! Over
  4. Failed: 8About to finishFinished !! undefined
Q26MCQ4.5 marks
question figure question figure
Text of the picture (copyable)
Suppose you own a company where you want to hire candidates for an upcoming project on a deputation basis, and you have received a lot of applications. On discussing with your team members, you decided to shortlist the candidates based on the following 2 criteria:

1. The candidate must have at least 3 years of experience
2. The candidate's age must be less than 30 years

Fill in the `code1` & `code2`, which can be used in Vuex Store to update the "shortlisted" state variable with the objects of those candidates who satisfy the above-mentioned criteria. Also, predict the length of the state variable "shortlisted", after the mutation has completed its execution.
```javascript
const store = new Vuex.Store({
  state : {
    candidates : [
      {
        name : 'sample1',
        age : 28,
        experience : 2.5
      },
      {
        name : 'sample2',
        age : 35,
        experience : 3.5
      },
      {
        name : 'sample3',
        age : 32,
        experience : 3
      },
      {
        name : 'sample4',
        age : 38,
        experience : 2
      },
    ],
    shortlisted : []
  },

  mutations : {
    update_final(state, minimum) {
      for (candidate of state.candidates)
        code2
    },
  },
  actions : {
    send_task : function (context) {
      code1
    }
  }
})
```
  1. question figure
    text
    ```
code1: this.$store.commit("update_final", 2);
code2: if (candidate.experience >= minimum && candidate.age < 30)
  state.shortlisted.push(company)
Length: 3
```
  2. question figure
    text
    ```
code1: context.commit("update_final", 2);
code2: if (experience >= minimum && candidate.age < 30)
           state.shortlisted.push(company)
```
Length: 2
  3. question figure
    text
    ```javascript
code1: this.$store.commit("update_final", 3);
code2: if (experience >= minimum && candidate.age < 30)
    state.shortlisted.push(company)
```
Length: 3
  4. question figure
    text
    ```
code1: context.commit("update_final", 3);
code2: if (candidate.experience >= minimum && candidate.age < 30)
    state.shortlisted.push(company)
```
Length: 2
Q27MCQ4.5 marks
Consider the following javascript program, and predict the output, if executed. question figure Consider the following javascript program, and predict the output, if executed.
Text of the picture (copyable)
```javascript
let propA = 10;

const obj1 = {
    propA : 20,
    propB : function () {
        console.log(propA, this.propA)
    }
}

const obj2 = {
    propA : 30,
    propB : function () {

        let func = () => console.log(propA, this.propA)

        func()
    }
}

obj2.propB.call(obj1);
```
  1. 10 30
  2. 10 20
  3. 10 undefined
  4. The program will raise an error
Q28MCQ4.5 marks
Consider the following javascript program, and predict the output, if executed. Also, predict the minimum time taken (in seconds) to log the value “Executing” on the console. question figure Consider the following javascript program, and predict the output, if executed. Also, predict the minimum time taken (in seconds) to log the value “Executing” on the console.
Text of the picture (copyable)
```javascript
async function some () {

    let promise = await new Promise((res, rej) => {
        setTimeout(() => res("Execution Started"), 1000)
    });;

    let a = await promise;
    let b = a.replace("e", "")
    return new Promise ((rej, res) => {

        let c = a + "\n" + b;
        rej(c);
    })

}
some().then(d => console.log(d)
).catch(e => console.log("Error"))
console.log("Executing")
```
  1. ExecutingExecution StartedExcution StartedTime: 2 seconds
  2. Execution StartedExcution StartdExecutingTime: 2 seconds
  3. ExecutingExecution StartedExcution StartedTime: 0 seconds
  4. Execution StartedExcution StartedExecutingTime: 0 seconds
Q29MCQ4.5 marks
Consider the following JavaScript program. question figure Consider the following JavaScript program. What will be logged on to the console?
Text of the picture (copyable)
```javascript
const p = function (t) {
  return new Promise(((resolve, reject) => {
    setTimeout((() => {
      resolve(t)
    }), t * 1000)
  }))
}

data = []
asyncFunc = async function () {
  p1 = await p(1)
  p2 = await p(2)
  data.push(p2)
  data.push(p1)
}
asyncFunc()
data.push('Outer')
console.log(data)
```
  1. [‘Outer’, 2, 1]
  2. [‘Outer’, 1, 2]
  3. [2, 1, ‘Outer’]
  4. [‘Outer’]
Q30MCQ4.5 marks
Consider the following Vue application with markup “index.html” and javascript file “app.js”. question figure Consider the following Vue application with markup “index.html” and javascript file “app.js”. question figure Consider the following Vue application with markup “index.html” and javascript file “app.js”. What will be rendered inside the div for ID “run”, if the user clicks on the button with text “Six”, 3 times and the button with text “Four”, 4 times?
Text of the picture (copyable)
index.html:
```html
<html>
<head>
<style>
.onstrike {
color: blue;
}
</style>
</head>
<body>
<div id="app">
<div :class="{onstrike: changeStrike}" id="run">{{run}}</div>
<button @click="run+=4">Six</button>
<button @click="run+=3">Four</button>
</div>
<script
src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="app.js" type="module"></script>
</body>
</html>
```
app.js:
```javascript
new Vue({
  el: '#app',
  data: { run: 0 },
  computed: {
    changeStrike() {
      return this.run % 2 === 0 ? true : false
    },
  },
})
```
  1. 24
  2. 34
  3. 48
  4. None of these
Q31MCQ4.5 marks
Consider the following Vue application with markup “index.html” and javascript file “app.js”. question figure Consider the following Vue application with markup “index.html” and javascript file “app.js”. question figure Consider the following Vue application with markup “index.html” and javascript file “app.js”. What will be rendered inside the div with ID “collections”, when the browser loads the application for the first time?
Text of the picture (copyable)
index.html:

```html
<body>
    <div id="app">
        <div>
            <select v-model="collType">
                <option value="all">All</option>
                <option value="typeOne">Type One</option>
                <option value="typeTwo">Type Two</option>
            </select>
        </div>
        <div id="collections">
            <Numbers :numbers="numbers" v-show="collType==='all'"></Numbers>
            <Numbers :numbers="typeOne" v-show="collType==='typeOne'"></Numbers>
            <Numbers :numbers="typeTwo" v-show="collType==='typeTwo'"></Numbers>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="app.js" type="module"></script>
</body>
```
app.js:
```javascript
Vue.component('Numbers', {
    template: `<div>
        <span v-for="num in numbers">
            {{num}}
        </span></div>`,
    props: ['numbers'],
})

new Vue({
    el: '#app',
    data: {
        numbers: [2, 3, 4, 6, 7],
        collType: 'typeOne',
    },
    computed: {
        typeOne() {
            return this.numbers.filter((num) => num % 2 === 0)
        },
        typeTwo() {
            return this.numbers.filter((num) => num % 2 !== 0)
        },
    }
})
```
  1. 2 3 4 6 7
  2. 2 4 6
  3. 3 7
  4. None of these
Q32MCQ4.5 marks
Consider the following Vue application with markup “index.html” and javascript file “app.js”. question figure Consider the following Vue application with markup “index.html” and javascript file “app.js”. question figure Consider the following Vue application with markup “index.html” and javascript file “app.js”. What will be rendered inside the router-view component of Movies component for the URL “http://127.0.0.1:8080/#/hindi”?
Text of the picture (copyable)
index.html:

```html
<body>
  <div id="app">
    <router-view></router-view>
  </div>
  <script
    src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"
  ></script>
  <script
    src="https://unpkg.com/vue-router@2.0.0/dist/vue-router.js"
  ></script>
  <script src="app.js" type="module"></script>
</body>
```
app.js:
```javascript
const Movies = {
  template: `<div><ul>
    <div>Movies</div>
    <router-view />
  </ul></div>`,
}

const Error = {
  template: `<div> Some Error</div>`,
}

const Hindi = {
  template: `<div><ul>
    <li v-for='movie in hindiMovies'>{{ movie.name }}</li>
  </ul></div>`,
  data() {
    return {
      movies: [
        { name: 'Soley', language: 'hindi' },
        { name: 'Dexter', language: 'english' },
      ],
    }
  },
  computed: {
    hindiMovies() {
      return this.movies.filter((movie) => {
        return movie.language === 'english'
      })
    },
  },
}

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Movies,
      children: [
        { path: 'hindi', component: Hindi },
        { path: '*', component: Error },
      ],
    },
  ],
})

new Vue({
  el: '#app',
  router,
})
```
  1. Some Error
  2. Soley
  3. Dexter
  4. None of these
Q33MCQ2 marks
Which of the following statement(s) is/are correct regarding cookies, local storage, and session storage?
  1. The local storage is a browser based persistent storage.
  2. Cookies are preferred over session or local storage, when the data needs to besent with every request.
  3. The cookies can be set from the server as well as using javascript on the client.
  4. All of these

Answer key

  1. Q1 (MCQ, 0 marks): A
  2. Q2 (MSQ, 2 marks): B, D
  3. Q3 (MSQ, 2 marks): A, D
  4. Q4 (MSQ, 2 marks): B, C
  5. Q5 (MSQ, 2 marks): A, B, C
  6. Q6 (MSQ, 2 marks): B, C
  7. Q7 (MSQ, 2 marks): A, B
  8. Q8 (MSQ, 2 marks): C, D
  9. Q9 (MCQ, 3 marks): C
  10. Q10 (MCQ, 3 marks): C
  11. Q11 (MCQ, 3 marks): A
  12. Q12 (MCQ, 3 marks): B
  13. Q13 (MCQ, 3 marks): C
  14. Q14 (MCQ, 3 marks): A
  15. Q15 (MCQ, 3 marks): C
  16. Q16 (MCQ, 3 marks): D
  17. Q17 (MCQ, 3 marks): A
  18. Q18 (MCQ, 3 marks): B
  19. Q19 (MCQ, 3 marks): B
  20. Q20 (MSQ, 3 marks): A, C
  21. Q21 (MSQ, 3 marks): B, D
  22. Q22 (MSQ, 3 marks): C, D
  23. Q23 (MSQ, 3 marks): A, C, D
  24. Q24 (MSQ, 3 marks): A, B, C
  25. Q25 (MCQ, 4.5 marks): D
  26. Q26 (MCQ, 4.5 marks): D
  27. Q27 (MCQ, 4.5 marks): B
  28. Q28 (MCQ, 4.5 marks): C
  29. Q29 (MCQ, 4.5 marks): D
  30. Q30 (MCQ, 4.5 marks): A
  31. Q31 (MCQ, 4.5 marks): B
  32. Q32 (MCQ, 4.5 marks): C
  33. Q33 (MCQ, 2 marks): D

Concepts this paper tests

Auto-generated summary from the source site. Handy as a checklist; the lessons above explain each idea from scratch.

Here’s a structured summary of the core topics, concepts, principles, and equations essential for the "Modern Application Development 2" exam, along with Mermaid knowledge graphs to visualize relationships.

1. Core Topics & Concepts

A. JavaScript Fundamentals

Key Concepts:

  1. Primitive Data Types

    • JavaScript has 6 primitive types: string, number, boolean, null, undefined, symbol (and bigint in ES2020).
    • No int or char (unlike Java/C++).

  1. Variable Scoping

    • const: Block-scoped, cannot be reassigned (but can be mutated if it’s an object/array).
    • let: Block-scoped, can be reassigned.
    • var: Function-scoped (avoid due to hoisting issues).

  1. First-Class & Higher-Order Functions

    • First-class functions: Treated like any other variable (can be passed as arguments, returned from functions, assigned to variables).
    • Higher-order functions: Functions that take other functions as arguments or return them (e.g., map, filter, reduce).

  1. Closures

    • A function + its lexical environment (surrounding state).
    • Created every time a function is defined (not called).

    • Example:

      function outer() {
  let x = 10;
  return function inner() { console.log(x); };
}
const closure = outer(); // Closure remembers `x`.
closure(); // Logs 10.

  1. Arrow Functions & this Binding

    • Arrow functions do not bind their own this; they inherit it from the parent scope.
    • Regular functions bind this dynamically (based on how they’re called).

  1. Promises & Async/Await

    • Promise states: pending → fulfilled (resolved) or rejected.

    • Methods:

      • .then(): Handles resolution.
      • .catch(): Handles rejection.
      • .finally(): Runs regardless of outcome.

    • Async/Await: Syntactic sugar for promises.

      • await pauses execution until the promise settles.
      • Always wraps in a try/catch for error handling.

  1. Logical Operators (&&, ||)

    • || (OR): Returns the first truthy value or the last falsy value.
    • && (AND): Returns the first falsy value or the last truthy value.

    • Example:

      let a = 2 * 4 || 0 / 4; // 8 (2*4 is truthy)
let b = 3 * 4 && 0 / 4; // 0 (0/4 is falsy)

Key Equations/Code Snippets:

  1. Promise Chaining ``javascript new Promise((resolve, reject) => { if (condition) resolve(value); else reject(error); }) .then(d => console.log("Resolved:", d)) .catch(e => console.log("Rejected:", e)) .finally(() => console.log("Done")); ``
  1. Async/Await Example ``javascript async function fetchData() { try { let data = await someAsyncTask(); console.log(data); } catch (err) { console.error(err); } } ``
  1. Closure Example ``javascript function createCounter() { let count = 0; return function() { return ++count; }; } const counter = createCounter(); console.log(counter()); // 1 ``

B. Web Technologies

Key Concepts:

  1. Authentication vs. Authorization

    • OAuth 2.0: Authorization framework (delegates access to resources).

      • Used for third-party access (e.g., "Login with Google").
      • Not for authentication (though often confused with it).
    • Authentication: Verifying identity (e.g., username/password, JWT).

  1. Tokens & Cookies

    • Cookies:

      • Stored in the browser (not server).
      • Sent automatically with requests to the same origin.
      • Used for session management, tracking.

    • JWT (JSON Web Tokens):

      • Stateless, signed tokens for authentication.
      • Typically sent in the Authorization header.

    • CSRF (Cross-Site Request Forgery):

      • Attack where a malicious site tricks a user into submitting a request.
      • Mitigation: Anti-CSRF tokens (e.g., Flask’s {{ csrf_token() }}).

    • CORS (Cross-Origin Resource Sharing):

      • Mechanism to allow/restrict cross-origin requests.
      • Headers: Access-Control-Allow-Origin, Access-Control-Allow-Credentials.

      • Credentials mode:

        • include: Send cookies in cross-origin requests.
        • omit: Exclude cookies.
        • same-origin: Default (send only for same origin).

  1. API Design Best Practices

    • RESTful APIs:

      • Use nouns for endpoints (e.g., /users, not /getUsers).
      • Avoid verbs in URLs.
      • Use HTTP methods (GET, POST, PUT, DELETE).

    • JAMStack:

      • JavaScript, APIs, Markup.
      • Decouples frontend (static) from backend (dynamic APIs).
      • Enables independent scaling.
  1. Webhooks vs. Polling vs. WebSockets | Feature | Webhooks | Polling (Short/Long) | WebSockets | |------------------|------------------------|---------------------------|---------------------| | Direction | Server → Client (1-way)| Client → Server (2-way) | Full-duplex (2-way) | | Protocol | HTTP | HTTP | WS/WSS | | Efficiency | High (event-driven) | Low (repeated requests) | High | | Use Case | GitHub pushes, Stripe | Legacy systems | Chat apps, gaming |

  1. Server-Sent Events (SSE)

    • One-way communication (server → client).
    • Uses EventSource API.
    • Does not require Service Workers (unlike Web Push).

Key Equations/Code Snippets:

  1. Fetch API with Credentials ``javascript fetch('https://api.example.com/data', { credentials: 'include' // Send cookies }); ``
  1. CORS Headers (Server-Side) ``http Access-Control-Allow-Origin: * Access-Control-Allow-Credentials: true ``
  1. Webhook Example (GitHub) ``javascript // Server sends POST to client's webhook URL on event (e.g., push). app.post('/webhook', (req, res) => { const payload = req.body; // e.g., GitHub push event // Process payload... }); ``

C. Backend & Asynchronous Task Queues

Key Concepts:

  1. Celery & Redis

    • Celery: Distributed task queue for Python.

      • Components:

        • Broker (Redis, RabbitMQ): Manages task queue.
        • Worker: Executes tasks.
        • Result Backend (optional): Stores task results.

    • Task Dispatching:

      • task.delay(): Immediate execution.
      • task.apply_async(countdown=10): Delayed execution (10 seconds).
    • Redis: In-memory data store used as a broker/result backend.

  1. Message Brokers vs. Point-to-Point

    • Message Broker (e.g., Redis, RabbitMQ):

      • Decouples producers/consumers.
      • Enables scalability (multiple workers).

    • Point-to-Point:

      • Direct communication (e.g., HTTP calls).
      • Less scalable (tight coupling).

Key Equations/Code Snippets:

  1. Celery Task Definition ```python from celery import Celery app = Celery('tasks', broker='redis://localhost:6379/0')

@app.task def send_email(): # Task logic pass

# Dispatch immediately send_email.delay()

# Dispatch after 10 seconds send_email.apply_async(countdown=10) ```

D. Frontend Frameworks (Vue.js)

Key Concepts:

  1. Vue.js Fundamentals

    • Reactivity: Data-driven DOM updates.

    • Directives:

      • v-model: Two-way data binding.
      • v-for: Render lists.
      • v-if/v-show: Conditional rendering.
      • v-bind: Bind attributes (e.g., :class).
      • v-on: Event handling (e.g., @click).
    • Lifecycle Hooks: created, mounted, updated, destroyed.

  1. Vue Router

    • Dynamic Routing:

      • path: '/user/:id' → Matches /user/123.
      • this.$router.push({ name: 'profile', params: { id: 123 } }).
    • Nested Routes: Children routes under a parent.
    • Wildcard (*): Catch-all for 404s (should be last in routes).

  1. Vuex (State Management)

    • Core Concepts:

      • State: Single source of truth.
      • Getters: Computed properties for state.
      • Mutations: Synchronous state updates.
      • Actions: Asynchronous operations (commit mutations).

    • Best Practices:

      • Single store for the entire app (not per component).
      • Avoid direct state mutations (use mutations/actions).

  1. Component Communication

    • Props: Parent → Child.
    • Events: Child → Parent ($emit).
    • Refs: Direct child access (this.$refs.child).
    • Provide/Inject: Deep component hierarchy.

  1. Class & Style Binding

    • Object Syntax:

      <div :class="{ active: isActive, 'text-danger': hasError }"></div>

    • Array Syntax:

      <div :class="[isActive ? 'active' : '', errorClass]"></div>

  1. Computed Properties vs. Methods

    • Computed: Cached, reactive (use for derived data).
    • Methods: Re-run on every render (use for event handlers).

  1. Vue CLI & Single-File Components (SFCs)

    • .vue files encapsulate <template>, <script>, and <style>.

Key Equations/Code Snippets:

  1. Vuex Store Example ``javascript const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment(state) { state.count++; } }, actions: { incrementAsync({ commit }) { setTimeout(() => commit('increment'), 1000); } } }); ``
  1. Dynamic Class Binding ``html <div :class="classObj"></div> ` `javascript data: { classObj: { active: true, 'text-danger': false } } ``
  1. Vue Router Nested Routes ``javascript const router = new VueRouter({ routes: [ { path: '/user', component: User, children: [ { path: 'profile', component: Profile }, { path: 'posts', component: Posts } ] } ] }); ``
  1. v-model with Custom Components ``javascript Vue.component('custom-input', { props: ['value'], template: <input :value="value" @input="emit(′input′,emit('input',event.target.value)"> }); ``

E. Storage Mechanisms

FeatureCookiesLocal StorageSession Storage
LifetimeConfigurable (expires)PersistentTab session
Capacity~4KB~5MB~5MB
AccessSent with HTTP requestsClient-side onlyClient-side only
Use CaseSession managementOffline dataTemporary data
SecurityVulnerable to CSRFXSS riskXSS risk

Key Equations/Code Snippets:

  1. Local Storage ``javascript localStorage.setItem('key', 'value'); const value = localStorage.getItem('key'); ``
  1. Session Storage ``javascript sessionStorage.setItem('temp', 'data'); ``
  1. Cookie Manipulation (Client-Side) ``javascript document.cookie = "username=John; expires=Thu, 1 Jan 2025 00:00:00 UTC; path=/"; ``

Graph 2: Web Technologies

Graph 3: Vue.js Ecosystem

Graph 4: Backend & Task Queues

Graph 5: Storage Mechanisms

3. Exam-Specific Tips

  1. JavaScript:

    • Focus on closures, promises, async/await, and this binding.
    • Understand logical operators (&&, ||) and truthy/falsy values.

  1. Web Technologies:

    • OAuth vs. Authentication: OAuth is for authorization, not authentication.
    • CORS/CSRF: Know headers (Access-Control-Allow-Origin) and mitigation (anti-CSRF tokens).
    • Webhooks vs. Polling: Webhooks are event-driven; polling is client-initiated.

  1. Vue.js:

    • Reactivity: Computed properties are cached; methods are not.
    • Vuex: Mutations must be synchronous; actions can be async.
    • Router: Wildcard (*) should be last in routes.

  1. Celery/Redis:

    • delay() vs. apply_async(countdown=10):

      • delay(): Immediate dispatch.
      • apply_async: Delayed dispatch (but not delayed execution unless countdown is set).

  1. Storage:

    • Cookies are sent with every request; use localStorage for large, persistent data.

4. Common Pitfalls

5. Quick Reference Tables

JavaScript Truthy/Falsy Values

ValueTypeTruthy/Falsy
falsebooleanFalsy
0, -0, 0nnumberFalsy
"", `, `stringFalsy
nullobjectFalsy
undefinedundefinedFalsy
NaNnumberFalsy
Everything else-Truthy

Vue.js Lifecycle Hooks

HookWhen Called
beforeCreateBefore instance initialization
createdAfter instance creation
beforeMountBefore DOM insertion
mountedAfter DOM insertion
beforeUpdateBefore reactive data updates DOM
updatedAfter DOM updates
beforeDestroyBefore teardown
destroyedAfter teardown

HTTP Status Codes

CodeMeaning
200OK
201Created
400Bad Request
401Unauthorized
403Forbidden
404Not Found
500Internal Server Error

6. Final Checklist

Before the exam, ensure you can:

  1. JavaScript:

    • Write a closure.
    • Chain promises with .then()/.catch().
    • Explain this in arrow vs. regular functions.

  2. Web:

    • Differentiate OAuth, JWT, and sessions.
    • Configure CORS headers.
    • Explain CSRF mitigation.

  3. Vue.js:

    • Create a Vuex store with mutations/actions.
    • Set up dynamic routes in Vue Router.
    • Bind classes/styles dynamically.

  4. Backend:

    • Dispatch Celery tasks with delays.
    • Compare Redis vs. RabbitMQ as brokers.

  5. Storage:

    • Choose between cookies, localStorage, and sessionStorage.