JS学习指南(1)
JavaScript学习指南
本文可以比较快速地学一下Js 建议学完后系统地看一遍其他教程
JavaScript标准库 || W3c JavaScript参考手册 || ES6入门文档
JS是由ES(ECMAScript)、DOM(浏览器文档对象)、BOM(浏览器对象模型)组成。
其中Node.Js就只有ES，目前浏览器比较流行的版本就是ES6(ES2015)，老浏览器的版本基本上都是ES5。
零、环境搭建
Node.js下载 || Chrome(百度软件中心) || VSCode编辑器
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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./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) //条件共同学习，写下你的评论
评论加载中...
作者其他优质文章
