Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / New
Stats: 3,152,526 members, 7,816,284 topics. Date: Friday, 03 May 2024 at 08:47 AM

Jscripts Help Needed Here - Programming - Nairaland

Nairaland Forum / Science/Technology / Programming / Jscripts Help Needed Here (1560 Views)

Efritin App Clone Needed, Programmers Are Needed Here / PHP Guru Needed Here Tutor Us / Help Needed Here, Can PHP Be Use To Build An App (2) (3) (4)

(1) (Reply) (Go Down)

Jscripts Help Needed Here by Crieff(m): 2:18pm On Aug 29, 2016
Hello,

I just started with Jscripts...still at the beginner stage.
I want to output both names...is this the correct display statement?


<!DOCTYPE html>
<html>
<body>

<h1>JavaScript is Case Sensitive</h1>
<p id="demo"></p>
<script>
var lastName = "Doe";
var lastname = "Peterson";
document.getElementById( "demo" ).innerHTML = lastName;
</script>

</body>
</html>


So, ,I wrote it this way:

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript is Case Sensitive</h1>
<p id="demo"></p>
<script>
var firstName = "Doe";
var lastName = "Peterson";
document.getElementById( "demo" ).innerHTML = firstName lastName;
</script>

</body>
</html>


But it is not displaying the two names yet. Infact, it is not displaying anything at all except the h1 element's contents
Re: Jscripts Help Needed Here by MrKamar(m): 2:45pm On Aug 29, 2016
Crieff:
Hello,

I just started with Jscripts...still at the beginner stage.
I want to output both names...is this the correct display statement?


<!DOCTYPE html>
<html>
<body>

<h1>JavaScript is Case Sensitive</h1>
<p id="demo"></p>
<script>
var lastName = "Doe";
var lastname = "Peterson";
document.getElementById( "demo" ).innerHTML = lastName;
</script>

</body>
</html>


So, ,I wrote it this way:

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript is Case Sensitive</h1>
<p id="demo"></p>
<script>
var firstName = "Doe";
var lastName = "Peterson";
document.getElementById( "demo" ).innerHTML = firstName lastName;
</script>

</body>
</html>


But it is not displaying the two names yet. Infact, it is not displaying anything at all except the h1 element's contents

You should add "+" operator in between the firstName and lastName.

So it should look like this.

document.getElementById("demo" ).innerHTML =
firstName +" "+ lastName;
//"" added a space between the firstName and lastName

1 Like

Re: Jscripts Help Needed Here by Crieff(m): 5:27pm On Aug 29, 2016
MrKamar:


You should add "+" operator in between the firstName and lastName.

So it should look like this.

document.getElementById("demo" ).innerHTML =
firstName +" "+ lastName;
//"" added a space between the firstName and lastName


Many thanks MrKamar. I kept at it until I got it.
Re: Jscripts Help Needed Here by Nobody: 9:25pm On Aug 29, 2016
I hope you do know JScript iS different from JavaScript...
Re: Jscripts Help Needed Here by Nobody: 9:33pm On Aug 29, 2016
Crieff:
Hello,

I just started with Jscripts...still at the beginner stage.
I want to output both names...is this the correct display statement?


<!DOCTYPE html>
<html>
<body>

<h1>JavaScript is Case Sensitive</h1>
<p id="demo"></p>
<script>
var lastName = "Doe";
var lastname = "Peterson";
document.getElementById( "demo" ).innerHTML = lastName;
</script>

</body>
</html>


So, ,I wrote it this way:

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript is Case Sensitive</h1>
<p id="demo"></p>
<script>
var firstName = "Doe";
var lastName = "Peterson";
document.getElementById( "demo" ).innerHTML = firstName lastName;
</script>

</body>
</html>


But it is not displaying the two names yet. Infact, it is not displaying anything at all except the h1 element's contents

You had errors in your syntax...

You defined a variable lastname not LastName the former being all lowercase and the latter cammelcase. JavaScript naming convention says all variables should be CamelCased so follow that to avoid errors with variables.

You don't just combine two things together, you have to concatenate. In JavaScript it is done by adding a "+" sign... E.g:
alert(firstName + lastName);

Hope you really understand why both examples didn't work, not just getting around it.
Re: Jscripts Help Needed Here by Crieff(m): 10:45pm On Aug 29, 2016
DanielTheGeek:


You had errors in your syntax...

You defined a variable lastname not LastName the former being all lowercase and the latter cammelcase. JavaScript naming convention says all variables should be CamelCased so follow that to avoid errors with variables.

You don't just combine two things together, you have to concatenate. In JavaScript it is done by adding a "+" sign... E.g:
alert(firstName + lastName);

Hope you really understand why both examples didn't work, not just getting around it.

Yes I do understand DanielTheGeek. The reason was that I was dealing with strings like they were numbers...before I saw MrKamar's answer, I continued with my studying and eventually came across concatenated strings using the + operator. Thanks for the input.
Re: Jscripts Help Needed Here by Crieff(m): 10:26pm On Aug 30, 2016
@DanielTheGeek, I didnt know how but I missed your initial statement... i was using a mobile then, that is probably why. I honestly did not know there is a difference between the two till now...thanks for pointing that out.

I have run into another wall. I play with a feature after learning it. I am using W3School. I have learned using var only or concatenating multiple var. I just started learning functions and I want to use function to change the colour of innerHTML to red..any colour really. This is what I did:

<!DOCTYPE html>
<html>
<body>

<h6 class="dem">Change font colour:</h6>
<p id="demo">Yay!</p>

<script>
function myFunction(a)
{return a;}
document.getElementsByClassName("demo" ).innerHTML =
 myFunction(fontcolor: "red" );
</script>

</body>
</html>


Can this syntax work? To change the font colour to say, red?
cc: MrKamar
Re: Jscripts Help Needed Here by Nobody: 12:10am On Aug 31, 2016
Crieff:
@DanielTheGeek, I didnt know how but I missed your initial statement... i was using a mobile then, that is probably why. I honestly did not know there is a difference between the two till now...thanks for pointing that out.

I have run into another wall. I play with a feature after learning it. I am using W3School. I have learned using var only or concatenating multiple var. I just started learning functions and I want to use function to change the colour of innerHTML to red..any colour really. This is what I did:

<!DOCTYPE html>
<html>
<body>

<h6 class="dem">Change font colour:</h6>
<p id="demo">Yay!</p>

<script>
function myFunction(a)
{return a;}
document.getElementsByClassName("demo" ).innerHTML =
 myFunction(fontcolor: "red" );
</script>

</body>
</html>


Can this syntax work? To change the font colour to say, red?
cc: MrKamar

Nope, that won't work...

Your function has to do more than just returning the value of an argument, it has to target the style of the particular element... don't worry when you get into JQuery, life would much easier...
You should have a setter function that sets the colour dynamically and accepts the colour name as an argument.

<!doctype html>
<html>
<head>
<meta charset="utf-8" >
<title>Hello...err...JavaScript</title>
</head>
<body>
<p id="demo" >Hello World, this text's color will change</p>
<button id="button" >Change Color</button>

<script type="text/javascript" >
// Color is the preferred color you want and target is the element you want to control
function changeColor(color, target) {
var element;
if ( target != "" && color != "" ) {
element = document.getElementById(target) ;
element.style.color = color;

console.log( 'Successfully changed color of ' + target + ' to ' + color)
}
}
document.getElementById( 'button' ).addEventListener( "click", function(){
changeColor( 'red', 'demo' )
}) ;
</script>
</body>
</html>

Hope you have more questions to ask...
Re: Jscripts Help Needed Here by Crieff(m): 1:18am On Aug 31, 2016
DanielTheGeek:


Nope, that won't work...

Your function has to do more than just returning the value of an argument, it has to target the style of the particular element... don't worry when you get into JQuery, life would much easier...
You should have a setter function that sets the colour dynamically and accepts the colour name as an argument.


Hope you have more questions to ask...

Thanks for the reply.
This, right now, is way over my head.
So, when do you know when using return value won't be enough but that you have to go beyond that? Any other way the color could have been changed without using console log?
Re: Jscripts Help Needed Here by yorex2011: 9:56pm On Aug 31, 2016
Crieff:


Thanks for the reply.
This, right now, is way over my head.
So, when do you know when using return value won't be enough but that you have to go beyond that? Any other way the color could have been changed without using console log?

Console.log is just to log you data for debugging purposes.
The code that changed the color used javascript to access and modify or set the css property of a said element.
I.e ".style.color=color"
Re: Jscripts Help Needed Here by Nobody: 6:07pm On Sep 02, 2016
Crieff:


Thanks for the reply.
This, right now, is way over my head.
So, when do you know when using return value won't be enough but that you have to go beyond that? Any other way the color could have been changed without using console log?

The console.log() function outputs information into the browsers console, (CTRL + SHIFT + K). It is useful for debugging and testing purposes as sometimes your JavaScript code may be syntactically error-free but contain some logical errors. So console.log() in this case, let me know the action was successfully carried out. The function that is responsible for changing the color in our context is the changeColor() function which accepts two arguments. Now arguments are sort of values that can be used within a function/method. changeColor() accepts: 'color' and 'target' as arguments where color is the name or color code of a particular color and target is the element to be colored.

So to call the changeColor() function you can add an onClick attribute to the button element:
<p id="demo-text">Hello World<\p>
<button onclick="changeColor('yellow', 'demo-text')">Click here<\button>

Or better still add what is called an eventListener.

Take an eventListener as an "amebo" that hears or listens to every thing it is attached to. The event listener listens for an event, an event is triggered when an action is made/a condition is met, e:g when a user clicks a button, the click event is triggered. So in our case we need an eventListener to listen for any click actions on the button or element we specify.
If you take a look at my code you'd see that I addEventListener( 'click' ) to document.getElementById( 'Button' ) ...It's that simple, I hope it's a bit clearer to you.
I purposely introduced new inbuilt functions so you could learn more, e:g: console.log(), there's also error.log() e.t.c

There a lot of other ways to achieve this functionality.
Re: Jscripts Help Needed Here by Crieff(m): 10:45pm On Feb 19, 2017
Guys, still here.

Left w3schools..using video tutorials but I have a snag and I want to get over it before I continue.


<!DOCTYPE html>
<html>
<head>
 <title>JavaScript Example</title>
<script type="text/javascript">
    function substitute() {
       var myValue = document.getElementById('myTextBox').value;
      if (myValue.lenght == 0) {
         alert ('Please enter a real value in the text box!');
          return;
     }
     var myTitle = document.getElementById('title);
      title.innerHTML = myValue;
   }
</script>
</head>
<body>
 <h1 id="title">JavaScript Example</h1>

 <input type="text" id="myTextBox" />
<input type="submit" value="Click Me!" onclick="substitute()" />

</body>
</html>


The above is meant to change the h1 content (Javascript Example) into what is typed inside the text-box but it is not working for me when I run it, what am I doing wrong?

cc:
DanielTheGeek
MrKamar
Yorex2011
Re: Jscripts Help Needed Here by romme2u: 11:40pm On Feb 19, 2017
Starting JavaScript programming with the DOM API is going to be very confusing and frustrating. Learning the basics of ECMAScript 5 will give you a solid foundation to work with hundred of API's that browsers provide as well as working with other host implementation like node.js and even photoshop.

developer.mozilla.org is a better resource to start with. if you are serious, Nicholas Zakas and Douglas Crockford have free books in pdf format that google will gladly spit for you. Professional JavaScript for web developers and JavaScript: The Good Parts are two books i cannot do without.

If you invest two to three months on these books, you will be amazed at your coding prowess. BUT both books require solid understanding of HTML 5 and CSS 3 at least intermediate level.

(1) (Reply)

Hi guys review this my app: a whatsapp, 2go, instagram, olx, game app all-in-one / Checkout this amazing app created by a Nigerian Undergraduate / Datanemesis 1: In The Minds Of Nairaland, Seun Give Us A Copy !

(Go Up)

Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health
religion celebs tv-movies music-radio literature webmasters programming techmarket

Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10)

Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 41
Disclaimer: Every Nairaland member is solely responsible for anything that he/she posts or uploads on Nairaland.