1

I was just going through some questions on here without much luck and I was wondering if there is a little piece of syntax that could break up 1 line of code among multiple lines so I don't end up with one insanely long piece of code.

I'm appending some elements in Jquery and the paragraphs and such make it extend very far along so I just want it to look a little less messy.

$('#image_holder').append('<div id="holder_info"><h5>Creatology Concept Design Academy     (Final College Yeah Exibition):</h5><p>For my final year at Weston College, we were asked to     invent a company and produce a series of designs related, this included</p></div>');

I haven't finished the element yet, just want to find a way to tidy it up.

Martin Bodger
  • 77
  • 7
  • you mean de-minifying javascript? word it that way, and code blocks are not paragraphs. – Amelia Jun 03 '13 at 14:16
  • word-wrap css, is it? – A. Wolff Jun 03 '13 at 14:17
  • I was simply asking if there was a symbol for breaking up code so I don't end up with one massively long line of code. And I said "Paragraphs" because the element i'm appending is a

    Also, I've asked nicely so there is no need to be so rude, I would've hoped this website helps to provide answers and not belittle people for being beginners in coding.

     – Martin Bodger Jun 03 '13 at 14:18
  • I'm trying to right now, looking for the edit option on the question. – Martin Bodger Jun 03 '13 at 14:20
  • See also: http://meta.stackexchange.com/questions/66377/what-is-the-xy-problem - i think this probably applies here – Amelia Jun 03 '13 at 14:20
  • If I understand what you're asking, you can just put line breaks between function calls. As long as you break between functions (not in the middle of a word), it will all string together until the next semicolon. If you post your code, we can show you. If' that's what you're asking. – Reinstate Monica -- notmaynard Jun 03 '13 at 14:20
  • 1
    Possible duplicate of [Wrapping long text in CSS](http://stackoverflow.com/questions/1470810/wrapping-long-text-in-css) – Samuel Liew Jun 03 '13 at 14:21
  • Updated the question with the syntax, I just want the code to run without having to be long as all hell, it's just for the sake of keeping everything visible without having to scroll horizontally through my jquery code. – Martin Bodger Jun 03 '13 at 14:23
  • This isn't a bad question. It is a non-obvious feature of JavaScript, especially given the sometimes-optional, sometimes not behavior of semicolons (and by implication, line breaks). – Reinstate Monica -- notmaynard Jun 03 '13 at 14:30

2 Answers2

3

You can break a statement over several lines with no need to do anything special. Just put the semicolon (;) at the end of your statement so that it's clear where it is supposed to end.

When a line doesn't end in a semicolon, JS will look at what comes next to see where it makes sense to insert a semicolon and end the statement. (The (sort of) exception is return.)

If you want to break up a long string, just break it into smaller strings and concatenate.

The example you posted:

$('#image_holder').append('<div id="holder_info"><h5>Creatology Concept Design Academy     (Final College Yeah Exibition):</h5><p>For my final year at Weston College, we were asked to     invent a company and produce a series of designs related, this included</p></div>');

can easily become:

$('#image_holder')
    .append(
        '<div id="holder_info"><h5>Creatology Concept Design Academy     ' +
        '(Final College Yeah Exibition):</h5>' +
        '<p>For my final year at Weston College, we were asked to     ' +
        'invent a company and produce a series of designs related, ' +
        'this included</p></div>'
    );

(The indentation is just a matter of style, not a requirement.)

This works because JS can't insert a semicolon anywhere in those lines and have the code on both side of the semicolon make syntactical sense.

The reason this doesn't work with

return
    true;

or

return
    this;

is because return; can be a statement by itself and so can true or this or anything that normally comes after return, so JS inserts a semicolon after return. This isn't really an exception, just more of a potential trap one has to be aware of.

Derek Henderson
  • 9,388
  • 4
  • 42
  • 71
2

You can close the strings and concatenate with +, and put line breaks wherever you want (outside the strings).

$('#image_holder').append('<div id="holder_info"><h5>' 
 + 'Creatology Concept Design Academy' 
 + '     (Final College Yeah Exibition):</h5>' 
 + '<p>For my final year at Weston College,' 
 + ' we were asked to     invent a company and' 
 + ' produce a series of designs related, this included</p></div>');
Reinstate Monica -- notmaynard
  • 5,464
  • 2
  • 26
  • 42
  • Thank you iamnotmaynard. See everyone, this is how you treat people with a little respect. – Martin Bodger Jun 03 '13 at 14:25
  • You're welcome. Also see the other answer (which is what I was getting at in my comment) for chaining together jQuery calls. Same basic idea, different use. – Reinstate Monica -- notmaynard Jun 03 '13 at 14:27
  • 1
    @MartinBodger take your issues to meta about this; it's fairly common when people ask beginner-style questions which are vague (for example, i thought you wanted de-minified JS until you clarified). Do keep in mind that just because people do not immediately come to your aid, it does not mean they are being rude. – Amelia Jun 03 '13 at 14:31