JavaScript

JavaScript---让编程更加有趣

引入js,无论什么编程语言,基础都很重要.才能了解本质,

　　　javascript 简称JS,是一门编程语言,有名的脚本语言,本身跟Java并没有关系,它可以网页增光添彩,提高我们访问网页可视化效果!

　　 HTML,CSS,JS组成前端结构,三者相辅相成,如果说HTML是外层骨骼,CSS是肉体,那我认为JS就是其中的灵魂.

ECMAScript基础语法

1.js的引入方式?

　　行内式

　　内接式

　　外接式

2.变量

js变量需要声明,var  跟python有些区别  定义一个变量需要先声明

示例1 
var a='123'
var b=demo

示例2
var a = 12,b = 5;
    a = a/b;
    console.log(a);  /*  结果为2.4*/

示例3
    var x= 5;
    var y =x++;
    console.log(x);   //x=6
    console.log(y);   //y=5
    x++
    x+=1  先赋值(赋值给y) 后++ 给x

示例4
    var a = 5;
    var b= '5';
    console.log(a==b);     //  true 比较的是值
    console.log(a===b);   // false  比较的是值和数据类型

示例5 
var name = 'Sheldon';
var age = 29;
var hobby = 'crazy';
//方式1
var str = name + '现已'+ age + '岁了,还是那么'+ hobby;
console.log(str);
//方式2 es6模板字符串``,如果有变量使用$(变量名)
var str2 = `${name}现已${age}岁了,还是那么${hobby}`;
console.log(str2);
结果都是 ''Sheldon现已29岁了,还是那么crazy''


//通过以上示例相信你对var变量语法了解颇深了吧

3. 数据类型

　　js分为基础数据类型和引用数据类型

基础数据类型

• number  --数值

  • var a = 10;
    //typeof  检查什么数据类型,类似python中type
    console.log(typeof a)
    //number
    
    //特殊示例
    var a=10;b=0;
    var c=a/b
    console.log(typeof c)
    // Infinity   无限大.  number

• string  ---字符串

  • var a='666'
    console.log(typeof a)
    // string

• boolean  ---布尔值

  • var x=false
    console.log(typeof x)
    //boolean  

• null      ---空的意思

  • var y=null    //空对象.object
    console.log(y)
    //null

• undefined   ---没有被定义

var z;
console.log(typeof z);
// undefined  只声明,没有定义

引用数据类型

• Function
• Object
• Arrary
• Date

4. 数据类型转换

数值转字符串

1. 隐式转换 数值+''
2. String() 强转
3. 数值 .toString()

var a = 5;
var astr = String(a);
console.log(typeof astr); 
console.log(typeof a.toString());

 // 结果都为字符串string

 

字符串转数值

1. Number() 强转
2. parseInt() 转整型,有小数点只保留整数部分
3. parseFloat() 转小数

var s_n = '1.234433333333333333335';
console.log(Number(s_n)); //1.2344333333333333
console.log(typeof Number(s_n)); //number

console.log(parseInt(s_n));  // 1
console.log(parseFloat(s_n)); // 1.2344333333333333

 

任何类型转Boolean

var a1 = '123';
console.log(Boolean(a1));   //true
var a2 = -123;
console.log(Boolean(a2)); //true
var a3 = Infinity;
console.log(Boolean(a5)); //true

var a4 = 0;
console.log(Boolean(a3)); //false
var a5 = null;
console.log(Boolean(a4)); //false
var a6 = NaN;
var a7 = undefined;
console.log(Boolean(a6)); //false
console.log(Boolean(a7)); //false

//由此只要记住 0 null NaN undefined 转boolean都是false,其他都为true

 

5.测试语句

console.log    

　　类似于python中的print

window.alert()   

   显示一个警告对话框,上面显示指定文本内容,以及确定按钮,  window 是可以省略不写

confirm('确定删除吗?')     

　　显示一盒带有指定文本内容以及确认以及取消按钮的对话框,如果访问者点击''确认''返回true,否则返回false

6.流程控制

    if-else

var age = 15;
if(age>18){
    console.log('h1');
}else if(age<18 && age>10){
    console.log('div');
}else{

}
console.log('p');
// 输出:
//     div
//     p
// if else 运用上与C语言有着异曲同工之妙

 

 switch  开关

//switch开关  表示不同的条件执行不同的动作
//case表示一个条件,满足这个条件就会走进来,break跳出,如果不写break,就会走进下一个程序直至遇到break结束.
var danceScore = '68';
switch (danceScore) {
    case '90':
        console.log('perfect')
        break; //退出
    case 80:
        console.log('best')
        break;
    case 70:
        console.log('good')
        break;
    default:
        console.log('bad')
}

 

while 循环    ---1.初始化循环变量  2.判断循环条件  3.更新循环变量

示例1打印1-10
var i =1;
while(i<11){
    console.log(i);
    i++;
    //i +=1
}
示例2打印0-100内偶数
var a = 0;
while (a<=100){
    if (a % 2===0){
        console.log(a);
    }
    a++;
}

 

do while 循环  //  while循环中先执行初始化循环变量再执行循环

var i=3;  
do {
    console.log(i);
    i++; 
}while (i<10) 
//输出3,-9

 

for循环以及for循环嵌套

示例1打印0-100
 for(var i=0;i<100;i++){
     console.log(i);
}

示例2//双重for循环,打印长方形
for(var i=0;i<6;i++){ //控制行数
    for(var j=0;j<10;j++){ //每行*数
        document.write('*')
    }
    document.write('<br>')
}

示例3打印三角形
for(var i=1;i<7;i++){
    for (var s=i; s<7;s++){
        document.write('&nbsp;')
    }
    for(var j=1;j<2*(i-1);j++){
        document.write('*')
    }
    document.write('<br>')
}

示例4打印直角三角形

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

7. DOM事件

　　三大步骤:　　1. 获取事件对象

　　　　　　　　2. 事件

　　　　　　　　3. 事件驱动/处理,业务逻辑