No2 JavaScript

一 JavaScript简介

什么是JavaScript

JavaScript是一门广泛用于浏览器客户端的脚本语言

业内一般简称JS

脚本语言: 缩短传统的编写-编译-链接-运行过程,解释运行而非编译运行

JS的常见用途

HTML DOM操作（节点操作，比如添加、修改、删除节点）

给HTML网页增加动态功能，比如动画

事件处理：比如监听鼠标点击、鼠标滑动、键盘输入

什么是Node.js

Node是一个JavaScript运行环境(runtime)，是对Google V8引擎进行了封装

V8引擎执行JavaScript的速度非常快，性能非常好

Node.js的优势

可以作为后台语言

单线程

不新增额外线程的情况下，依然可以对任务进行并行处理（采用事件轮询）

非阻塞I/O、V8虚拟机、事件驱动

JS常见的书写方式有2种

页内JS：在当前网页的script标签中编写

<script type="text/javascript">
</script>

外部JS

<script src="index.js"></script>

二 JavaScript语法

JS 代码是阻断式输出

控制台输出格式

console.log("hello World");

定义基本数据类型

var有点类似泛型

var age = 10; // number
var money = 100.99; // number
var name = 'jack'; // string
var result = false; // boolean ture
var score = null; // object

// 输出
console.log(age, money, name, result, score);
// 真实类型  typeOf
console.log(typeof age,typeof money,typeof name,typeof  result,typeof score);

// 拼接
var newName = name +'-'+ name1;
console.log(newName);
// 拼接都是从左往右,任何类型的变量和string类型的变量拼接都会被转为string
var str = 10 + 10 + '10'; // 2010
var str1 = '10' + '10' + 10; // 101010
var str2 = (10 + '10') + 10; // 101010
var str3 = 10 + (10 + '10'); // 101010

数组格式

// 数组
var dataArr = [10,'121', name, result, score, ['哈哈哈哈']];
// 数组的长度
console.log(dataArr.length);
// 输出数组
console.log(dataArr);
// 遍历输出
for(var i=0; i<dataArr.length; i++){
console.log(dataArr[i]);
}

for(var i in dataArr){
console.log(i, dataArr[i]);
}

增加/删除元素

// 删除最后一个元素
dataArr.pop();
for(var i in dataArr){
console.log(i, dataArr[i]);
}

// 增加一个元素
var names = ['
xxx'];
dataArr.push(names);

// 单独取出元素
console.log(dataArr[dataArr.length-1]);

数组中最大数和最小数

var data = [1000, 9, 56666,32];
//        console.log(Math.max(2121,4334,5454));
console.log(Math.min.apply(null, data));
console.log(Math.max.apply(null,data));

函数

函数的定义格式

function 函数名（参数列表）{

// 函数体

函数没有返回类型

}

加法运算

function sum(num1, num2){  // 参数列表不需要标明类型
return num1 + num2
}
cosole.log(sum(1, 2))

写一个万能的加法函数

function sum(numbers){
var count = 0;
for(var i = 0; i < numbers.count; i++){
count += numbers[i];
}
return count;
}
// 改进版
function sum(){ // arguments函数的内置数组
var count = 0;
for (var i = 0; i < arguments.length; i++){
count += arguments[i];
}
return count
}

匿名函数

var result4 = function (){
console.log('我是匿名函数');
}
// 如何调用
result4();

三 JS中创建对象

创建单个对象

var dog = {
name : 'wangcai',
height : 1.55,
age : 15,
friends: ['gouyou1','gouyou2'],
run : function(someWhere){
// this 它在哪个对象中,然后代表该对象
console.log(this.name + '-----跑' + someWhere);
},
eat : function(someThing){
console.log(this.name +'-----吃' + someThing);
}
};
// 验证
console.log(typeof dog);
// 调用属性
console.log(dog.name, dog.age,dog.height, dog.friends);
// 调用函数
dog.eat('骨头');
dog.run('操场');

批量产生对象

function Dog(){
console.log('------');
}
// 调用
Dog();
// 产生对象 new --- > [[Dog alloc] init];
var dog1 = new Dog();
var dog2 = new Dog();
console.log(dog1,dog2);

// 构造函数
function Dog(){
this.name = null;
this.age = null;
this.height = null;
this.friends = [];
this.eat = function(someThing){
console.log(this.name + '吃' + someThing);
};
this.run = function(someWhere){
console.log(this.name + '跑' + someWhere);
}
}

// 批量产生对象
var dog1 = new Dog();
var dog2 = new Dog();
// 赋值
dog1.name = 'wangcai';
dog1.age = 16;
dog1.height = 1.66;
dog1.friends = ['hhh', 'xxxxx'];
dog1.eat('五花肉');
dog1.run('房间');

另一种写法：

function Dog(name, age, height, friends){
this.name = name;
this.age = age;
this.height = height;
this.friends = friends;
this.eat = function(someThing){
console.log(this.name + '吃' + someThing);
};
this.run = function(someWhere){
console.log(this.name + '跑' + someWhere);
}
}

JS 中逻辑或写法

newName = name1 || name2 || name3 || name4;
console.log(newName);

JS 中逻辑与写法

// 新写法 (条件) && {....}
(age > 20) && console.log('...............可以结婚了');

四 JS内置对象

window

window:

所有的全局的变量都是window的属性

所有的全局的函数都是window的函数

// 验证属性
var age = 20;
console.log(window.age);
// 验证函数
function dog(){
console.log('我是一条狗');
}
dog();
window.dog();

动态跳转

window.location.href = 'http://baidu.com';

document

document:

1.动态的获取当前网页中的任何一个节点(标签)

2.对获取的节点进行CRUD

<script type="text/javascript">
// 往当前页面写入
document.write('hello world!');
// 写入一个标签
document.write('<input type="date">');
// 写入图片
document.write('<img src="https://www.baidu.com/img/bdlogo.png" width="50">');
</script>

DOM 操作-更改图片

<script type="text/javascript">
function changeImg(){
// 拿到图片
var img = document.getElementById('icon');
// 更改属性
img.src = 'images/img_02.jpg';
}
</script>

<body>
<img id="icon" src="images/img_01.jpg">
<p></p>
<button onclick="changeImg();">更改图片</button>
</body>

DOM 操作-更改图片

<body>
<img class="icon" src="images/img_01.jpg">
<p></p>
<button>切换图片</button>

<script type="text/javascript">
// 拿到要操作的标签
var img = document.getElementsByClassName('icon')[0];
var btn = document.getElementsByTagName('button')[0];

btn.onclick = function(){

console.log(img.src);
// indexOf = lastIndexOf  找到 返回任意正数, 没有找到,返回-1
if(img.src.lastIndexOf('images/img_01.jpg') != -1 ){
img.src = 'images/img_02.jpg';
}else{
img.src = 'images/img_01.jpg';
}
}
</script>
</body>

五 JS中常见事件

<script type="text/javascript">
// 当页面加载完毕
window.onload = function (){
//        alert('页面加载完毕');

// 拿到img标签
var img = document.getElementsByName('icon')[0];
// 当鼠标进入图片
img.onmouseover = function(){
console.log('当鼠标进入图片');
}
// 当鼠标在图片中移动
img.onmousemove = function(){
console.log('当鼠标在图片中移动');

}
// 当鼠标离开图片
img.onmouseout = function(){
console.log('当鼠标离开图片');
}
}

// 拿到输入框
var int = document.getElementById('int');
int.onfocus = function(){
// css属性 style
int.style.width = '600px';
int.style.height = '100px';
int.style.outline = 'none';
int.style.border = '1px solid red';
}

int.onselect = function(){
alert(int.value);
}
</script>

六 DOM的CRUD

增

方法1

document.write('<input type="file">');
document.write('<img id="icon" src="images/img_01.jpg">');

方法2

var div = document.createElement('div');
div.style.backgroundColor = 'red';
div.innerText = '我是div';
div.style.width = '500px';
div.style.height = '300px';
//加入body
document.body.appendChild(div);

var imgs = document.createElement('img');
imgs.src = 'images/img_02.jpg';
div.appendChild(imgs);

删

var img2 = document.getElementById('icon');
// 这种写法比较繁琐  img2.parentNode.removeChild(img2);
img2.remove();

改

先拿到标签再改

查

4种方式

getElementsByName

getElementsByClassName

getElementsByTagName

getElementsByID

查看 body 有几个子节点

console.log(document.body.childNodes);

七 Canvas

HTML

<canvas id="canvas"></canvas>

JS

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
//  context是一个绘图的上下文环境
//  2d是二维图形

Canvas绘制直线

// 起点
context.moveTo(100,100);
// 终点
context.lineTo(400, 400);
// 绘制
context.stroke();
// 设置线条颜色和宽度
context.strokeStyle = 'red';
context.lineWidth = 5;
// 设置填充色
context.fillStyle = 'blue';

Canvas绘制弧线

context.arc(
centerX, centerY, radius,
startingAngle, endingAngle,
anticlockwise=false
)
// centerX, centerY: 圆心的坐标
// radius: 半径
// startingAngle, endingAngle: 开始角度,结束角度
// anticlockwise: false顺时针 true逆时针