Javascript

1.ECMAScript基础语法

　　1.var 声明变量

　　2.测试语句:

　　　　console.log(变量名)　　控制台输出内容测试

　　　　alert(变量名)　　　　　 弹出框测试

　　3.数据类型:

　　　　① 基本数据类型

　　　　　　a.　　number

　　　　　　

var a = 123;
//typeof检查当前变量是什么数据类型
console.log(typeof a)

//特殊情况
var a1 = 1/0;
console.log(typeof a1)
//infinity为无限大,number类型

　　　　　　b.　　string　　字符串拼接使用+

var str = "123";
console.log(typeof str);

　　　　　　c.　　boolean

var b = false;
console.log(typeof b1);

　　　　　　d.　　null　　空对象

var c = null;
console.log(c);

　　　　　　e. 　　undefined

var d;//表示变量未定义
console.log(typeof d);

 

　　　　②引用数据类型:Function　　Object　　Array　　Date

　　4.运算符

　　　　①　　赋值运算符=

　　　　②　　算数运算符+,-,*,/,%,++,--

　　　　③　　比较运算符==(等于,比较的是值),===(等同于,比较的是值和类型),!=,!==,>,<,>=,<=

　　5.数据类型转换

　　　　①　　将数值类型转化成字符串类型

var n1 = 123;
var n2 = "123";
var n3 = n1+n2;//隐式转换
console.log(typeof n3);

　　　　

//强制类型转换 String(),toString()
var n1 = 123;
var str1 = String(n1);
console.log(typeof str1);

var num = 234;
console.log(num.toString());

　　　　②　　将字符串类型转换成数值类型

var stringNum = "789.123wasd";
var num2 = Number(stringNum);
console.log(num2);

//parseInt()可以解析一个字符串,并且返回一个整数
console.log(parseInt(stringNum));
console.log(parseFloat(stringNum));

　　　　③　　任何数据类型都可以转换为boolean类型

var b1 = "123";      //true
var b2 = 0;            //false
var b3 = -123;       //true
var b4 = infinity;    //true
var b5 = NaN;        //false
var b6;                  //false
var b7 = null;        //false

　　6.流程控制

　　　　1.if,if-else,if-else if-else

var a = 20;
if (a >= 20){
  console.log("小马哥");  
}

var b = 20;
if (b >= 20){
  console.log("小马哥");  
}else{
  console.log("大马猴");  
}

if (true){
  //操作1  
}else if (true){
  //操作2  
}else if (true){
  //操作3  
}

　　　　2.逻辑与&&,逻辑或||

var a = 1;
var b = 2;
if (a >= 1 && b >= 2){
  console.log("111");  
}else{
  console.log("222");  
}

var a = 1;
var b = 2;
if (a > 2 || b >= 2){
  console.log("111");  
}else {
  console.log("222");  
}

　　　　3.switch

var gameScore = 'better';

switch(gameScore){

//case表示一个条件 满足这个条件就会走进来 遇到break跳出。break终止循环。如果某个条件中不写 break，那么直到该程序遇到下一个break停止
    case 'good':
    console.log('玩的很好')
    //break表示退出
    break;
    case  'better':
    console.log('玩的老牛逼了')
    break;
    case 'best':
    console.log('恭喜你 吃鸡成功')
    break;

    default:
    console.log('很遗憾')

}

 

 　　　　4.while 循环

　　　　　　初始化循环变量

　　　　　　判断循环条件

　　　　　　更新循环变量

var i = 1; //初始化循环变量

while(i<=9){ //判断循环条件
    console.log(i);
    i = i+1; //更新循环条件
}

　　　　5.do_while

//不管有没有满足while中的条件do里面的代码都会走一次
var i = 3;//初始化循环变量
do{

    console.log(i)
    i++;//更新循环条件

}while (i<10) //判断循环条件

　　　　6.for 循环

for (var i =1; i <= 10; i++){
  console.log(i);  
}

　　　　7.双重for循环

for(var i=1;i<=3;i++){
            
 　　for(var j=0;j<6;j++){
        document.write('*');
    }
            
   document.write('<br>');
 }

　　7.常用内置对象

　　　　Array:

　　　　　　

 

 　　String　　Date　　Math内置对象　　Function函数

 

　　8.DOM

　　　　①获取DOM的三种方式:

　　　　　　document.getElementById()

　　　　　　document.getElementsByClassName()

　　　　　　document.getElementsByTagName()

　　　　②值得操作

　　　　　　innerText:文本内容,只包含文本不包含标签

　　　　　　innerHTML:渲染标签也可以设置文本

　　　　　　value:对于标签中有value属性的设置,表单控件

　　　　③样式操作

　　　　　　对于style对象的操作,css中的属性都可以设置,注意margin-left属性,使用js设置值的时候是oDiv.style.marginLeft="30px"

　　　　④属性操作

　　　　　　比如标签中的id,class,title属性的设置,img标签的src属性,a标签中的href属性的设置,设置class的时候使用className.

　　　　⑤DOM操作

　　　　　　创建DOM:document.createElement("div")

　　　　　　追加DOM:父.appendChild(子标签),适用于父DOM插入子DOM

　　　　　　　　　　  父.insertBefore(要插入的节点,参考的节点),适用于兄弟之间

　　　　　　删除DOM:父.removeChild(子)

　　　　⑥BOM

　　　　　　window.location

　　　　　　window.reload()

　　　　　　window.open()