Pieniä kysymyksiä ohjelmoinnista

Osaako joku pätevä webbikoodari kertoa minkälaisella ratkaisulla kannattaisi lähestyä seuraavanlaista:
Front-end (Reactia) lähettää backendille (Node.js) prosessointikutsun joka triggeröi tiedoston generoinniin joka kestää pitkään (ehkä jopa minuutteja). Sitten kun tuo on valmis niin backendin pitäisi kommunikoida front-endille että valmista, nyt voit ladata tämän generoidun tiedoston ja sitten front-end alkaa lataan sitä.
Onko tuohon mitään näppärämpää tapaa toteuttaa kuin että front-end vaan pollaa tasaisin väliajoin backendiltä että onko valmista?

nimim. 11 vuotta mobiili- ja deskaridevausta taustalla ja nyt on pitänyt sekaantua webbidevaukseen ja ennen niin helpot asiat ovat yht'äkkiä vaikeita.
 
JCSH sanoi:
Osaako joku pätevä webbikoodari kertoa minkälaisella ratkaisulla kannattaisi lähestyä seuraavanlaista:
Front-end (Reactia) lähettää backendille (Node.js) prosessointikutsun joka triggeröi tiedoston generoinniin joka kestää pitkään (ehkä jopa minuutteja). Sitten kun tuo on valmis niin backendin pitäisi kommunikoida front-endille että valmista, nyt voit ladata tämän generoidun tiedoston ja sitten front-end alkaa lataan sitä.
Onko tuohon mitään näppärämpää tapaa toteuttaa kuin että front-end vaan pollaa tasaisin väliajoin backendiltä että onko valmista?

nimim. 11 vuotta mobiili- ja deskaridevausta taustalla ja nyt on pitänyt sekaantua webbidevaukseen ja ennen niin helpot asiat ovat yht'äkkiä vaikeita.
Napsauta laajentaaksesi...
WebSocket
www.npmjs.com

ws

Simple to use, blazing fast and thoroughly tested websocket client and server for Node.js. Latest version: 8.18.0, last published: 6 months ago. Start using ws in your project by running `npm i ws`. There are 19768 other projects in the npm registry using ws.
www.npmjs.com www.npmjs.com
 
Lisäksi sitten kannattaa miettiä, miten tehdään kun se yhteys kuitenkin katkeaa ja frontti sammutetaan sen usean minuutin odottelun aikana. Ei läheteä uudestaan samaa kutsua (tai jos lähetetään, bäkki tajuaa että se saatiin jo), osataan alkaa odotella sitä jo lähetettyä kutsua ja ei katkaista sitä WS-yhteyttä kun mitään ei tapahdu jne. Sinänsä WebSocket on tehokas tapa 2-suuntaiseen kommunikointiin.
 
Teen e2e-testejä React-sovellukseeni Cypressillä. Nyt menossa rekistreröintilomakkeen testit. Rekisteröintilomakkeessa on Googlen reCAPTCHA-widgetti. Miten tuon saisi ohitettua testien ajaksi niin, että rekisteröinnin voisi suorittaa koskematta widgettiin? Lomake on tehty Formikilla:

JavaScript: 
      <Formik
        initialValues={{
          username: '',
          email: '',
          password: '',
          confirmPassword: '',
          recaptcha: '',
        }}
        validationSchema={signupSchema}
        onSubmit={handleSignup}
      >
        {({
          values,
          errors,
          touched,
          isSubmitting,
          handleChange,
          handleBlur,
          setFieldValue,
        }) => (
          <SForm>
            <SField>
              <Label htmlFor='username'>Username</Label>
              <Input
                type='text'
                name='username'
                onChange={handleChange}
                onBlur={handleBlur}
                value={values.username}
              />
              <FormError
                message={errors.username}
                show={errors.username && touched.username}
              />
            </SField>
            <SField>
              <Label htmlFor='email'>Email</Label>
              <Input
                type='text'
                name='email'
                onChange={handleChange}
                onBlur={handleBlur}
                value={values.email}
              />
              <FormError
                message={errors.email}
                show={errors.email && touched.email}
              />
            </SField>
            <SField>
              <Label htmlFor='password'>Password</Label>
              <Input
                type='password'
                name='password'
                onChange={handleChange}
                onBlur={handleBlur}
                value={values.password}
              />
              <FormError
                message={errors.password}
                show={errors.password && touched.password}
              />
            </SField>
            <SField>
              <Label htmlFor='confirm-password'>Confirm Password</Label>
              <Input
                type='password'
                name='confirmPassword'
                onChange={handleChange}
                onBlur={handleBlur}
                value={values.confirmPassword}
              />
              <FormError
                message={errors.confirmPassword}
                show={errors.confirmPassword && touched.confirmPassword}
              />
            </SField>
            <TextRow>
              Already have an account?{' '}
              {onModal ? (
                <Link name='Log In' onClick={() => navigateTo('log in')}>
                  Register
                </Link>
              ) : (
                <Link to='/login' name='Log In'>
                  Register
                </Link>
              )}
            </TextRow>
            <br />
            <Notification position='form' notification={notification} />
            <br />
            <ReCaptchaContainer>
              <Reaptcha
                ref={recaptchaRef}
                sitekey={config.RECAPTCHA_SITE_KEY}
                onVerify={token => setFieldValue('recaptcha', token)}
                theme='dark'
              />
            </ReCaptchaContainer>
            <FormError
              message={errors.recaptcha}
              show={
                errors.recaptcha &&
                touched.username &&
                touched.password &&
                touched.email &&
                touched.confirmPassword
              }
            />
            <br />
            <Button
              type='submit'
              size='big'
              fontCase='uppercase'
              content='Sign Up'
              disabled={isSubmitting}
            />
          </SForm>
        )}
      </Formik>

Normitilanteessa siis reCAPTCHAn ratkaisu aiheuttaa setFieldValue-metodin kutsun. Tarvitsisi Cypressistä päästä asettamaan tuolle kentälle mikä tahansa arvo, että lomakkeen saisi lähetettyä. Vinkkejä?
 
Eli mikään kaunein tapa.
JavaScript: 
{env !== 'test' && (
  <ReCaptchaContainer>
    <Reaptcha
      ref={recaptchaRef}
      sitekey={config.RECAPTCHA_SITE_KEY}
      onVerify={token => setFieldValue('recaptcha', token)}
      theme='dark'
      />
  </ReCaptchaContainer>
  )
}

ReCaptcha voi myös luoda test env avaimet.
 
nnaku sanoi:
Eli mikään kaunein tapa.
JavaScript: 
{env !== 'test' && (
  <ReCaptchaContainer>
    <Reaptcha
      ref={recaptchaRef}
      sitekey={config.RECAPTCHA_SITE_KEY}
      onVerify={token => setFieldValue('recaptcha', token)}
      theme='dark'
      />
  </ReCaptchaContainer>
  )
}

ReCaptcha voi myös luoda test env avaimet.
Napsauta laajentaaksesi...
En tehnyt tällä tavalla, koska halusin, että widgetti renderöityy. Laitoin tuon environment ehdon suoraan validaattoriin ja sillä hoitui.
 
Uutta kysymystä. Mulla on tietokanta testejä varten ja olen sitä varten tehnyt scriptin, joka luo siellä olevan alkudatan. Ongelmana on, että joskus scripti jää jumiin eikä tee mitään. Tässä koodi:

JavaScript: 
/*
This is the test db seeder script.

After resetting the testing db, this script can be used to rebuild it
completely.
*/

const bcrypt = require('bcrypt')
const User = require('../../models/user')
const Conference = require('../../models/conference')
const Division = require('../../models/division')
const Team = require('../../models/team')
const Player = require('../../models/player')
const Linescore = require('../../models/linescore')
const SkaterBoxscore = require('../../models/skater-boxscore')
const GoalieBoxscore = require('../../models/goalie-boxscore')
const {
  testUser,
  testConferences,
  testDivisions,
  testTeams,
  testPlayers,
} = require('./db-seed-data')
const testLinescores = require('./db-seed-linescore-data')
const testBoxscores = require('./db-seed-boxscore-data')

const createTestUser = async () => {
  const { username, email, password, isVerified } = testUser

  const saltRounds = 10
  const passwordHash = await bcrypt.hash(password, saltRounds)

  const user = new User({
    username,
    usernameLower: username.toLowerCase(),
    email: email.toLowerCase(),
    passwordHash,
    isVerified,
  })

  await user.save()
}

const createConferences = async () => {
  await Conference.insertMany(testConferences)
}

const createDivisions = async () => {
  const conferences = await Conference.find({})

  // Add conference id's in the division data
  const divisionData = testDivisions.map(division => {
    const conference = conferences.find(
      conference => conference.conferenceId === division.conferenceId
    )
    return {
      ...division,
      conference: conference._id,
    }
  })

  // Save divisions
  const divisions = await Division.insertMany(divisionData)

  // Save division id's in the conference data
  const newConferences = conferences.map(conference => {
    const confDivisions = divisions.filter(
      division => String(division.conference) === String(conference._id)
    )

    conference.divisions = confDivisions

    return conference
  })

  // Save conferences with division id's in the db
  const confPromises = newConferences.map(conf => conf.save())
  await Promise.all(confPromises)
}

const createTeams = async () => {
  const conferences = await Conference.find({})
  const divisions = await Division.find({})

  // Add conference and division id's to team objects
  const teamData = testTeams.map(team => {
    const conferenceObj = conferences.find(
      conference => conference.conferenceId === team.conferenceId
    )
    const divisionObj = divisions.find(
      division => division.divisionId === team.divisionId
    )

    return {
      ...team,
      conference: conferenceObj._id,
      division: divisionObj._id,
    }
  })

  const newTeams = await Team.insertMany(teamData)

  // Add teams to conferences
  const newConferences = conferences.map(conference => {
    const teams = newTeams.filter(
      team => String(team.conference) === String(conference._id)
    )

    conference.teams = teams.map(team => team._id)
    return conference
  })

  // Add teams to divisions
  const newDivisions = divisions.map(division => {
    const teams = newTeams.filter(
      team => String(team.division) === String(division._id)
    )

    division.teams = teams.map(team => team._id)
    return division
  })

  // Create promises for saving
  const confPromises = newConferences.map(conf => conf.save())
  const divPromises = newDivisions.map(div => div.save())

  // Save conferences and divisions
  await Promise.all([...confPromises, ...divPromises])
}

const createPlayers = async () => {
  const teams = await Team.find({})

  // Add team id's to players
  const playerData = testPlayers.map(player => {
    const teamObj = teams.find(team => team.teamId === player.teamId)

    return {
      ...player,
      currentTeam: teamObj._id,
    }
  })

  // Add players to the db
  const newPlayers = await Player.insertMany(playerData)

  // Add players to teams
  const newTeams = teams.map(team => {
    const players = newPlayers.filter(
      player => String(player.currentTeam) === String(team._id)
    )

    team.players = players.map(team => team._id)
    return team
  })

  // Create promises for saving
  const teamPromises = newTeams.map(team => team.save())

  // Save teams
  await Promise.all(teamPromises)
}

const createLinescores = async () => {
  const teams = await Team.find({}, { teamId: 1 })

  // Replaces team and opponentId fields with MongoDB id's
  const linescores = testLinescores.map(linescore => {
    const team = teams.find(team => team.teamId === linescore.team)
    const opponent = teams.find(team => team.teamId === linescore.opponentId)

    return {
      ...linescore,
      team: team._id,
      opponentId: opponent._id,
    }
  })

  const savedLinescores = await Linescore.insertMany(linescores)

  // Save new linescores id's to the teams.
  let teamPromises = []
  teams.forEach(team => {
    const linescores = savedLinescores.filter(
      linescore => String(linescore.team) === String(team._id)
    )

    team.linescores = linescores

    teamPromises = [...teamPromises, team.save()]
  })

  await Promise.all(teamPromises)
}

const createBoxscores = async () => {
  const players = await Player.find({})
  const teams = await Team.find({})

  // Add mongodb id's to the boxscore objects
  const boxscores = testBoxscores.map(boxscore => {
    const homeTeam = teams.find(team => team.teamId === boxscore.homeTeam)
    const awayTeam = teams.find(team => team.teamId === boxscore.awayTeam)
    const player = players.find(player => player.playerId === boxscore.player)

    return {
      ...boxscore,
      homeTeam: homeTeam._id,
      awayTeam: awayTeam._id,
      player: player._id,
    }
  })

  // Get only skater boxscores
  const skaterBoxscores = boxscores.filter(
    boxscore => boxscore.saves === undefined
  )

  // Get only goalie boxscores
  const goalieBoxscores = boxscores.filter(
    boxscore => boxscore.saves !== undefined
  )

  const newSkaterBoxscores = await SkaterBoxscore.insertMany(skaterBoxscores)
  const newGoalieBoxscores = await GoalieBoxscore.insertMany(goalieBoxscores)

  let playerPromises = []

  // Add boxscores in an array under every skater and goalie
  players.forEach(player => {
    let boxscores = []
    const isGoalie = player.primaryPosition === 'G'

    if (isGoalie) {
      boxscores = newGoalieBoxscores.filter(
        boxscore => String(boxscore.player) === String(player._id)
      )
    } else {
      boxscores = newSkaterBoxscores.filter(
        boxscore => String(boxscore.player) === String(player._id)
      )
    }

    player.boxscores = boxscores
    playerPromises = [...playerPromises, player.save()]
  })

  await Promise.all(playerPromises)
}

const seedDb = async () => {
  if (process.env.NODE_ENV !== 'test') {
    throw new Error('This script runs only in testing context.')
  }

  console.log('Seeding the db')

  await createTestUser()
  console.log('createTestUser')

  await createConferences()
  console.log('createConf')
  await createDivisions()
  console.log('createDiv')
  await createTeams()
  console.log('createTeams')
  await createPlayers()
  console.log('createPlys')
  await createLinescores()
  console.log('createLines')
  await createBoxscores()
  console.log('createBs')
}

module.exports = seedDb

Pahoittelut pitkästä koodista. Eli silloin kun funktio jää jumiin, niin se jumittaa jo tuohon ensimmäiseen "await createTestUser()" vaiheeseen seedDb-funktiossa. Joskus funktio taas menee kokonaan läpi ilman ongelmia.

Kutsun tuota funktiota GraphQL-rajapinnan läpi testeistä. Tässä vielä GraphQL-resolveri, joka hoitaa funktiokutsun:
JavaScript: 
const resolvers = {
  Query: {
    GetToken: async () => {
      const token = await Token.findOne({})
      return token
    },
  },
  Mutation: {
    ResetDB: async () => {
      await resetDb()
      return true
    },
    SeedDB: async () => {
      await seedDb()
      return true
    },
  },
}
 
Oletko debugannut onko se toi bcrypt vai mongo? Oma veikkaus on joku jumi mongossa. Kannattaiskohan laittaa jotain sleeppejä sinne tänne, että kaikki kannat yms. initialisoituu kunnolla. Vaikee sanoo muuta kun debuggia tarkemmin joka paikkaan mihin se jää.
 
©©© sanoi:
Oletko debugannut onko se toi bcrypt vai mongo? Oma veikkaus on joku jumi mongossa. Kannattaiskohan laittaa jotain sleeppejä sinne tänne, että kaikki kannat yms. initialisoituu kunnolla. Vaikee sanoo muuta kun debuggia tarkemmin joka paikkaan mihin se jää.
Napsauta laajentaaksesi...
Se jää tuohon user.save() kohtaan. Mitään erroria ei tule.
 
Auttaiskohan laittaa se try catch blokkiin. Sieltä ei varmaan ikinä tule sitä promisea joten sen täytyy crashaa jossain välissä.
 
Ongelma olikin toisessa funktiossa, joka resetoi tietokannan.

Koodi: 
/*
Resets the test db completely by dropping it.
*/

const mongoose = require('mongoose')

const resetDb = async () => {
  if (process.env.NODE_ENV !== 'test') {
    throw new Error('This script runs only in testing context.')
  }

  console.log('reset-db.dropping-database')
  await mongoose.connection.db.dropDatabase()
  console.log('reset-db.database-dropped')
  await mongoose.connection.close()
}

module.exports = resetDb

Tuolla suljen tietokantayhteyden, jonka jälkeen se seedDB ei tietenkään toimi. Noi molemmat funktiot oli alunperin itsenäisiä npm runilla ajettavia ohjelmia, jolloin tuo tietokantayhteyden sulkeminen oli tarpeellista. Kun muunsin tuon backend-funktioksi, niin unohdin ottaa tuon yhteyden sulkemisen pois.
 
Mitäs vinkkejä ison Javascript-pohjaisen projektin handlaamiseen jossa devaajia vähän laidasta laitaan? Style guidet, JSdoc, unit testit? Elikkä keskustelua tuotantokoodin ylläpitämiseen enterprise-ympäristössä. Pitäisikö tehdä jopa oma topic tälle?
 
©©© sanoi:
Mitäs vinkkejä ison Javascript-pohjaisen projektin handlaamiseen jossa devaajia vähän laidasta laitaan? Style guidet, JSdoc, unit testit? Elikkä keskustelua tuotantokoodin ylläpitämiseen enterprise-ympäristössä. Pitäisikö tehdä jopa oma topic tälle?
Napsauta laajentaaksesi...

Tuosta tulikin palautetta jo, oma aihe ei varmaan olisi huono.

Heitän silti:
Idioottiselkeät (ja helpot, docker?) ohjeet kehitysympäristön pystyttämiseen, niin siihen ei mene aikaa ja energiaa...
 
Seuraa varmaan todella yksinkertainen kysymys, mutta en tällain aloittelijana saa nyt selvää, miksi koodi toimii niinkuin toimii. Yritin Arduinolle kääntää tällaista c++-pätkää, joka antaisi alkuluvut 1-10 välillä (kopioin netistä). Pitkän töhöilyn jälkeen voin olla sekoittanut pääni niin etten tajua perusasioita . Pardon my French, en osaa termejä.

C++: 
#include <iostream>
using namespace std;

int main () {
   int i, j;
   
   for(i = 2; i<10; i++) {

      for(j = 2; j <= (i/j); j++)
      
         if(!(i%j)) break; // if factor found, not prime
         
         if(j > (i/j)) cout << "prime number i: " << i << " "  << "j: " << j  << " \n"  
         << "j <= i/j:  "  << j << " <= " <<  i/j <<   "  \n" 
         <<   "  \n" ;
   }   
   return 0;
}

Koodi: 
prime number i: 2 j: 2 
j <= i/j:  2 <= 1  
  
prime number i: 3 j: 2 
j <= i/j:  2 <= 1  
  
prime number i: 5 j: 3 
j <= i/j:  3 <= 1  
  
prime number i: 7 j: 3 
j <= i/j:  3 <= 2

Miksi tuo sisempi for loop pyörähtää vielä sen kerran, kun se saa ratkottua alkuluvun i, vaikka loopin ehto j <= i/j ei ole enää tosi. Esimerkiksi kun i = 5, niin j = 3 vaikka 3 <= 1 -> epätosi.
 
Painostaja sanoi:
Seuraa varmaan todella yksinkertainen kysymys, mutta en tällain aloittelijana saa nyt selvää, miksi koodi toimii niinkuin toimii. Yritin Arduinolle kääntää tällaista c++-pätkää, joka antaisi alkuluvut 1-10 välillä (kopioin netistä). Pitkän töhöilyn jälkeen voin olla sekoittanut pääni niin etten tajua perusasioita . Pardon my French, en osaa termejä.

C++: 
#include <iostream>
using namespace std;

int main () {
   int i, j;
  
   for(i = 2; i<10; i++) {

      for(j = 2; j <= (i/j); j++)
     
         if(!(i%j)) break; // if factor found, not prime
        
         if(j > (i/j)) cout << "prime number i: " << i << " "  << "j: " << j  << " \n" 
         << "j <= i/j:  "  << j << " <= " <<  i/j <<   "  \n"
         <<   "  \n" ;
   }  
   return 0;
}

Koodi: 
prime number i: 2 j: 2
j <= i/j:  2 <= 1 
 
prime number i: 3 j: 2
j <= i/j:  2 <= 1 
 
prime number i: 5 j: 3
j <= i/j:  3 <= 1 
 
prime number i: 7 j: 3
j <= i/j:  3 <= 2

Miksi tuo sisempi for loop pyörähtää vielä sen kerran, kun se saa ratkottua alkuluvun i, vaikka loopin ehto j <= i/j ei ole enää tosi. Esimerkiksi kun i = 5, niin j = 3 vaikka 3 <= 1 -> epätosi.
Napsauta laajentaaksesi...

Tulostat tuossa j sisällön sen jälkeen kun sisemmästä forista on poistuttu. Silmukasta poistutaan jos ehto ei täyty, eli vasta kun j = 3. Runkoa ei enää suoriteta. Ja runkonahan on tuossa pelkkä if(!(i%j)) break; ja seuraava on silmukan ulkopuolella.
 
Olis hieman kysymyksiä javascriptistä liittyen erääseen tehtävään. Jos joku voi autella niin laita y-viestiä tulemaan niin kerron lisää.
 
Eli kyse oli koulutehtävästä, jota ei voinut pistää julkiseen levitykseen, jotta kurssin tai vastaavan opettaja ei varmasti olisi nähnyt, että jostain on ruinattu valmiita vastauksia?
 
Xiyng sanoi:
Eli kyse oli koulutehtävästä, jota ei voinut pistää julkiseen levitykseen, jotta kurssin tai vastaavan opettaja ei varmasti olisi nähnyt, että jostain on ruinattu valmiita vastauksia?
Napsauta laajentaaksesi...

Kyllä se oli täällä näkyvillä hyvän tovin (ja suoraan kerrottiinkin olevan koulutehtävä), ja siihen oli joku jo vastannutkin. Oli kyse tuloveron laskemisesta hyvin yksinkertaisilla if-else rakenteilla. Minneköhän se tuohon tullut vastaus katosi ja miksi se tehtävä piti tosiaan editoida piiloon?
 
  • Tykkää
Reactions: hmb
edup sanoi:
Kyllä se oli täällä näkyvillä hyvän tovin (ja suoraan kerrottiinkin olevan koulutehtävä), ja siihen oli joku jo vastannutkin. Oli kyse tuloveron laskemisesta hyvin yksinkertaisilla if-else rakenteilla. Minneköhän se tuohon tullut vastaus katosi ja miksi se tehtävä piti tosiaan editoida piiloon?
Napsauta laajentaaksesi...
Mjaah. Erikoista on siinä tapauksessa, kun ei tosiaan näy jälkeäkään mistään eikä ole viesteissä mitään muokkausmerkintöjäkään.
 
Ok, aattelin että otan pois ja laitan osan vain tänne. Koulutehtävä tuloverosta tosiaan mutta en oo juurikaan ennen ohjelmoinut.

eli esimerkiksi tulot on 25000,

18100 - 27200 verotettavan ansiotulon rajat (seuraavat rajat on sitten 27200 - 44800 jne.)
vero alarajan kohdalla 8€
6 Vero alarajan ylittävästä tulon osasta, %

www.vero.fi

Valtion tuloveroasteikko 2020

www.vero.fi www.vero.fi

if(ansiotulo < 18100) { //tulot ovat alle 18100 niin ei tule veroa
tulostus = "Ei veroa";
}
else if(ansiotulo >18100 && <= 27200) { //tulot enemmän kuin 18100 mutta alle 27200
eli mitä tähän pitäisi laittaa että saisi seuraavan lausekkeen toteutumaan ja ilmoittamaan käyttäjälle ruudulla oikean vastauksen: 422
8,0€ + 0,06 * (25000 - 18100) = 422

Laitanko let vai var jne. Oon kokeillu kaikkea ja kattonut javascript-sivuilta mutta enpä saa tuota toimimaan.
Käyttäjän syöttämän ansiotulon mukaan tulee laskea tulovero, tuon lausekkeen jälkeen ruudulle pitäisi tulla veronmäärä.
En kaipaa kuin tuon yhden else-if:n ratkaisua niin osaan kyllä sitä soveltaa muissa kohtaa itsekin.

EDIT: olikin ihan solmussa nuo luvut. Nyt pitäs olla oikein.
 
Viimeksi muokattu:
Aika huonoa opetusta jos oppilas ei tiedä miten tehdään muuttujia tai if-else-lauseita. Ehkä opettaja voisi kerrata ohjelmoinnin perusteita tai lukisit esim. täältä: JavaScript Tutorial

Foorumi tukee koodiblokkeja joita on syytä käyttää. Esim.
JavaScript: 
const luku = 2*5;
if(luku > 5) {
    console.log('Suurempi kuin 5');
}
 
©©© sanoi:
Aika huonoa opetusta jos oppilas ei tiedä miten tehdään muuttujia tai if-else-lauseita. Ehkä opettaja voisi kerrata ohjelmoinnin perusteita tai lukisit esim. täältä: JavaScript Tutorial

Foorumi tukee koodiblokkeja joita on syytä käyttää. Esim.
JavaScript: 
const luku = 2*5;
if(luku > 5) {
    console.log('Suurempi kuin 5');
}
Napsauta laajentaaksesi...

Oon tehny muutamia if-else ohjelmia mutta niissä ei missään ollu tommoista lauseketta.
 
Huisaheikki sanoi:
Ok, aattelin että otan pois ja laitan osan vain tänne. Koulutehtävä tuloverosta tosiaan mutta en oo juurikaan ennen ohjelmoinut.

eli esimerkiksi tulot on 25000,

18100 - 27200 verotettavan ansiotulon rajat (seuraavat rajat on sitten 27200 - 44800 jne.)
vero alarajan kohdalla 8€
6 Vero alarajan ylittävästä tulon osasta, %

www.vero.fi

Valtion tuloveroasteikko 2020

www.vero.fi www.vero.fi

if(ansiotulo < 18100) { //tulot ovat alle 18100 niin ei tule veroa
tulostus = "Ei veroa";
}
else if(ansiotulo >18100 && <= 27200) { //tulot enemmän kuin 18100 mutta alle 27200
eli mitä tähän pitäisi laittaa että saisi seuraavan lausekkeen toteutumaan ja ilmoittamaan käyttäjälle ruudulla oikean vastauksen: 422
8,0€ + 0,06 * (25000 - 18100) = 422

Laitanko let vai var jne. Oon kokeillu kaikkea ja kattonut javascript-sivuilta mutta enpä saa tuota toimimaan.
Käyttäjän syöttämän ansiotulon mukaan tulee laskea tulovero, tuon lausekkeen jälkeen ruudulle pitäisi tulla veronmäärä.
En kaipaa kuin tuon yhden else-if:n ratkaisua niin osaan kyllä sitä soveltaa muissa kohtaa itsekin.
Napsauta laajentaaksesi...

Perusteet vähän hakusessa. const, let ja var -sanoja käytetään esittelemään muuttujia, esim. "const ansiotulo = 25000;" Jos se ei toimi, käytä var.

Jos sä haluat, että ansiotulo on vähintään jotain ja enintään jotain, kirjoitat:

JavaScript: 
if (luku > 10 && luku < 25) {
    console.log('Luku on suurempi kuin 10 ja pienempi kuin 25!');
}

Sitten voit käyttää muuttujassa ansiotulo olevaa lukua tuossa yhtälössä. Annan esimerkin: "Vero on aina 25% ansiotulosta":

JavaScript: 
const ansiotulo = 25000;
const vero = 0.25 * ansiotulo;

console.log('Maksat veroa: ', vero);
 
©©© sanoi:
Aika huonoa opetusta jos oppilas ei tiedä miten tehdään muuttujia tai if-else-lauseita. Ehkä opettaja voisi kerrata ohjelmoinnin perusteita tai lukisit esim. täältä: JavaScript Tutorial

Foorumi tukee koodiblokkeja joita on syytä käyttää. Esim.
JavaScript: 
const luku = 2*5;
if(luku > 5) {
    console.log('Suurempi kuin 5');
}
Napsauta laajentaaksesi...
Opettajissa on kyllä älyttömiä eroja. Mulla oli sellainen Windows ohjelmoinnin opettaja joka opetti *kaiken* UI:n tekemisen Visual Studion graafisella editorilla. Se nyt ei ollut kovin kaksinen vielä reilut 10 vuotta sitten :whistling: Itse piti opetella miten esimerkiksi luokka lisättiin olemassa olevaan komponenttiin.
Toinen opettaja sitten opetti tyhjältä pöydältä koodaamaan UI:n ja toiminnan Symbianilla.
No, se offtopicista, jatkakaa :)
 
Paapaa sanoi:
Perusteet vähän hakusessa. const, let ja var -sanoja käytetään esittelemään muuttujia, esim. "const ansiotulo = 25000;" Jos se ei toimi, käytä var.
Napsauta laajentaaksesi...
Tarkennetaan vähän: const esittelee vakion eli arvon, jota ei voi muuttaa, let ja var taas muuttujan. Noista let on uudempi tapa, jota kannattaa aina pystyessä käyttää, kun taas var on vanhempi tapa, jota ei käytännössä pitäisi tarvita tai käyttää juuri muuten kuin jos koodin täytyy toimia myös Internet Explorerissa.

let-esimerkki (var toimii suunnilleen samoin):
JavaScript: 
let x = 5;
console.log(x); // tulostaa: 5
x = 7;
console.log(x); // tulostaa: 7
x = x + 2;
console.log(x); // tulostaa: 9

const-esimerkki:
JavaScript: 
const x = 5;
console.log(x); // tulostaa: 5
x = 7; // heittää poikkeuksen, jota voi varmaan tässä vaiheessa ajatella virheenä vaikka se ei ihan sitä aina olekaan
 
Zvona sanoi:
Tein tuollaisen tähän polttavaan aiheeseen: https://codepen.io/zvona/pen/pojoOeb?editors=0010

Siinä voisi vielä miettiä, saisiko nuo ylärajat (upperLimits) ja veroprosentit (taxRates) yhdistettyä yhdeksi taulukoksi tai objektiksi, jotta se olisi selkeämpi rajoja / veroprosentteja lisättäessä tai poistettaessa.
Napsauta laajentaaksesi...
Hyvä lähtökohta josta varmaan pari kuukautta koodannut pääsee eteenpäin. Tuonne pitäis nyt myös ympätä se kaava laskea marginaalivero niillä muuttujilla mitkä löytvät verohallinnon sivuilta. Nyt tuo esimerkki laskee vain yksinkertaisen prosenttiosuuden eikä marginaaliveroa. Lisäksi se odottaa kk-tuloja eikä vuosituloja ja hajoaa suurilla arvoilla koska käytetään upper limittiä eikä loweria. Tässä kun mietin niin oppilas on kyllä varmaan jo aivan sekaisin :D Perusteet, perusteet...
 
Hei! Oisko täällä tietoa pieneen ongelmaan mun läppärin kanssa. Käyttöjärjestelmänä on Windows 10 ja probleema on seuraavanlainen: Haluaisin käänteiset värit -toiminnon yhden näppäimenpainalluksen taakse. Mieluiten nykyiseen asetus-näppäimen yhteyteen, joka muuttaa näppäimen kirkkautta kertapainalluksella. Olisiko mahdollista luoda komento, joka muuttaa näytön värit käänteiseksi painamalla tätä näppäintä pitkään, esim 5 sekuntia?
 
Biffy62 sanoi:
Hei! Oisko täällä tietoa pieneen ongelmaan mun läppärin kanssa. Käyttöjärjestelmänä on Windows 10 ja probleema on seuraavanlainen: Haluaisin käänteiset värit -toiminnon yhden näppäimenpainalluksen taakse. Mieluiten nykyiseen asetus-näppäimen yhteyteen, joka muuttaa näppäimen kirkkautta kertapainalluksella. Olisiko mahdollista luoda komento, joka muuttaa näytön värit käänteiseksi painamalla tätä näppäintä pitkään, esim 5 sekuntia?
Napsauta laajentaaksesi...

 
Kiitos tästä. Tiedän tuon suurennuslasitoiminnon, mutta saisiko se käänteiset värit -toiminnon liitettyä yhteen näppäimeen jotenkin ohjelmoimalla. Hakusessa olisi yksinkertaisempi ratkaisu, joka ei vaadi mitään näppäinyhdistelmiä vaan olisi yhden näppäime takana.
 
Biffy62 sanoi:
Kiitos tästä. Tiedän tuon suurennuslasitoiminnon, mutta saisiko se käänteiset värit -toiminnon liitettyä yhteen näppäimeen jotenkin ohjelmoimalla. Hakusessa olisi yksinkertaisempi ratkaisu, joka ei vaadi mitään näppäinyhdistelmiä vaan olisi yhden näppäime takana.
Napsauta laajentaaksesi...
Tuollainen aputyökalu löytyy Windows 10:lle, millä pitäisi onnistua:

Voit tallentaa värien invertoimiseen vaadittavat näppäinyhdistelmät makroksi ja suorittaa makron esim. painamalla sitä kirkkausnäppäintä tietyn aikaa.

(huom. en ole itse kokeillut kyseistä työkalua)
 
Kiitokset vastauksista ja avustanne koskien aiempaa kyselyäni. Pitää tutkia ja opiskella tuolta JavaScript Tutorial
Miten saan käyttäjän kirjoittaman luvun noihin laskurin if else-riveille? Muuten käytännössä tajuan kyllä noiden rivien toiminnan ainoastaan en tajua miten sen luvun saa halutulle riville ja lausekkeeseen.
 
Viimeksi muokattu:
Huisaheikki sanoi:
Kiitokset vastauksista ja avustanne koskien aiempaa kyselyäni. Pitää tutkia ja opiskella tuolta JavaScript Tutorial

Miten saan käyttäjän kirjoittaman luvun noihin laskurin if else-riveille? Muuten käytännössä tajuan kyllä noiden rivien toiminnan ainoastaan en tajua miten sen luvun saa halutulle riville ja lausekkeeseen.
Napsauta laajentaaksesi...

Aseta HTML:ssä tekstikentälle ID ja hae se JavaScriptissä document.getElementById() metodilla. Voit tehdä painikkeen, jossa on onclick tapahtuma, joka kutsuu jotain funktiota tai käyttää oninput tapahtumaa suoraan teksikentästä.

Linkkejä opiskeluun:

- HTML input tag
- HTML DOM Input Text value Property
- Document.getElementById()
- HTML DOM Event Object
- onchange Event
 
Viimeksi muokattu:
Kiitos vinkistä. Teen varmaan nämä ekat ohjelmoinnit kuitenkin tolla simppelimmällä tavalla, tiedän että opettaja ihmettelee jos muuttaakin tekotapaa kesken tehtävien ja luulee että kopsattu muualta.
Onko muuten periaatteessa siinä laskurissa suositeltavin tapa tehdä ne erilliset if, if else rivit vai pystyykö ihan aloittevan taidoilla tekemään jotenkin kompaktimpaan muotoon?
 
Viimeksi muokattu:
Huisaheikki sanoi:
Kiitos vinkistä. Teen varmaan nämä ekat ohjelmoinnit kuitenkin tolla simppelimmällä tavalla, tiedän että opettaja ihmettelee jos muuttaakin tekotapaa kesken tehtävien ja luulee että kopsattu muualta.
Onko muuten periaatteessa siinä laskurissa suositeltavin tapa tehdä ne erilliset if, if else rivit vai pystyykö ihan aloittevan taidoilla tekemään jotenkin kompaktimpaan muotoon?
Napsauta laajentaaksesi...
Aloittelija voi ihan huoletta tehdä erilliset if else -rivit. Se on se kaikista "naiivein" tapa tehdä ja varmaan 100% aloittelijoista tekisi sen niin.
 
Huisaheikki sanoi:
Miten saan käyttäjän kirjoittaman luvun noihin laskurin if else-riveille?
Napsauta laajentaaksesi...

Helpoin tapa, joka soveltuu tuollaisiin koulutehtäviin, esitelty täällä esimerkin kera:

www.w3schools.com

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com www.w3schools.com
 
En saa millään toimimaan tätä, mitä teen väärin:
Miten nuo pitäisi oikein muotoilla?

Tämä alku toimii:
//Ohjelma laskee käyttäjän tuloveron

let tulostus = "";
let ansiotulo = prompt("Anna verotettava ansiotulo"); //käyttäjän syöttämä luku

//tutkitaan, kuinka paljon tuloja käyttäjä laittaa
if(ansiotulo < 18100) { //tulot alle 18100
tulostus = "Ei veroa";
}

Mutta näillä riveillä on jotain virheitä:
else if(ansiotulo > 18100 && luku < 27200) { //tulot enemmän kuin 18100 mutta alle 27200
let vero = (ansiotulo - 18100) * 0,06 + 8,0
tulostus = "vero: " + vero;
}
else if (ansiotulo > 27200 && luku < 44800) { //tulot yli 27200 mutta alle 44800
let vero = (ansiotulo - 27200) * 0,1725 + 554,00
tulostus = "vero: " + vero;
}
else if (ansiotulo > 44800 && luku < 78500) { //tulot yli 44000 mutta alle 78500
let vero = (ansiotulo - 44800) * 0,2125 + 3590,00
tulostus = "vero: " + vero;
}
else if (ansiotulo > 78500) { //tulot yli 78500
let vero = (ansiotulo - 78500) * 0,3125 + 10751,25
tulostus = "vero: " + vero;
}
//Tulostus
alert(tulostus);
 
Huisaheikki sanoi:
En saa millään toimimaan tätä, mitä teen väärin:
Miten nuo pitäisi oikein muotoilla?

Tämä alku toimii:
//Ohjelma laskee käyttäjän tuloveron

let tulostus = "";
let ansiotulo = prompt("Anna verotettava ansiotulo"); //käyttäjän syöttämä luku

//tutkitaan, kuinka paljon tuloja käyttäjä laittaa
if(ansiotulo < 18100) { //tulot alle 18100
tulostus = "Ei veroa";
}

Mutta näillä riveillä on jotain virheitä:
else if(ansiotulo > 18100 && luku < 27200) { //tulot enemmän kuin 18100 mutta alle 27200
let vero = (ansiotulo - 18100) * 0,06 + 8,0
tulostus = "vero: " + vero;
}
else if (ansiotulo > 27200 && luku < 44800) { //tulot yli 27200 mutta alle 44800
let vero = (ansiotulo - 27200) * 0,1725 + 554,00
tulostus = "vero: " + vero;
}
else if (ansiotulo > 44800 && luku < 78500) { //tulot yli 44000 mutta alle 78500
let vero = (ansiotulo - 44800) * 0,2125 + 3590,00
tulostus = "vero: " + vero;
}
else if (ansiotulo > 78500) { //tulot yli 78500
let vero = (ansiotulo - 78500) * 0,3125 + 10751,25
tulostus = "vero: " + vero;
}
//Tulostus
alert(tulostus);
Napsauta laajentaaksesi...

let on lohkokohtainen (block) muuttuja, eli se on ainoastaan käytettävissä siinä lohkossa missä se on. JavaScriptissä kaikki aaltosulkeiden {} sisällä oleva sisältö on omassa lohkossaan. Tuossa koodissassi määrittelet tulostukselle arvon lohkon sisällä ja yrität käyttää sitä sen ulkopuolella. Voit laittaa tulostuksen lohkon sisälle tai kutsua toista funktiota sen arvolla. "Luku" muuttujan pitäisi ilmeisesti olla "ansiotulo"? Käytä myös pistettä desimaalilukujen kanssa.


Edit: Lisätään nyt tännekin, mitä lähetin viestillä. Kenties apua muillekin.

JavaScript: 
// muuttujaa ei tarvitse alustaa tässä, koska sitä ei käytetä lohkojen ulkopuolella
let tulostus = "";

// Tämä on ok
let ansiotulo = prompt("Anna verotettava ansiotulo");

if (ansiotulo < 18100) {
    tulostus = "Ei veroa"; //tämän sijasta voit käyttää suoraan console.log("Ei veroa") tai alert("Ei veroa")
}
else if (ansiotulo >= 18100 && luku < 27200) { // Mape mainitsikin jo, mutta pelkkien < > kanssa rajatapaukset jäävät huomiotta, joten käytä <= ja >= niiden sijasta
                                                // "luku" muuttujaa ei ole määritelty tai käytetty missään. Pitäisi varmaan olla "ansiotulo"?
    let vero = (ansiotulo - 18100) * 0,06 + 8, 0 //käytä pistettä desimaalien kanssa
    // ...
}

// ...

// Tämä on käyttämätön ja tarpeeton täällä
alert(tulostus);

Jatkokehitysideoita:
  • Voit siirtää verojen laskemisen omaksi funktioksi ja kutsua sitä if-lausekkeiden sisältä. Tuloveron laskemisessa käytetään ansiotuloa, veron alarajaa, vero alarajan kohdalla ja veroprosenttia. Voit tehdä funktion, joka ottaa nämä arvot muuttujina sisäänsä ja palauttaa veron määrän. Alla esimerkkejä.
  • Voit vaihtaa let muuttujat vakioiksi, eli const, koska missään vaiheessa tätä ohjelmaa ei ole tarvetta ylikirjoittaa arvoa toisella.

JavaScript: 
const sayHello = (name) => {
    console.log("Hello", name);
}

sayHello("Heikki");

const sumNumbers = (a, b) => {
    const result = a + b;
    return result;
}
sumNumbers(1,5)

 
Viimeksi muokattu:
Lisäyksenä Joonikon huomioille ja tuntematta tehtävänantoa tarkemmin. Tällä hetkellä rajatapaukset (18100, 27200, 44800 & 78500) jäävät ehtojen ulkopuolelle. Pitäisikö ehtojen olla ennemmin muotoa >= <raja-arvo> riippuen tietysti tehtävänannosta?
 
mape sanoi:
Lisäyksenä Joonikon huomioille ja tuntematta tehtävänantoa tarkemmin. Tällä hetkellä rajatapaukset (18100, 27200, 44800 & 78500) jäävät ehtojen ulkopuolelle. Pitäisikö ehtojen olla ennemmin muotoa >= <raja-arvo> riippuen tietysti tehtävänannosta?
Napsauta laajentaaksesi...

Tämä huomioitu, lisäsin raja-arvoille kuhunkin tuon >= .

Sain näköjään tämän kyseisen jutun toimimaan, joten paljon kiitoksia avustanne, etenkin @Joonikko jolta sain ratkaisevat vinkit.
Parempi on ettei näitä yritä edes kopioida muilta vaan pakko perehtyä, opiskella ja itse oppia näitä kun jatkossa tulee muita tehtäviä.
 
Viimeksi muokattu:
Mitä web-dev (full stack, php/node/javascript/css/html5/vue/google...) aiheisia sivustoja / youtube-kanavia seuraatte ?

edit: vuonna jQuery tuli seurattua the treehouse show:ta mikä oli todella hyvä ja ytimekäs
 
Viimeksi muokattu:
embedded sanoi:
Mitä web-dev (full stack, php/node/javascript/css/html5/vue/google...) aiheisia sivustoja / youtube-kanavia seuraatte ?
Napsauta laajentaaksesi...

Aktiivisena kyttäilyn kohteena lähinnä Hacker News (jossa toki paljon muuta teknologia/startup-jauhantaa). Suomalaisista medioista Webbidevaus.fi -podcasti on ollut ihan ok viihdettä myöskin (löytämiini jenkki-softakehityspodcasteihin verrattuna asenne on rennompi ja itseironisempi, ilman turhaa tärkeilyä ja pöhinää).

Jos tavoitteena on jotain oppia, on kuitenkin se kylmä tekeminen ainoa oikea tie. Oikeista projekteista/ongelmista irrallaan tällaisten lueskelu/kuuntelu on lähinnä sellaista sivumaustetta; ajanvietettä ja tulevaisuuden ideoiden kerryttämistä.
 
embedded sanoi:
Mitä web-dev (full stack, php/node/javascript/css/html5/vue/google...) aiheisia sivustoja / youtube-kanavia seuraatte ?
Napsauta laajentaaksesi...

Muutama sivusto ja kanava mitä on tullut seurailtua. Kaikki ei liity suoraan web-kehitykseen, mutta sivuavat aihetta tai alaa.
 
Viimeksi muokattu:
Kirjaudu tai rekisteröidy kirjoittaaksesi tänne.

Uutiset

Uutisia lyhyesti

Uusimmat viestit

Statistiikka

Viestiketjuista
267 190
Viestejä
4 621 366
Jäsenet
75 997
Uusin jäsen
Nicegpu

Hinta.fi

Back
Ylös Bottom