寒假学习任务三之：JavaScript语言的快速精通

JavaScript语言快速学习

简介

JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。作为开发Web页面的脚本语言而出名，同时它也被用到了很多非浏览器环境中

JavaScript应用领域

随着网络技术的发展，现在JS的应用领域非常的广泛，满足了现代网络技术的方方面面，在这里主要包括了：

1. 网站开发
2. 移动开发
   使用HTML5和API支持，采用基于Chrome为基础的web app
3. 插件开发

JS使用方法

JS可以有以下集中方法进行插入：

1. HTML 中的JS脚本必须位于 标签之间

<script>
alert("我的第一个 JavaScript");
</script>

其中列表结构具有很多的方法，介绍其中几种：

# 列表常用方法
list.append(7) #添加元素
list.insert(3,10) #插入元素
list.count(1) #计算元素重复出现次数
list.sort(reverse=True) #翻转元素

JS输入输出、变量

JS也如C++、Java等语言一样，最基础的应用是输入输出

alert("hello,world!")
prompt("请输入年龄：")
console.log("wo")

// 1.声明变量
var age;
// 2.赋值
age=10;
//3.输出打印
console.log(age);
// 4.变量的初始化
var myname="Five";
console.log(myname)

var age;console.log(age);
console.log(age1);
age1=10,console.log(age1);

// 1.八进制 0~7 数字前面+0,表示八进制
var num1=012;
console.log(num1);//10
// 2.十六进制 0~9 a~f 数字前面+0x,表示16进制
var num2=0xa;
console.log(num2);//10
// 3.数字型的最大值
console.log(Number.MAX_VALUE);//1.7976931348623157e+308
// 4.数字型的最小值
console.log(Number.MIN_VALUE);//5e-324
//5.三个特殊值
console.log(Infinity);//Infinity,无穷大
console.log(-Infinity);//-Infinity,无穷小
console.log('pink'-100);//NaN，Not a number,表示一个非数值
//6.isNaN()方法用来判断是否非数字
console.log(isNaN('pink'));

// 1.获取字符串长度 length
var str="Hello,lala";
console.log(str.length);
// 2.字符串的拼接
console.log('s'+'t'+18);

//布尔型
var flag=true;//flag 布尔型
var flag1=false; //flag1 布尔型
console.log(flag);//true
console.log(flag1);//false
console.log(flag+1);//2
console.log(flag1+1);//1

//undefined类型
var vr=undefined;
console.log(undefined);//undefined
console.log(vr+'pink');//undefinedpink
console.log(vr+1);//NaN

//null 空值
var space=null;
console.log(space);//null
console.log(space+'pink');//nullpink
console.log(space+1);//1

//typeof 检测数据类型
console.log(typeof(vr));//undefined
console.log(typeof(flag));//boolean
console.log(typeof(num1));//number
console.log(typeof(space));//object

//全等
console.log(18==18);//true
console.log(18=='18');//true
console.log(18==='18');//false
console.log(18!=='18');//true

JS流程控制

JS也是面向对象的，具有流程控制结构：

if(3>5){
    alert("shamo");
}

var num=10;
num>5 ? '是的':'不是的';
console.log(num);

var s=3;

switch (s) {
    case 1:
        console.log(1);
    case 2:
        console.log(2);
    case 3:
        console.log(3);
        case 4:
            console.log(4);
            

    default:
        break;
}

for(var i=1;i<=10;i++){
    console.info(i+'sui');
}

JS 数组

JS的数组和java等编程语言的数组不太一样

// 创建数组

//使用new创建数组
var arr1=new Array();//创建一个新的空数组
arr1.push(1);
console.log(arr1);
// 使用数组字面量创建数组
var arr=[1,2,3,4];
console.log(arr);
//遍历数组
for(var i=0;i<arr.length;i++){
    console.log(arr[i]);
}

// 新增数组元素
// 1.修改length长度
var t1=[1,2,3];
console.log(t1.length);//3
console.log(t1);//Array(3) [ 1, 2, 3 ]

t1.length=5;//修改长度为5
console.log(t1.length);//5
console.log(t1);//Array(5) [ 1, 2, 3, <2 empty slots> ]
console.log(t1[3]);//undefined

JS函数编程

// 函数的方法
function getSum(num1,num2) {
    console.log(num1+num2);
}

getSum(1,100);
getSum(10,50);

// 1.如果实参与形参个数一致，正常输出
getSum(1,2);//3
// 2.如果实参多于形参，会取到形参个数
getSum(1,3,3);//4
// 3.如果实参小于形参，多余的num2形参定义为undefined(默认)
getSum(1);//NaN

// 函数的返回值
function getResult(){
    return 666,777;//返回结果
    // console.log("HI");    
}
var tes=getResult();
console.log(tes);

// arguments
function fn(num1){
    console.log(arguments);//里面存储了所有传递过来的实参
    //Arguments { 0: 1, 1: 2, 2: 3, 3: 4, … }
    console.log(arguments.length);//4
    return num1;
}
fn(1,2,3,4);//4

JS面向对象

//1.对象直接量 创建简单对象
var obj1 = {}; //空对象
 
var obj2 = {
  name: "ys",
  age: 12
};
//创建复杂对象
var obj3 = {
  name: "ys",
  age: 12,
  like: {
    drink: "water",
    eat: "food"
  }
};
 
// console.log(obj3.age);//12
// console.log(obj3['name']);//ys
// console.log(obj3.like);//Object { drink: "water", eat: "food" }
// console.log(obj3.like.eat);//food
// console.log(typeof obj1);  //object
// console.log(typeof obj2);  //object
// console.log(typeof obj3);  //object

// 2.new 创建对象
// 2.1 系统内置对象
var obj1 = new Object();
var obj2 = new Array();
var obj3 = new Date();
var obj4 = new RegExp("ys");
 
console.log(typeof obj1);  //object
console.log(typeof obj2);  //object
console.log(typeof obj3);  //object
console.log(typeof obj4);  //object

//2.2自定义对象,利用构造函数创建

function Person(name, age){
    this.name = name;
    this.age = age;
    this.sing=function(num1,num2){
        return num1+num2;
    }
    // pop:"hi";
  }
   
  var obj1 = new Person("ys", 12);
   
  console.log(Object.prototype.toString.call(obj1));  //[object Object]
  console.log(Person instanceof Object);        //true
  console.log(typeof obj1);              //object
  console.log(obj1.sing(1,2));//3
  
  
  //3.Object.create()创建
  
var obj2 = Object.create({
    name: "ys",
    age: 12
  });
  console.log(obj2);     //Object {  }
  console.log(obj2.age);   //12
  

  //遍历对象属性
  for(var k in obj2){
      console.log(k);//k输出的是对象中的属性名   
      console.log(obj2[k]);//输出 属性值         
  }

  console.log(Math.PI);
  console.log(Math.random());
  console.log(new Date());

//   JS字符串不可变性  

JS调用WebAPIs

var ti=document.getElementById("timer");
console.log(ti);
// console.dir(ti);

var li=document.getElementsByTagName("li");
console.log(li);
console.log(li.length);
for (let index = 0; index < li.length; index++) {
    li[index].innerHTML="HEllo";
}

// var test=document.querySelector();

var bd=document.body;
console.log(bd);
var ht=document.documentElement;
console.log(ht);

//事件基础
//事件源
var btn=document.getElementById("btn");

//事件处理程序
function oc(){
    alert("点");
} 

//事件类型
btn.onclick=oc;

//修改样式
var hbo=document.getElementById("ho");
hbo.onclick=function (){
    //注意JS修改的是行内样式
    this.style.backgroundColor='purple';
}

// 1.获取属性值

var htt=document.getElementById("HIHI");
console.log(htt);//<div id="HIHI" gettime="20" data-index="2">
//h5新增获取自定义属性的方法
console.log(htt.dataset);//DOMStringMap { index → "2" }
console.log(htt.dataset.index);//2
var bt=document.getElementById("btbt");

//事件注册
bt.addEventListener('click',function () {
    alert(22);
})

// attachEvent事件监听方式

//常见事件对象的属性和方法：
//1.返回事件类型
var bb=document.getElementById("EEE");
bb.addEventListener('click',fn);
bb.addEventListener("mousemove",fn);
bb.addEventListener('mouseout',fn);

function fn(e) {
    console.log(e.type);
}
//2.阻止默认行为（事件），让链接不跳转，或者让提交按钮不提交
console.log(window);
console.log(window.name);