1.VScode配置:

需要安装的插件:Live Server, Bracket Pair Colorizer,JavaScript (ES6) code snippet

2.JavaScript语法:

2.1 注释和console

2.2 三个容器关键字

 1. var  2. const 常量关键字,不能修改常量的值(但是可以改变对象中的属性),定义常量一定要赋值

2.3 数据类型

1. 基本数据类型string(字符串),Number(数值),Boolean(布尔) Null(空) Undefined(未定义) Symbol(符号)
2. 引用数据类型Object(对象)数组 []

2.4 类型转换

let val;
//数组转化为字符串
val=String([1,2,3,4]);
//toString:转化为字符串
val = [55].toString();//别的类型转换为数值
val = Number(false);
//NaN
val = Number('hello');
//另外一种形式
val = parseInt("100.30");
val = parseFloat('100.30');//输出
console.log(val);
consolr.log(typeof val);//console.log(val.toFixed(2))

2.5 数值运算和Math对象

const numl=180;
const num2=50;
let val;
//数值运算
//val=numl+num2；
//val=numl-num2；
//val=numl*num2；
//val=numl/num2；
//val=numl%num2；//Math object
//val=Math.PI；
//val=Math.round（2.6）；//四舍五入
//val=Math.ceil（2.4）；//向上取整
//val=Math.floor（2.8）；//向下取整
//val=Math.sqrt（64）；//平方
//val = Math.abs（-3）；//取绝对值
//val=Math.min（2，33，4，1，55，6，3，-2）；//最小值//val=Math.max（2，33，4，1，55，6，3，-2）；//最大值

2.6 字符串方法

const firstName='William';
const lastName=‘Johnson';
const age=32;
//拼接
let val;
val=firstName+lastName;
//空格拼接
val=firstName +''+lastName;
//转义
//val = 'this\'s ugly, i can\'t wait';
val="That's awesome，i can't wait";
//length
val=firstName.length;
console.log(val);
// concat 拼接
val=firstName.concat('',lastName);
//大小写转换
val=firstName.toUpperCase();
val=firstName.tolowerCase();
//字符串下标
val=firstName[2];
//indexof
val=firstName.indexof('l');
val=firstName.lastIndexof('l');
//charAt
val=firstName.charAt(2);
//获取最后一个字符
val=firstName.charAt(firstName.length-1）;
//获取子字符串
val=firstName.substring(0,4);
//slice
val=firstName.slice(0,4);
val= firstName.slice(-3);
//转数组
const str ="my name is lina";
val =str.split(' ');

2.7 模板字符串

const name='John';
const age=31;
const job='web Developer';
const city='Beijing';
let html;
//没有模板字符串(es5)
html=
'<ul><1i>Name:'+
name+
'</lis<lisAge:'+
age+
'<1i>Job:'+
job+
'</li>City'+
city+
'</ul>';
document.body.innerHTML=html;function hello{return 'hello world'
}
//模板字符串展示（ES6）
html=`
<ul>
<1i>Name：${name}</li>
<li>age：${age}</li>
<1i>job：${job}</li>
<li>city：${city}</li>
<lisName：${2+2}</1i>
<1isName：${hello}</li>
<li>${age>30?0ver 30'："Under 30}</1i>
</ul>
`

2.8 数组方法

//数组方法
const numbers =[43,45,56,33,44,1,71；
const numbers2=new Array[22,40,32,76,99]；
const fruit=['Apple',‘Banana','Orange','Pear']；
const mixed=122，'Hello'，true，undefined，null，
let val；
//获取长度
val=numbers.length；
//检查是不是数组
val=Array.isArray(numbers)；
//获取数组单个元素
val=numbers[3]；
//更改案个元素值
numbers[2]=108；
//查找元素下标位置
val=numbers.indexof(4)；
//添加和删除
numbers.push(250);
//从前面加
numbers.unshift(120);
//从后面删除
numbers.pop();
//从前面删除
numbers.shift();
//删掉多个
numbers.splice(1,3);
//反转
numbers.reverse();
//数组拼接
val=numbers.concat(numbers2);
//排序
val=fruit.sort();
val=numbers.sort();
//正常排序数值
val=numbers.sort(function(x,y){return x-y;
});

2.9 对象

const person={firstName:‘米斯特吴’,lastName:‘Wu',age:32,email:'277323570qq.com',hobbies:['music','sports'],address:{city:'Chengdu',state:'chenghuaqu'},getBirthYear:function（）{return 1987;}
};
let val;
val=person;
//获取到单个属性
val=person.firstName;
val=person['lastName'];
val=person.age;
val=person.hobbies[1];
val=person.email;
val=person.address.city;
val=person.getBirthYear;//数组对象嵌套
const people=[{name:‘Bucky'，age：30},{name:‘Henry'，age：32},{name:'Elyse'，age：38}
]
for (let i=0；i< people.length；i++){const.log(people[i].name);
}

2.10 日期

let val;
const today =new Date();
let birthday =new Date('9-10-1988 11:28:00');
birthday=new Date(' September 18 1988');
birthday=new Date('9/10/1988');
val=birthday;
val=today. getMonth();
val=today. getDate();
val=today. getDay();
val=today. getFullYear(;
val=today, getHours();
val=today. getMinutes();
val= today. getSeconds();
vat=today. getMilliseconds(;
val=today. getTime();
birthday. setMonth(2);
birthday. setDate (12);
birthday. setFullYear (1987);
birthday. setHours(3);
birthday. setMinutes(20;
birthday. setSeconds(25);

2.11 分支语句

//if switch
//if分支语句
//if（“条件”）{}
//条件关系运算符逻辑运算最终结果为boolean
//关系运算符：><==>=<=|====l==
//逻辑运算符：&&（AND）||{0R） ！（取反）
let id = 100;
//if（id ==180）{//console.1og（‘条件为真：id的值就是100）；
//else{//console.1og（‘条件为假：id的值不是100）；
//}
//console.1og（‘分支外的语句‘）；
//TEST 分支条件是否为undefined
if (typeof id == 'undefined'）{console.log（'没有设置id'）;
}else{console.log('id为:${id}');
}//逻辑运算符
const name=‘Steve';
const age=14;
//逻辑与&&AND
if(age>0 && age<12){console.log('${name}is a child);
}
//逐辅或一真既真
if(age<16 ll age>65){console.log('s{name}要么是孩子要么是老人);
}else{console.log('${name)是个成人”);
}
//逻辑非！
if(!true){console.log('Correct');
}
//三目运算符
console.log(id == 100?'Correct'：'Incorrect');

2.12 Switch分支

//switch
const color=' orange';
switch (color)case' red':console.log(' Color is red');break;case 'blue':console.log(' Color is blue');break;case 'yellow':console.log(' Color is yellow');break;default:console.log('tolor is not at all');break;

2.13 循环

for(let num = 1;num<10;num++){console.log(num);//1,2,3,4,5,6,7,8,9
}var num = 1;//1、声明循环变量
while (num<10){//2、判断循环条件;console.log(num);//3、执行循环体操作；num++;//4、更新循环变量；
}var num = 10;
do{console.log(num);//10 9 8 7 6 5 4 3 2 1 0num--;}while(num>=0);         console.log(num);//-1

2.14 函数

JavaScript 函数语法
JavaScript 函数通过 function 关键词进行定义，其后是函数名和括号 ()。
函数名可包含字母、数字、下划线和美元符号（规则与变量名相同）。
圆括号可包括由逗号分隔的参数：
(参数 1, 参数 2, ...)
由函数执行的代码被放置在花括号中：{}
function name(参数 1, 参数 2, 参数 3) {要执行的代码
}

//有参致无返回值
firstName='米斯特吴';
function greet(firstName ='形参'){console.log（'Hello'+firstName）;
}
//有参数有返回值
function greet(firstName='形参'){return‘Hello'+firstName;
}
//.函数调用
greet('实参');
//函数表达式
const square=function(x){return x*x;
}
console.log(square(10))//自执行函数
(function(){console.log("自执行函数");
})()//属性函数
const todo ={add:function(){console.log ('Add todo..');edit:function(id){console.log('Edit todo...'+id);}
};
todo.delete=function(){console.log("Delete todo...");
};
todo.add();
todo.edit(222);
todo.delete();

2.15 window对象

//WINDOW METHODS/0BJECTS/PROPERTIES
window.console.log("Hello");
//alert
window.alert("Helto");
//prompt
const input=prompt();
alert(input);
//confirm
if(confirm('Are you sure？')){console.log('YES');
}else{console.log('NO');
}//可视大小
val=window.innerHeight;
val=window.innerwidth;
//滚动大小
val=window.scrollY;
val=window.scrollx;
//location
val=window.location;
val=window.location.hostname;
val=window.location.port;
val=window.location.href;
val=window.location.search;
//Redirect
window.location.href="http://www.baidu.com";
//Reload
window.location.reload();//History
window.history.go(-3);
val=window.history.length;
//Navigator
val=window. navigator;
val=window. navigator. appName;
val=window. navigator. appVersion;
val=window. navigator. userAgent;
val=window. navigator. platform;
val=window. navigator. language;

2.16 变量作用域

• 局部作用域

   JavaScript 局部作用域变量在函数内声明，变量为局部作用域。局部变量：只能在函数内部访问。因为局部变量只作用于函数内，所以不同的函数可以使用相同名称的变量。局部变量在函数开始执行时创建，函数执行完后局部变量会自动销毁。
  

  实例

  // 此处不能调用 carName 变量
  function myFunction() {var carName = "Volvo";// 函数内可调用 carName 变量
  }
  

• 全局作用域

    JavaScript 全局变量变量在函数外定义，即为全局变量。全局变量有全局作用域: 网页中所有脚本和函数均可使用。 实例
  

  var carName = " Volvo";
  // 此处可调用 carName 变量
  function myFunction() {// 函数内可调用 carName 变量
  }
  

在ES6之前，我们都是用var来声明变量，而且JS只有函数作用域和全局作用域，没有块级作用域，所以{}限定不了var声明变量的访问范围。
ES6新增的let，可以声明块级作用域的变量。

任务3-1(JavaScript基础)相关推荐

1. JavaScript基础笔记集合（转）

   JavaScript基础笔记集合 JavaScript基础笔记集合   js简介 js是脚本语言.浏览器是逐行的读取代码,而传统编程会在执行前进行编译   js存放的位置 html脚本必须放在< ...

2. javascript基础语法——表达式

   前面的话 一般地,关于javascript基础语法,人们听得比较多的术语是操作符和语句.但是,其实还有一个术语经常使用,却很少被提到,这就是javascript表达式(expression).本文将详 ...

3. Javascript基础与面向对象基础~第四讲 Javascript中的类对象

   今天来说JS中如何实现类(class),事实上本应该昨天晚上写的,可我失言了,在些说一声"抱歉"!JS中的类是JS面向对象的基础,也是我最拿手的东西,你写的代码能否提高一个层次,一 ...

4. javascript基础系列(入门前须知)

   -----------------------小历史---------------------------- javascript与java是两种语言,他们的创作公司不同,JavaScript当时是借 ...

5. JavaScript基础系列---闭包及其应用

   闭包(closure)是JavaScript中一个"神秘"的概念,许多人都对它难以理解,我也一直处于似懂非懂的状态,前几天深入了解了一下执行环境以及作用域链,可戳查看详情,而闭包与 ...

6. 夯实JavaScript基础之prototype, __proto__, instanceof

   function New(f){return function(){var o = {'__proto__': f.prototype};f.apply(o, arguments);return o; ...

7. JavaScript基础，Cookies,Sessions

   php和JavaScript,掌握JavaScript基础,自定义函数,流程控制语句,事件,调用JavaScript脚本,在PHP中使用JavaScript. JavaScript是网景公司开发的,是 ...

8. JavaScript基础一

   1.1 javascript简介 Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用户体验) J ...

9. Web前端-JavaScript基础教程上

   Web前端-JavaScript基础教程 将放入菜单栏中,便于阅读! JavaScript是web前端开发的编程语言,大多数网站都使用到了JavaScript,所以我们要进行学习,JavaScript ...

10. JavaScript基础---语言基础（1）

    写在前面: 通过四篇博客把JS基础中的基础整理一下,方便自己查阅,这些内容对于实际项目开发中也许并不会在意,但是作为JS的语言基础,自觉还是应该熟悉.在完成这三篇博客(JavaScript基础---语 ...

最新文章

1. Crawling - Computing Ranking 很长时间, 怎么办?
2. 数据库更新的时候不能正确的执行找错记录
3. 中国大陆穷光蛋排行榜－－－转
4. 深入理解strncpy这个函数
5. HDU5730 FFT+CDQ分治
6. VS2010 关于.wav音频文件播放
7. linux设置默认的首页文件,Linux 设置Firefox主页
8. 多年前的树莓派 B+ 重新工作
9. 前端学习（2656）：vue2中用v-model实现
10. atxserver运行没有反应_连续生物工艺：灌流生物反应器
11. 帝国CMS7.2 7.5微信登录插件
12. android viewflipper 动画,Android ViewFlipper动画
13. 语速对科大讯飞，百度，思必驰，云知声的语音引擎识别结果影响对比
14. DLL劫持技术解析(DLL Hijack)
15. 阿里云轻量应用服务器的租赁与使用
16. vue2快速生成代码片段
17. Discourse 论坛激活邮件问题
18. 对搜狐 网易和TOM三大门户网站的SQL注入漏洞检测
19. Chrome模拟微信、QQ内置浏览器
20. Tailwind Typographic

热门文章

1. Windows 系统画图软件如何切换输入文字的方向
2. 测试吃鸡游戏帧数软件,帧数猛提！新旧版本《绝地求生》实测
3. 驯服烂代码_驯服老虎，收藏框架
4. 交通灯keil程序加2位数码管_带数码管显示的十字路口交通灯控制 C 程序
5. J015基于AT89C51的十字路口交通灯紧急+夜间
6. python找出只出现一次的字符_在一个字符串中找到第一个只出现一次的字符。
7. [Shoi2011]双倍回文
8. 优化函数和损失函数的区别与联系
9. [经验技巧] 路由mini安装OpenWRT源的Transmission插件，实现PT下载（需SSH）
10. 微信安卓最新 7.0.22 版本来了，赶紧抢先内测体验吧！美颜，连麦，刷礼物统统来了...