JS学习笔记

JavaScript是一种直译式脚本语言，

什么是脚本语言？

        java源代码-->编译成.class文件--->java虚拟机中才能执行

        脚本语言：源码---->解释执行

       js由我们的浏览器来解释执行

HTML：决定了页面的架构

CSS：用来美化我们的页面

JS：提供用户的交互的

JS的语法：

变量弱类型：var i 

区分大小写

语句结束之后的分号，可以有，也可以没有

写在script标签

JS的数据类型：

   基本类型：string   number  boolean undefine  null 

  引用类型：对象  内置对象

类型转换

   js内部自动转换

JS的输出：

   alert() //直接弹筐

  document.write() //向页面输出

  console.log()//向控制台输出

   innerHTML:向页面输出

   获取页面元素：document.getElementById("id的名称")

JS声明变量：

   var 变量的名称 =变量的值

JS声明函数：

  var 函数的名称 =fuction(){}

JS的开发步骤：

   1，确定事件

    2，通常事件都会发出一个函数

    3，函数里面通常都会去操作页面元素，做一些交互动作

上面是一个简单的函数调用

下面来看一个小例子：校验用户名，长度不能小于6位

   

	
		
		
		
		
	
	
		

		用户名

			
		

	

看一个轮播图自动播放的案列：

需求：每隔3s切换一张图片，一直不停的切换

技术分析： 1，切换图片  2，每隔三秒钟做一件事

步骤分析：1，确定事件：文档加载完成的事件onload

                   2，事件要触发：init()；

                   3，函数里面要做一些事情：（通常会去操作元素，提供交互）

                          1，开启定时器：执行切换图片的函数changeImg（）

                    4，changeImg（） 获得要切换图片的那个元素

代码如下：其中图片名字为1，2，3，4

    下面是一个页面定时弹出广告的案列：

      需求分析：打开网页的时候，会在5s之后，显示一个广告，5s之后，广告自动消失

      技术分析：               

     定时器： setInterval: 每隔多少毫秒执行一次函数

                    setTimeout:多少毫秒之后执行一次函数

                    clearInterval:清除定时器

                   clearTimeout:清除定时器

    显示广告：img.style.display ="block"

    隐藏广告：img.style.display ="none"

    步骤分析：

      1，确定事件：页面加载完成的事件 onload

      2，事件要触发函数：init（）

      3，init函数里面做一件事：

              1，启动一个定时器：setTimeOut（）

               2，显示一个广告 

                       再去开启一个定时5s之后，关闭广告

     代码如下：

下面是一个表格隔行换色的实列：

    需求分析：商品分类信息太多，如果每一行都显示同一个颜色的话会让人看的眼花，为了提高用户体验，减少用户看错的情况，需要对表格进行隔行换色

代码如下：

	
		
		
		
		
		
	
	
		

			

				

					
				
				

					分类id
				
				

					分类名称
				
				

					分类商品
				
				

					分类描述
				
				

					操作
				
			
			

				

					
				
				

					分类id
				
				

					分类名称
				
				

					分类商品
				
				

					分类描述
				
				

					操作
				
			
			

				

					
				
				

					分类id
				
				

					分类名称
				
				

					分类商品
				
				

					分类描述
				
				

					操作
				
			
			

				

					
				
				

					分类id
				
				

					分类名称
				
				

					分类商品
				
				

					分类描述
				
				

					操作
				
			
			

				

					
				
				

					分类id
				
				

					分类名称
				
				

					分类商品
				
				

					分类描述
				
				

					操作
				
			
		
	

上面这几个实列只是js的简单应用 ，好多js的方法属性等还是要等到用到的时候再去查询。