-前端常用开发工具:sublime、visual Studio Code、HBuilder、Webstorm。
使用的PCharm跟WebStorm是JetBrains公司推出的编辑工具,开发阶段建议使用。
1、JS的引入方式
如需在 HTML 页面中插入 JavaScript,请使用 <script> 标签。 <script> 和 </script> 会告诉 JavaScript 在何处开始和结束。 <script> 和 </script> 之间的代码行包含了 JavaScript:
---------
2、变量的使用
定义变量:var就是一个关键字,用来定义变量。所谓关键字,就是有特殊功能的小词语。关键字后面一定要有空格隔开。
变量的赋值:等号表示赋值,将等号右边的值,赋给左边的变量。
变量名:我们可以给变量任意的取名字。
变量要先定义,才能使用。比如,我们不设置变量,直接输出:
--------------------------
直接定义变量+赋值
变量的命名规范
变量名有命名规范:只能由英语字母、数字、下划线、美元符号$构成,且不能以数字开头,并且不能是JavaScript保留字。 下列的单词叫做保留字,就是说不允许当做变量名,不用记: bstract、boolean、byte、char、class、const、debugger、double、enum、export、extends、final、float、goto implements、import、int、interface、long、native、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile
3、js基本的数据类型
<script type="text/javascript"> // js 基本的数据类型 // 1.number 2.string 3.boolean 4.null 5.undefined
1.number var $=100; console.log($); // typeof 变量名 console.log(typeof $); var b=5/0; console.log(b); console.log(typeof b);//infinity 无限大 //number类型 //2.string var a='alex'; // 单引号 和 双引号 都可以表示字符串 console.log(typeof a); var b=''; console.log(typeof b); // + 可能是连字符 也可以是数字的加号 // 字符串 + 数值 相当于字符串的拼接 console.log('a'+'b'+1); // 数字和数字相加 是加号 表示运算 console.log(1+2+3); // 小技巧 将数值类型转换成字符串类型 var c=10+''; console.log(typeof c);//string类型 // 3.boolean 布尔 var isShow=false; console.log(typeof isShow); // 4.null 空对象 var d=null; console.log(typeof d);
// 5. undefined 未定义的 var e; console.log(e);//值 是undefined console.log(typeof e); //undefined 数据类型 // 复杂(引用)的数据类型 /* Function def Object dict Arrary list String string Date time模块 后面课程讲解 */ </script>
4、js里面的运算符
---------------------------------------------
----------------------------------------------
-----------------------------------------------------------------
==和===的区别
-------------------------------------------------
-----------------------------------------------
js中 !==和 !=的区别
!= 在表达式两边的数据类型不一致时,会隐式转换为相同数据类型,然后对值进行比较.
!== 不会进行类型转换,在比较时除了对值进行比较以外,还比较两边的数据类型, 它是恒等运算符===的非形式.
------------------------------------------------
数据类型转换
-------------------------------------------------------------
--------------------------------------------------------------------
-----------------------------------------------------------------
流程控制
1、if语句 不同之处在于 if ;else if;else
<script type="text/javascript"> // if 语句 if;else if;else//if else var age=20; // {}作为当前的作用域 if(age>18){ console.log('可以去会所了') } else { console.log('好好学前端') } console.log(222222) if(age==18){ console.log('age=18') } else if(age==20){ console.log('age=20') } else { console.log('age is beauty') } </script>
--------------------------------------------------------------------------------------------------------------------------
2、逻辑与&&、 逻辑或||
//1.模拟 如果总分 >400 并且数学成绩 >89分 被清华大学录入
//逻辑与&& 两个条件都成立的时候 才成立
if(sum>400 && math>90){
console.log('清华大学录入成功')
}else{
alert('高考失利')
}
//2.模拟 如果总分>400 或者你英语大于85 被复旦大学录入
//逻辑或 只有有一个条件成立的时候 才成立
if(sum>500 || english>85){
alert('被复旦大学录入')
}else{
alert('高考又失利了')
}
3、switch语句
------------------------------------------
--------------------------------------------------------
4、while循环(先判断后执行)、do while循环(先执行后判断)
给大家总结了循环三步走,任何语言的循环离不开这三步:
初始化循环变量
判断循环条件
更新循环变量
--------------------------------
<script type="text/javascript"> //打印1-10之间的数 var x=0; while (x<10){ ++x; console.log(x) } //将1~100所有是2的倍数在控制台打印。 var i=1; while (i<=100){ if(i%2==0){ console.log(i) } i=i+1; } </script>
------------------------------------------------------------
---------------------------------------------------------------------------
5、for循环、双层for循环
100以内的素数
-------------------------------------------------------
<script type="text/javascript"> // for 循环遍历列表 是最常用的对数据的操作,js使用for的方式 // 输出1-100 for(var i =0;i<=100;i++){ console.log(i) } // 输出1-100之间所有数之和 var sum=0; for(var j=1;j<=100;j++){ sum=sum+j; } console.log(sum); // 输出1-100偶数 for(var i=1;i<=100;i++){ if(i%2==0){ console.log(i) } } // 输出1-100之间的素数(质数(又称为素数)) , “1”不算作素数
双层for循环
// document.write 往页面上写内容 // document.write('<h1>alex</h1>'); document.write('111111'); document.write('<h1>alex</h1>'); for(var i=0;i<3;i++){//控制着你的行数 for(var j=0;j<3;j++){//控制的星星 document.write('*') } // document.write('<br>'); } //小作业:1.在浏览器中输出直角三角形 for(var i=1;i<=6;i++){ //控制的行数 for(var j=1;j<=i;j++){ //控制的* document.write("*"); } document.write('<br>'); } 2.在浏览器中输出 等腰三角形 for(var i=1;i<=6;i++){ //控制行数,一共显示6行 记得换行document.write('<br>'); //控制我们的空格数 for(var s=i;s<6;s++){ document.write(' '); } //控制每行的输出*数 for(var j=1;j<=2*i-1;j++){ document.write('*'); } document.write('<br>'); }
------重点来啦----常用内置对象(复杂数据类型)
1、数组-----对于python列表
字面量方式创建(推荐大家使用这种方式,简单粗暴)
var colors = ['red','green','yellow'];
使用构造函数(后面会讲)的方式创建 使用new关键词对构造函数进行创建对象,构造函数与后面的面向对象有关系
var colors = new Array(); //通过下标进行赋值 colors[0] = 'red'; colors[1] = 'green'; colors[2] = 'yellow'; console.log(colors);
--------------------------------------
------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------
2、数组的常用方法
-------------------------------------------------------------------------
---------------------------------------------------------
<script type="text/javascript"> // 1.数组的合并 var north=['北京','山东','吉林']; var south=['深圳','广州','佛山']; var newCity=north.concat(south); console.log(newCity); // 2.join 将数组中元素使用指定的字符串连接起来,会返回新的字符串 var score=[12,1,2,3,4]; var str=score.join('$'); console.log(str); // 3.slice(start,end)相当于切片功能,顾头不顾尾 var arr=['北京','山东','吉林','深圳','广州','佛山']; var newarr=arr.slice(0,3); console.log(newarr); // 4.pop移除数组的最后一个元素 var arr2=['北京','山东','吉林','深圳','广州','佛山']; var newarr2=arr2.pop();//移除最后一个并返回 console.log(arr2);//["北京", "山东", "吉林", "深圳", "广州"] console.log(newarr2);// '佛山' // var newarr3=arr3.pop(1);和python 列表不同的是指定索引没有,还是移除最后一个元素 // 5.push() 向数组最后添加一个元素 var arr3=['北京','山东','吉林','深圳','广州','佛山']; arr3.push('武汉'); console.log(arr3);// ["北京", "山东", "吉林", "深圳", "广州", "佛山", "武汉"] // 6.reverse 翻转数组 var arr4=['北京','山东','吉林','深圳','广州','佛山']; var newarr4=arr4.reverse(); console.log(newarr4); // 7 sort 对数组排序 var arr5=['1北京','4山东','6吉林','2深圳','0广州','7佛山']; var newarr5=arr5.sort(); console.log(newarr5); // isArray() 判断是否为数组 返回为ture|false var a=1; var iArry=a.isArray; if(iArry){ console.log('是数组') } else { console.log('不是数组') } // 补充: // forEach(fn)==回调函数 匿名函数 通过forEach遍历数组的每一项内容 // 回调函数中的参数 第一个参数为item (每一项内容) 第二个参数 是数组的索引 arr5.forEach(function(item,index){ console.log(item); console.log(index); }) </script>
-------------
-------------------------------------------------------
3、字符串string
------------------------------------------------------------------------------------------------------------------------------------------------------