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 ---布尔值
-
1 var x=false 2 console.log(typeof x) 3 //boolean
-
- null ---空的意思
-
1 var y=null //空对象.object 2 console.log(y) 3 //null
-
- undefined ---没有被定义
var z; console.log(typeof z); // undefined 只声明,没有定义
引用数据类型
- Function
- Object
- Arrary
- Date
4. 数据类型转换
数值转字符串
- 隐式转换 数值+''
- String() 强转
- 数值 .toString()
var a = 5; var astr = String(a); console.log(typeof astr); console.log(typeof a.toString()); // 结果都为字符串string
字符串转数值
- Number() 强转
- parseInt() 转整型,有小数点只保留整数部分
- parseFloat() 转小数
1 var s_n = '1.234433333333333333335'; 2 console.log(Number(s_n)); //1.2344333333333333 3 console.log(typeof Number(s_n)); //number 4 5 console.log(parseInt(s_n)); // 1 6 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 开关
1 //switch开关 表示不同的条件执行不同的动作 2 //case表示一个条件,满足这个条件就会走进来,break跳出,如果不写break,就会走进下一个程序直至遇到break结束. 3 var danceScore = '68'; 4 switch (danceScore) { 5 case '90': 6 console.log('perfect') 7 break; //退出 8 case 80: 9 console.log('best') 10 break; 11 case 70: 12 console.log('good') 13 break; 14 default: 15 console.log('bad') 16 }
while 循环 ---1.初始化循环变量 2.判断循环条件 3.更新循环变量
1 示例1打印1-10 2 var i =1; 3 while(i<11){ 4 console.log(i); 5 i++; 6 //i +=1 7 } 8 示例2打印0-100内偶数 9 var a = 0; 10 while (a<=100){ 11 if (a % 2===0){ 12 console.log(a); 13 } 14 a++; 15 }
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(' ') } 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. 事件驱动/处理,业务逻辑