• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

"class" keyword generating Syntax error message but Javascript functions

New Here ,
Nov 19, 2023 Nov 19, 2023

Copy link to clipboard

Copied

I'm a pretty basic user of Dreamweaver so potentially this is something simple but I couldn't find any references on the internet of similar issues.  Issue I'm having is Dreamweaver keeps warning me "There is a syntax error on line xx.  Code hinting may not work until you fix this error."

 

I've used my own examples and pasted directly from W3School thinking, "hey maybe you're tired and class is actually spelled calss in this universe." to no avail.

 

More of an annoyance than a show stopper as the code does execute as expected.  My primary annoyance is the loss of code hinting as I'm no keyboard superstar  😄

 

Version: CS6 version 12.0 Build 5861

Platform: Windows 11 Version 23H2

Steps to reproduce:  type class within <script></script> tags.  Tried both HTML and Javascript files.

 

SicariiOrigin_0-1700397438422.png

SicariiOrigin_1-1700397466315.png

 

 

TOPICS
Code

Views

205

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 19, 2023 Nov 19, 2023

Copy link to clipboard

Copied

CS6 is 10+ year old software that hasn't been updated since its release in 2012.  It's outdated, discontinued and unsupported.  

Why are you using it?   Do yourself a favor and get a modern code editor. 

 

CODE EDITORS:
-- Adobe Dreamweaver CC - https://www.adobe.com/products/dreamweaver.html
-- Codespaces (free, browser-based) - https://github.com/features/codespaces
-- Nova (Mac only, formerly called Coda) - https://nova.app/
-- Pinegrow - https://pinegrow.com/
-- Sublime Text - http://www.sublimetext.com/
-- Visual Studio Code (free) - https://code.visualstudio.com/
-- Wappler ~ Visual Web App Builder - https://wappler.io/

That said, this code does not throw errors in latest version of Dreamweaver CC (ver 21.3) with Code Linting enabled.

<h1>JavaScript Class Methods</h1>
<p>How to define and use a Class method.</p>

<p id="demo"></p>

<script>
class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;

  }
  age() {
    const date = new Date();
    return date.getFullYear() - this.year;
  }
}

const myCar = new Car("Ford", 2014);
document.getElementById("demo").innerHTML =
"My car is " + myCar.age() + " years old.";
</script>

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Nov 20, 2023 Nov 20, 2023

Copy link to clipboard

Copied

The bigger question is I don't know why you are using the very verbose 'class constructor' method when you could just use a simple function( see below code example).

 

Since a couple of years back if you use 'React.js' practically every developer using that js framework dropped using the class constructor workflow and opted to use functions when they were introduced, cleaner and simpler in my view.

 

 

<script>

const carAge = (year) => {
const date = new Date();
return date.getFullYear() - year
}


document.getElementById("demo").innerHTML = `My car is ${carAge(2014)} years old`;
</script>

 

No on-point developer uses - + "blah" + "blah" anymore. Template literals ` ` made it far easier to concatenate long strings which include javascript variables/functions.

 

 

Just as an aside note I doubt DW will support the new arrow function => (in terms of valid syntax code). If not you can just use the old way of writing a function (which in my opinion is somewhat clearer):

 

<script>

function carAge(year) {
const date = new Date();
return date.getFullYear() - year
}


document.getElementById("demo").innerHTML = `My car is ${carAge(2014)} years old`;
</script>

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 20, 2023 Nov 20, 2023

Copy link to clipboard

Copied

quote

The bigger question is I don't know why you are using the very verbose 'class constructor' method when you could just use a simple function( see below code example).

By @osgood_

 

it all depends on how @Sicarii Origin wants to inherit a secondary class, or benefit from the instantiation phase ?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Nov 20, 2023 Nov 20, 2023

Copy link to clipboard

Copied

quote
quote

The bigger question is I don't know why you are using the very verbose 'class constructor' method when you could just use a simple function( see below code example).

By @osgood_

 

it all depends on how @Sicarii Origin wants to inherit a secondary class, or benefit from the instantiation phase ?


By @B i r n o u

 

Without ALL the information it's not conclusive, I'd have to know what the end game is. The only thing I can assume is that the OP doesn't exactly know what they are doing because I cant accept that any advanced developer would need to copy code from the W3 schools website (which can sometimes be a little behind the curve) not using template literals is an example, is my personal opinion.

 

Mind you the last time you pasted some javascript you were still using 'var' (tongue in cheek :))

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 20, 2023 Nov 20, 2023

Copy link to clipboard

Copied

I don't think the question is about the developer's level of advancement, at least in the sense of expertise, but in the sense of his level of learning.

Learning object-oriented programming is a journey that at first remains vague and complex, although once acquired sometimes still remains vague... hence the need for popularization sites that are really superficial  and why not the use W3 schools for that purpose ;).

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Nov 21, 2023 Nov 21, 2023

Copy link to clipboard

Copied

quote

 and why not the use W3 schools for that purpose ;).


By @B i r n o u

 

Because it doesn't always necessarily show the most up to date workflows in my opinion......so by all means if you want to be a few paces behind it does the job. The trick is knowledge and that takes years, then you can observe and tweak code examples to a more advanced level or use something that's more appropriate for what's required, which in this case since the OP hasn't come back, we don't know.

 

I guess the old guys in the industry might still use get element by id  but l much prefer the querySelector method myself. It might not even be a good idea to suggest using innerHTML if the data is not something  that you are controlling.......since there isnt even any html in the string of text being inserted use innerText..................it leaves a lot to be questioned.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Nov 21, 2023 Nov 21, 2023

Copy link to clipboard

Copied

LATEST

I agree with you... it's been a long time since I visited the w3schools site... I had a distant memory of it, so I've just rediscovered the page from which @Sicarii Origin drew his (her ?) inspiration https://www.w3schools.com/Js/js_classes.asp ... 

 

it's true that there's no unorganized framing of the concepts themselves, which could at least have room for instantiation, encapsulation, inheritance with a word on the notion of prototype which often leads to confusion, polymorphism... in short... nothing...

 

just a series of keywords on the left (which are not linked to each other... and are not helfull for newbies)... no trace of private, public or protected definitions...

 

so I can only advise @Sicarii Origin , if (s)he reads this message, to go (no pun intended) to https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object-oriented_programming  and also to this tutorial example, which isn't bad once one've mastered the basic syntax, https://javascript.info/private-protected-properties-methods  (the entire tutorial is pretty good too).

 

the next step, in my opinion, would be to read books by Axel Raushmayer, Addy Osmani, Douglas Crocford, Nicholas Zakas... well... in short, the list is long of what I'd like to recommend...

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines