-----what is js?
it's a file which can write instructions to a computer
node.js is pretty much js
it is js
so you learn js, you ca pick up this stuff very easily
and node.js would be a breeze
so is Expree.js
and so is React
-------first js
open console
javascript types:
number
string
can use single quote and double quote
'lucas'
"lucas"
can add string
"hello" + "lucas"
"hellolucas"
'this isn't very nice'
SyntaxError!
'this isn\t very nice'
10 + "34"
"1034"
coz string can be added, they are automatically assumed to be string
10-"3"
7
coz string can not be subtracted , they are automatically assumed to be number
"hello" - "hell"
NaN
- boolean
3 === 3
true
----javascript comparisons
!==
===
>=
<=
>
<
----clear()
can clear everything
----variables
var a = "hello" + "1"
a
hello!
so === means equals
and = means assign
var firstName camel style
----- prompt()
it's asking for user to input something and I press Ok
the the console will show the input information
prompt("what is your username?")
----alert()
i get a pop up but without anything to enter just an ok button
---- in chrome , we can use up arrow to check history
---first program
var first = prompt("first number");
var second = prompt("second number");
var sum = Number(first) + Number(second);
alart("Sum is :" + sum);
问题！为何在这里要声明first 和second 的类型是Number
var firstName = "Andrei";
var lastName = "Neagoie";
var fullName = firstName + " " + lastName;
但在这里又不需要声明String(firstName) ?
--- ; mean the end of an expression
--- undefined
a variable that not defined
SUM UP : variable is like a drawer, you can put every type into this drawer
-----control flow (if else)
curly bracket
--- use sublime text to write js
save as .js
add .js file to .html file (they should be in the same file)
<script type="text/javascript" src="XX.js">
why we put script tag at the bottom ?
why we don't put them at top as css file ?
coz we have to wait the js to load
----console.log
it's nice way for us to print something to console
----function
method1:
function sayHello(){
console.log("hello")
}
sayHello();
method2:
var sayBye = function(){
console.log("Bye");
}
sayBye();
this is anonymous function
--- function with arguments
function multiplay(a, b){
return a*b;
}
multiply(5, 10);
---function with only one return
function multiplay(a, b){ // a, b are parameters
return a*b;
return a;
return b;
}
multiply(5, 10); // 5, 10 are arguments
return is the final way to send a function
as soon as you say return, in a function the program exits
//1. Make the above code have a function called checkDriverAge(). Whenever you call this function, you will get prompted for age. Use Function Declaration to create this function.
function checkDriverAge() {
var age = prompt("What is your age?");
if (Number(age) < 18) {
alert("Sorry, you are too yound to drive this car. Powering off");
} else if (Number(age) > 18) {
alert("Powering On. Enjoy the ride!");
} else if (Number(age) === 18) {
alert("Congratulations on your first year of driving. Enjoy the ride!");
}
}
// Notice the benefit in having checkDriverAge() instead of copying and pasting the function everytime?
//2. Create another function that does the same thing, assign it to checkDriverAge2 variable using Function Expression.
var checkDriverAge2 = function() {
var age = prompt("What is your age?");
if (Number(age) < 18) {
alert("Sorry, you are too yound to drive this car. Powering off");
} else if (Number(age) > 18) {
alert("Powering On. Enjoy the ride!");
} else if (Number(age) === 18) {
alert("Congratulations on your first year of driving. Enjoy the ride!");
}
}
//BONUS: Instead of using the prompt. Now, only use console.log and make the checkDriverAge() function accept an argument of age, so that if you enter:
// checkDriverAge(92);
// it returns "Powering On. Enjoy the ride!"
function checkDriverAge(age) {
if (Number(age) < 18) {
return "Sorry, you are too yound to drive this car. Powering off";
} else if (Number(age) > 18) {
return "Powering On. Enjoy the ride!";
} else if (Number(age) === 18) {
return "Congratulations on your first year of driving. Enjoy the ride!";
}
}
---- array
js can accept various types in an array
var list = ["tiger", "cat", "bear", "bird"];
list.shift(); // removes the first element of an array
"tiger"
list
["cat", "bear", "bird"]
list.pop() // remove the last element
"bird"
list
["cat", "bear"]
list.push("elephant"); // add new element to the end of an array
3
list
["cat", "bear","elephant"]
list.concat(["dear"]); // concat for concatenate
["cat", "bear","elephant","dear"]
list.sort() // sort the element
----objects
var user = {
name: "John",
age: 34,
hobby: "soccer",
isMarried: false,
};
how to grab property?
user.name
"John"
user.age
34
-- how to expand the user object
user.favouriteFood = "apple"
user
{name: "John", age: 34, hobby: "soccer", isMarried: false, favouriteFood: apple };
--- how to change the user object
user.isMarried = true;
user
{name: "John", age: 34, hobby: "soccer", isMarried: true, favouriteFood: apple };
SUM UP
so array maybe good for to do list
object is good for user information
---- we can have array insider of object
var user = {
name: "John",
age: 34,
hobby: "soccer",
isMarried: false,
spells:["abc", "def", "boo"]
};
---we can make object inside of array
var list = [
{
username: "andy ",
password:"secret"
},
{
username: "jess ",
password:"123"
}
];
how to access ?
list[0].password;
"secret"
var user = {
name: "John",
age: 34,
hobby: "soccer",
isMarried: false,
spells:["abc", "def", "boo"],
shout: function(){
console.log("ahhhh");
}
};
user.shout() // method
ahhhh
--- difference between {} and null
var emptyOjt = {}
var nullOjt = null;
emptyOjt
{}
nullOjt
null
nullOjt.name = "Andy";
ERROR
emptyOjt.name = "Andy";
"Andy"
--- how array and object relate to build web site