JavaScript的打卡学习笔记(一)

一、主要内容

JavaScript入门简介
JavaScript中变量的使用
JavaScript中的运算符
JavaScript中控制语句
JavaScript中函数的使用
JavaScript中数组的学习

JavaScript的入门

1了解内容
1.HTML：超文本标记语言显示内容
2.CSS：层叠样式表美化页面
3.JavaScript：页面动态交互和特效
DHTML=HTML+CSS+JavaScript 动态HTML（Dynamic HTML，简称DHTML）
只是动态效果，不是动态数据
4.jQuery：对JavaScript的封装
2javaScript的定义
JavaScript是由Netscape（网景）公司研发出来的一种在它的Navigator浏览器上执行的程序语言。
JavaScript是一种基于对象(object-based)和事件驱动(Event Driven)的简单的并具有安全性能的脚本语言。
JavaScript组成有三大部分DOM BOM ECM

ECMAScript：JavaScript的核心
文档对象模型（DOM）：DOM（文档对象模型）是 HTML 和 XML 的应用程序接口（API）。DOM 将把整个页面规划成由节点层级构成的文档
浏览器对象模型（BOM）对浏览器窗口进行访问和操作
扩展：JScript：微软推出的类似JavaScript的语言
03javaScript的特点
1.脚本语言
脚本语言是一种简单的程序，是由一些ASCII字符构成，可以使用任何一种文本编辑器编写。一些程序语言（如C、C++、Java等）都必须经过编译，将源代码编译成二进制的可执行文件之后才能运行，而脚本语言不需要事先编译，只要有一个与其相适应的解释器就可以执行。
脚本语言是指在web浏览器内有解释器解释执行的编程语言，每次运行程序的时候，解释器会把程序代码翻译成可执行的格式。
2、基于对象的语言
面向对象有三大特点（封装，继承，多态）却一不可。
通常“基于对象”是使用对象，但是无法利用现有的对象模板产生新的对象类型，也就是说“基于对象”没有继承的特点。没有了继承的概念也就无从谈论“多态”
3. 事件驱动：
在网页中执行了某种操作的动作，被称为“事件”(Event)，比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后，可能会引起相应的事件响应。
4、简单性
变量类型是采用弱类型，并未使用严格的数据类型。
var a,b,c; a=123; b=“abc”; a=b;
5、安全性
JavaScript不能访问本地的硬盘，不能将数据存入到服务器上，不能对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互
6、跨平台性
JavaScript依赖于浏览器本身，与操作平台无关，
只要计算机安装了支持JavaScript 的浏览器（装有JavaScript解释器），JavaScript 程序就可以正确执行。
缺点
各种浏览器支持JavaScript的程度是不一样的，支持和不完全支持JavaScript的浏览器在浏览同一个带有JavaScript脚本的网页时，效果会有一定的差距，有时甚至会显示不出来。
04 JavaScript的引入方式
1、内部引入
2、外部引入

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><!--[1]js引入的方式一--><script type="text/javascript">      /*弹框*/alert("你好世界");          </script><!--[2]js的引入方式2--><!--src:引入的路径  type：引入否认类型 charset：引入文件的编码 -->
<script src="js/test.js" type="text/javascript" charset="utf-8"></script></head><body></body>
</html>

注意：
[1]两种引入方式如果都使用了，那么两种js代码都会执行
[2]在书写js的时候不要把两者书写二合一

第二节 javaScript 的变量使用

01变量的声明
var 变量名=初始值;
变量名的要求遵循java中标识符的规范即可
02变量的使用
A、js中的变量名是可以重复的，但是重复的变量名值会覆盖
B、js中的变量是区分大小写
C、js中的分号可以省略的（不建议省略）
D、js中的双引号和单引号表示的含义是一样的，都代表字符串
03数据类型
A、number（数字类型）
B、string（字符串类型）
C、boolean（布尔类型）
D、object（对象类型）
04特殊数据类型
A、undefined（未定义的）原因：只是声明了变量，没有赋值
B、NaN（not a number ）不是一个数字原因：把一个字符串（例如：123a）强制转换造成
C、null ：对象的空

<script type="text/javascript">var a=1;    var b=1.2; var c="hello";var d='woeld';var e=true;var f=new Date();var h=new String("123");     alert(typeof h);
//          var  a="你好";
//          var  A="你好";
//          alert(typeof f);var  cc;
//           alert(cc);  var  bb="123a";
//           alert(Number(bb));var  cc=null;var dd="";      alert(typeof dd);

第三节 javaScript中运算符

01 算数运算符
+ - * / % ++ – 三木运算
02逻辑运算符
& | ! && || < > >= <= != ^
03连接运算符
+
04特殊运算符
(等值符使用较多)
比较的时候先比较类型，类型一致比较内容，类型不一致统一的转化成number，然后在比较内容
=(等同符)
比较的时候先比较类型，类型不一致直接返回false,类型一致在比较内容，内容一致返回true ,不一致返回false；
注意：
在js中比较的时候用的不是()就是（=）,没有equals这个方法

<script type="text/javascript">         var  a=10;var b =21;      //算数操作alert(a+b);          alert(b/a);//2.1var c="123";// 1012321    alert(a+c+b);//31123alert(a+b+c);//1231021 alert(c+a+b);var  d=true;alert(a+d);//  true---1   false---0var  e1=1;//---1 var  e2="1";//  ---1 var  e3=true;//  ---1var  e4="true";//  number(e4);--NAN/* alert(e1==e2);//true   Talert(e1==e3);//truealert(e1==e4);//falsealert(e2==e3);//truealert(e2==e4);//falsealert(e3==e4);//false
*/alert(e1===e2);//falsealert(e1===e3);//falsealert(e1===e4);//falsealert(e2===e3);//falsealert(e2===e4);//falsealert(e3===e4);//false</script>

第四节 javaScript 控制语句

01判断语句
if(){}
if(){}else {}
if(){}else if (){}…else{}

02 选择语句

var a=30;
switch (a){
case 10:
break;
case 20:
break;
default:
break; }
03循环语句
while(){}
do{}while()
for()

<script type="text/javascript">var a=100;
//js中for循环中的变量不是局部的变量是全局的， 在js中for循环不是一个函数for(var i=1;i<=9;i++){//              var a=1;for(var  j=1;j<=i;j++){ /*直接输出到浏览器上*/       document.write(i+"*"+j+"="+i*j+"&nbsp;&nbsp;&nbsp;");       }   document.write("<br />");}alert(a);     </script>

第五节 javaScript的函数使用

01JS中函数的声明方式
三种方式
02JS中参数的传递
A、js中形参的个数和实参的个数可以不一致
B、js中没有方法的重载，重名的方法只会覆盖
03JS中函数的返回值
没有定义方法的返回值默认返回 undefined
04函数的执行符
()–函数的执行符–jquery的封装原理

<html><head><meta charset="utf-8"><title></title><script type="text/javascript">/*public  String  aa(参数列表..){}*//***********[1]函数声明的三种方式**********************/function  demo1(){alert("函数声明方式一");}var demo2= function(){alert("函数声明方式二")}//函数本身也是一个对象var  demo3=new Function("alert('函数声明方式三')");/***********[2]函数的参数的问题***************************/    function  demo4(a,b,c){alert(a+"***"+b+"***"+c);}function  demo4(a,b){alert(a+"--"+b);}//demo4(12,"sxt");//   12--sxt//demo4(12);//12--undefined//js中形参的个数和实参的个数可以不一致//demo4(12,"sxt",13);// 12--sxt/***********[3]JS中函数的返回值*******************/function  demo5(a){alert(a);return "sxhelloWorld";}//没有定义方法的返回值默认返回 undefined//alert("函数的返回值:"+demo5(20));function  demo6(uu){alert(uu());return 500;}var  ii=function(){return "nihaoya";  }demo6(ii); </script>

第六节 javaScript的数组使用

01数组的声明

function  demo1(){//方式一var arr1=new Array();        //方式二  5:数组的长度var arr2=new Array(5);       //方式三 具体的元素var arr3=new Array(1,1.2,true,nihao,new Date());//方式四 （使用较多）var arr4=[1,1.2,new Date(),true,世界那么大我想除去转转"];      console.log(arr4);

标注：console.log（）这个是打印的位置是：点击F12之后再点击Console
02数组的使用

function  demo2(){   var arr=[];    arr[0]="123";arr[1]=true;arr[2]=new Date();arr[6]=1.2;arr[10]=1;//js中数组的下标是可以不连续的，如果不连续默认补充emptyconsole.log(arr);}

04数组的遍历

function  demo4(){var arr =[1,1.2,new Date(),false,"霜天寒露"];//普通的for循环
/*for(var i =0;i<arr.length;i++){
console.log(arr[i]);
}*/
增强for循环  u：是代表的是数组的下标不是具体的数组中的元素for(var  u in arr){  console.log(arr[u]);}}

function  demo5(){var arr =[1,1.2,new Date(),false,"数天不"]; console.log("前："+arr);//  删除并返回数组的最后一个元素
//              var po= arr.pop();//向数组的末尾添加一个或更多元素，并返回新的长度。
//              var po= arr.push("我们");
//              console.log(po);//1：代表的是删除开始的位置  2：删除的个数
//              arr.splice(1,2); //添加的操作  2:开始的下标  0:删除的个数   ：添加的内容arr.splice(2,0,"添加"); console.log("后："+arr);}

标注：arr.splice(2,0,“添加”);这个相当于再下标为2的位置添加一个元素，并且原数组中下标为2的开始删除0个元素