码迷,mamicode.com
首页 > Web开发 > 详细

JS学习指南(1)

时间:2018-09-10 13:27:55      阅读:188      评论:0      收藏:0      [点我收藏+]

标签:不用   http   地址   htm   相减   小数   打印   default   设置   

Node.js可以在命令行、服务端运行Js。
Chrome则运行在浏览器。
VScode是比较轻的一个编辑器。

1.在node使用

创建文件 demo1.js
输入内容 (不怎么需要HTML基础)
命令行到该目录 (如果不会命令行可以去看cmd命令)
node demo 或 node ./demo.js

2.在浏览器使用

创建文件 demo.html demo.js
输入内容(这里可能需要HTML基础)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <-- 在script标签引入  src属性写地址-->
    <script src="./demo.js"></script>

    <-- 也可以在script标签写-->
    <script>
        //内容
    </script>
</body>
</html>

一、输出

console.log("Hello World!");    //输出在控制台
alert(‘Hello World!‘);    //输出弹窗
document.write("Hello World!");    //输出在网页

因为Node没有dom和bom所以alert和document不能在Node运行

console 在F12控制台可以查看
alert 在浏览器中会弹窗
输出的 字符 需要使用双引号、单引号还有反引号括起来
数值 则不用

这里 字符串 和 数值 就属于 数据类型

二、变量

var box = 10;    //数值
let box = "String";    //字符串
const box = true;     //布尔值

数值 就是数字,可以包含整数、小数、二进制、八进制等数值
字符串就是字符、文本,其中字符需要使用括号引起来
布尔值 的意思就是真(true)或假(false) 其中数值的0 和 空 字符串 为false

这里的var let const可能有些看不懂,其实意思就是声明变量,在Js里面有一个东西叫做作用域。
var 是 函数级 作用域 并且可以重复声明
let 是 块级作用域 不能重复声明
const 是 块级 作用域 不能重复声明 不能进行运算
这里有一点需要注意 就是 let 和 const 不支持老浏览器,
但是可以使用babel转化成为ES5(因为这是ES6新版本)。

三、运算符

1+1    //2 数值相加 
1+"1"    //11 数值和字符串相加
1-1    //0 数值相减
1*1    //1 数值相乘
1/1    //1 数值相除
1%1    //数值取余

box = 1    //赋值
box += 10    //加并赋值(box = box-10),还有-=、*=...

四、函数
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
函数也是变量的一种

function main(){     //声明函数
    //函数里面的内容
    console.log("调用函数");    
}

var main = function(){    //变量式声明函数
    //函数里面的内容
    console.log("调用函数");
}

var main = ()=>{    //箭头函数
    //函数内容
}

/*同时函数有传参数功能*/
function main(num1, num2){
       //打印传进来的两个参的和
    console.log(num1 + num2);
}
/*返回值*/
function sum(num1, num2){
    return num1+num2;
}
var a = 10;    //返回值a为10
var b = a;     //把a赋值给b
var c = sum(5,5); //把sum函数赋值给c c等于10

五、数组和对象
数组和变量也是变量的一种。
数组就是一些数据类型的集合。

//数组
var array = [123,"String",true];
console.log(array[0]);    //数组的调用 数组是从0开始数

//对象
var Obj = {
    name: ‘Jack‘,
    age: ‘35‘,
    getName: function(){    //对象里的函数写法1
        //这里的this指向的就是Obj 即对象本身
        return this.name;
    },    
    getAge(){     //对象里的函数写法2 ES6写法
        return this.age;
    },
    setName(name){
        //设置名字
        this.name = name;
    }
};
console.log(Obj.name);    //Jack
console.log(Obj.age);    //35
console.log(Obj.getAge);    //35
Obj.setName(‘Tom‘);    //Obj的name变成了Tom
console.log(Obj.getName());    //Tom

在Js里面每一个变量都是对象

比如字符串:

console.log("Hello World".search("W"));    //6 W在字符串里是第6位

比如数组

[123, "String", true].map(function(item){
    console.log(item); 
    //123
    //String
    //true
});    //遍历数组
console.log([123, "String", true].length);    //3 数组长度

还有很多这样的对象没有一一列举

六、循环语句、条件语句

1.if语句
条件语句用于基于不同的条件来执行不同的动作。

/*
一个花括号就是一个块 {}
如果没有使用块 只能执行一行
*/

//能执行一块
if(true){  //条件 需要为true 例如非0 或者非空字符串
    //括号里的参数是true的情况下就执行
    console.log("这是true的");
}else{
    //括号里的参数是false的情况下就执行
    console.log("这是false的");
}
if(true) console.log("True");    //只能执行一行

2.switch语句
switch 语句用于基于不同的条件来执行不同的动作。

/*
switch(变量){
    case 变量的值:
        //内容
    break;    //中断
    default:    //如果没有值相同
}
*/
var a = 10;
switch(a){
    case 10:
        console.log("a的值是" + a);
    break;    //中断
    default:    //如果没有值相同
        console.log("a的值是" + a);
    break;
}

3.for语句
循环可以将代码块执行指定的次数。

//for语句 for(先执行的; 执行条件; 语句执行后执行的)
for(let i = 0; i < 10; i++){
      console.log("for语句");    //打印十次
}
console.log(i);    //报错 上面let 是在一个块级 出了{}以后就不能获取

for(i in [1,2,3]){        //遍历值赋给i 随后打印i
    console.log(i);    //1 2 3
}

4.while
只要指定条件为 true,循环就可以一直执行代码块。
这个方法要主要不要写成死循环

/*
while(true){    //条件
    //内容
}
do{
    //内容
}while(true)    //条件
*/

do...while是先运行一遍 然后判断条件 如果成立就再执行

var i = 0;
while(i < 5){
    console.log("while");    //循环5次
    i++;
}

do{
    console.log("do...while");
    i++;
}while(i < 5)    //条件


作者:INS_null
链接:https://www.imooc.com/article/24662?block_id=tuijian_wz
来源:慕课网

JS学习指南(1)

标签:不用   http   地址   htm   相减   小数   打印   default   设置   

原文地址:https://www.cnblogs.com/lyj0252/p/9618323.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!