Skip to content

Statement is a same word for « Instruction » or « Declaration » ? #754

Closed
@MachinisteWeb

Description

@MachinisteWeb

I work on French translation of Vue.

All was clear from guide/syntax.md but with event.md I'm not really sure to have well understand.

This is my current comprehension

In the document syntax.md at line 74, we can read

<!-- this is a statement, not an expression: -->

to describe this {{ var a = 1 }}

For Linguee, Statement means Declaration : http://www.linguee.fr/francais-anglais/search?source=anglais&query=statement
For Google Translate, Statement means Declaration : https://translate.google.fr/?um=1&ie=UTF-8&hl=fr&client=tw-ob#en/fr/statement

So I understant this :

Instruction is Instruction
Statement is Declaration
Expression is Expression

So, I can describe this :

var num = 20 + true, 
    bool;
str = "Hello World"; 
delete str; 
if (num === 21) { 
    bool = true;
} else {
    bool = false;
    num = 0;
}

like this :

┌──────────────────────────────────────────────────┬───────────────────────────────┬───────────────────┬───────────────────────────────────────────────────────────────────────────────────────────────────────────────────┐
│ Instruction                                      │ Instruction                   │ Instruction       │ Instruction                                                                                                       │
├──────────────────────────────────────────────────┼──────────────────────────┬────┼──────────────┬────┼───────────────────────────────────────────────────────────────────────────────────────────────────────────────────┤
│                                                  │                          │    │              │    │ Control Flow                                                                                                      │
│                                                  │                          │    │              │    ├────────────────────────────────────────────────────────┬──────────────────────────────────────────────────────────┤
│ (Declaration) statement                          │                          │    │              │    │ Block statement                                        │ Block statement                                          │
├─────┬───────────────────────────────────────┬────┤                          │    │              │    ├──────┬────────────────┬─────┬──────────────────────┬───┼────────┬───────────────────────┬─────────────────────┬───┤
│     │ Expression                            │    │ Expression               │    │ Expression   │    │      │ Expression     │     │ Instruction          │   │        │ Instruction           │ Instruction         │   │
│     ├─────┬────┬────┬────┬──────┬────┬──────┤    ├─────┬────┬───────────────┤    ├────────┬─────┤    │      ├─────┬─────┬────┤     ├─────────────────┬────┤   │        ├──────────────────┬────┼────────────────┬────┤   │
│     │     │    │    │    │      │    │      │    │     │    │               │    │        │     │    │      │     │     │    │     │ Expression      │    │   │        │ Expression       │    │ Expression     │    │   │
│     │     │    │    │    │      │    │      │    │     │    │               │    │        │     │    │      │     │     │    │     ├─────┬────┬──────┤    │   │        ├──────┬────┬──────┤    ├─────┬────┬─────┤    │   │
│     │ var │ op │ od │ op │ od   │ op │ var  │ sc │ prp │ op │ operand       │ sc │ op     │ var │ sc │      │ od  │ op  │ od │     │ var │ op │ od   │ sc │   │        │ var  │ op │ od   │ sc │ var │ op │ od  │ sc │   │
│     │     │    │    │    │      │    │      │    │     │    │               │    │        │     │    │      │     │     │    │     │     │    │      │    │   │        │      │    │      │    │     │    │     │    │   │
│ var   num   =    20   +    true   ,    bool   ;    str   =    "Hello World"   ;    delete   str   ;    if (   num   ===   21   ) {   bool  =    true   ;    }   else {   bool   =    true   ;    num   =    0     ;    } │
└─────┴─────┴────┴────┴────┴──────┴────┴──────┴────┴─────┴────┴───────────────┴────┴────────┴─────┴────┴──────┴─────┴─────┴────┴─────┴─────────────────┴────┴───┴────────┴──────────────────┴────┴────────────────┴────┴───┘

and that means

These lines are one « Expressions » and work

<!-- data: { num: NaN, bool: false } -->
{{ num = 20 + true, bool }} <!-- 21 -- >
<div v-if="num = 20 + true, bool"></div> <!-- 21 evaluated to true so this is injected in DOM -- >
<!-- data: { str: "" } -->
{{ str = "Hello World" }} <!-- "Hello World" -- >
<div v-if="str = 'Hello World'"></div> <!-- "Hello World" evaluated to true so this is injected in DOM -- >
<!-- data: { str: "" } -->
{{ delete str }} <!-- true -- >
<div v-if="delete str"></div> <!-- true evaluated to true so this is injected in DOM -- >

and same for num === 21, bool = true and num = 0

That means also

These lines are not only « expressions » but « declaration » and « controle flow » and don't work

<!-- data: { num: NaN, bool: false } -->
{{ var num = 20 + true, bool }} <!-- avoid using JavaScript keyword as property name: "var" -- >
<div v-if="var num = 20 + true, bool"></div> <!-- avoid using JavaScript keyword as property name: "var" -- >
<!-- data: { num: NaN, bool: false } -->
{{ if (num === 21) { bool = true; } else { bool = true; num = 0 ; } }} <!-- avoid using JavaScript keyword as property name: "if" -- >
<div v-if="if (num === 21) { bool = true; } else { bool = true; num = 0 ; }"></div> <!-- avoid using JavaScript keyword as property name: "if" -- >

All is clear for me

BUT

Maybe I'm not really understand Statement word ?

In the document guide/events.md at line 107, we can read

Instead of binding directly to a method name, we can also use methods in an inline JavaScript statement:

to describe this <button v-on:click="say('hi')">Say hi</button>

and at line 144 in the same document we can read

Sometimes we also need to access the original DOM event in an inline statement handler

to describe this <button v-on:click="warn('Form cannot be submitted yet.', $event)">Submit</button>

So if I refer to my previous explaination/comprehension, say('hi') and warn('Form cannot be submitted yet.', $event) are not statement but expression**

So I think. Maybe the correct line are

Instead of binding directly to a method name, we can also use methods in an inline JavaScript expression:
Sometimes we also need to access the original DOM event in an inline expression handler

or

Instead of binding directly to a method name, we can also use methods in an inline JavaScript instruction:
Sometimes we also need to access the original DOM event in an inline instruction handler

Because I'm not sure there is an error in two different place I think « maybe statement means instruction and not declaration »

So I ask to Google statement javascript and I see in first result this (http://www.w3schools.com/js/js_statements.asp) :

JavaScript Statements

document.getElementById("demo").innerHTML = "Hello Dolly.";

and I say « No ! It's not a statement, it's an instruction that only contain an « expression » (an affectation), not a « declaration (statement) ».

But where is the thuth ?

So if I decide to say « ok, statement is not declaration, but instruction in general »

In this case the

<!-- this is a statement, not an expression: -->

should be

<!-- this is a declaration, not an expression: -->

Someone for help me to really correctly understand ?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions