网页前端培训（JavaScript）

1.JavaScript学习的内容

2.JavaScript简介

2.1简介：

2.2组成：

3.JS基本用法

基本使用：

JS的三种使用方式
               1.行内JS
                   在html标签上直接写js代码
               2.内部JS
                   在script标签中写js代码，script标签可以放在head中或者body中（建议放在body标签最后）
               3.外部JS
                   定义JS文件，通过script标签的src属性引入对应的JS文件
                   注：如果script标签设置了src属性，则在script双标签之间的JS代码不会生效
           JS的基础语法
               语句：
                   1.JS代码一行为单位，代码从上往下执行，一行一条语句
                   2.语句不加分号结尾，如果一行定义多条语句，每句语句必须以分号结尾。（建议都加分号）
                   3.表达式不需要以分号结尾，如果加了文化则JavaScript引擎会当做语法执行，生成无用的语句
               注释：
                   //单行注释
                   /* 多行注释 */
               标识符：
                   规则：
                       由Unicode字母、_、数字组成、中文组成
                           （1）不能以数字开头
                           （2）不能是关键字和保留字
                           （3）严格区分大小写
                   规范：
                           （1）见名知意
                           （2）驼峰命名或下划线规则
               关键字（保留字）：
                   声明变量时，不要使用关键字
               变量：
                   JS是一种弱类型语言，在声明变量时不炫耀指明数据类型，直接用var修饰符进行声明
                   注：也可以不用var修饰符，直接声明并赋值
                   变量的声明：
                       1.先声明在赋值
                       2.声明并赋值
                   变量的注意点：
                       1.如果变量只声明而未赋值，则显示undefined
                       2.如果变量为声明就使用，则会报错
                       3.可以使用var同时定义多个变量
                       4.如果重新声明一个已存在的变量，则无效
                       5.如果重新声明一个已存在的变量并赋值，则会覆盖
                       6.JS是一种动态的弱类型语言，可以声明任意数据类型的变量
                   *变量名提升：
                       JavaScript引擎的工作方式是先解析代码，获取所有被声明的变量，然后再一行行地运行。
                       这造成的结果就是，所有的变量的声明语句，都会被提升到代码的头部，这就叫做变量名提升
                       注：变量名提升只对var命令声明的变量有效，如果变量不是用var声明的，就不会发送变量名提升

数据类型：

定义函数使用function
           调用方法：方法名（【参数】）
           数据类型
               JS是弱类型语言，变量没有数据类型，数据有类型
               undefined
                   值不存在
                   出现的情况：
                       1.变量只声明未赋值，值为undefined
                       2.当定义函数需要形参，调用函数未传递实参时，参数的值为undefined
                       3.当函数没有返回值，接收值为undefined
               null类型
                   表示空值
                   注意点：
                       1.使用typeof操作符测试null返回object字符窜
                           typeof操作符：判断变量的类型
                       2.undefined派生自null，所以等值比较返回值是true。未初始化的变量和赋值为null
               布尔类型
                   true和false
               数值型
                   数值型包含两种数值：整型和浮点型
                       1.所以数字（整型和浮点型）都是以64位浮点数形式储存。
                       2.在储存数值型数据时自动将可以转换为整型的浮点数值转换为整型
               字符窜
                   1.使用''或""引起来
                   2.可以使用"+"对字符窜进行拼接
               对象类型
                   数组
                       var 数组名 = []
                   对象
                       var 对象名 = {}
                   函数
                       function 方法名(){

                       }

类型转换：

1.自动类型转换
               1.转字符窜型：所有的值转字符窜都是加引号
               2.转布尔型：有值为true，无值为false（0位false，非0位true）
               3.转数值型：空值是0，非空的数值型字符窜能转换，非数值字符窜转换为NaN
           2.函数转换
               parseInt() 转整数型
               parseFloat()       转浮点型
               注：转换时会从值的第零个位置开始找有效数字，直到找到无效数字的位置
                   parseFloat在转换时会比parseInt多识别一个小数点
           3.显示转换
               toString()       将值转换成字符窜
               toFixed()       保留指定小数位
               注：值不能为null

               JS为number、boolean、string对象提供了构造方法，用于强制转换数据类型，转换的是值的全部，不是部分
               注：可以转换null值

代码：

<button onclick="alert('Hello World!')">按钮</button><br /><!-- 内部JS --><script type="text/javascript">//alert("这是一个按钮！")</script><!-- 引入外部JS文件 --><script src="js/test.js" type="text/javascript" charset="UTF-8"></script><script>//单行注释/* 多行注释 */console.log("hello");console.log("haha");</script><script type="text/javascript">/* 变量名提升 */console.log(flag);console.log(name);/* 变量的声明 */var a;a=1;console.log(a);var b=2;console.log(b);/* 变量的注意点 */var c;console.log(c);// console.log(d);var aa,bb,cc=10;console.log(aa);console.log(bb);console.log(cc);var a;console.log(a);var a=10;console.log(a);var str="hello word";var flag="true";console.log(str);console.log(flag);console.log("true");name = "zhangsan";console.log(name);console.log(parseInt("123abc"));console.log(parseInt("abc123"));console.log(parseInt("123.4abc"));console.log(parseInt("123"));console.log("123");var a=1;var b="2";console.log(a+b);console.log(a+parseInt(b));console.log(parseFloat("123abc"));console.log(parseFloat("abc123"));console.log(parseFloat("123.4abc"));console.log(parseFloat("123"));console.log(parseFloat("123.4.5"));console.log("=============");var aa=10;console.log(aa);console.log(aa.toString());var bb=null;// console.log(bb.toString());var cc=1.346;console.log(cc.toFixed(2));var q= "1";var w= "a";var e="123abc";var r = "123.4";var t="123.4.5abc";console.log(Number(q));console.log(Number(w));console.log(Number(e));console.log(Number(r));console.log(Number(t));console.log(Boolean("a"));console.log(Boolean(0));console.log(Boolean("1"));console.log(Boolean(null));console.log(10);console.log(String(10));console.log(null);console.log(String("null"));/* undefined */var a;console.log(a);function fn01(str){console.log(str);}fn01();function fn02(){console.log("fn02...");}var b=fn02();console.log(b);console.log("===========")/* null */var num=1;var flag=true;var str= "hello";console.log(typeof num)console.log(typeof flag) console.log(typeof str)var aa=null;console.log(typeof aa);console.log(undefined == null);var bb;var cc=null;console.log(bb == cc);console.log("===========")/* 数值型 */console.log(1==1.0);var n=1+1.0;console.log(n);console.log(1.0);console.log("===========")/* 字符窜 */var s1="hello";var s2="world";console.log(s1,s2);console.log(s1+s2);</script>

实例：

数组：

数组常用操作方法：

数组的遍历：

函数：

函数的定义：

函数的参数：

函数的调用：

函数的返回：

函数的作用域：

内置函数：

string：

math：

date：

对象：

对象的创建：

对象的操作：

对象的序列化和反序列化：

this：

JS事件：

事件名词：

常用的事件类型：

事件流：

事件处理程序（事件绑定方式）：

代码：

<body onload="loadWindow()"><button onclick="test()" onmouseout=" outButton()">按钮</button>姓名：<input type="text" onblur="aa()" onfocus="bb()" />城市：<select onchange="changecity()"><option>北京</option><option>上海</option><option>深圳</option></select><hr /><button type="button"  onclick="alert('hello')">按钮1</button><button type="button"  id="btn2">按钮2</button><button type="button"  id="btn3">按钮3</button><script type="text/javascript">var str= "hello world";console.log(str);console.log(str.substring(3));console.log(str.substring(3,5));console.log(str.toLocaleLowerCase());console.log(str.toLocaleUpperCase());console.log(Math.random());console.log(Math.ceil(1.2));console.log(Math.floor(1.2));var date= new Date();console.log(date);console.log(date.getFullYear());console.log(date.getMonth()+1);console.log(date.getDate());console.log(date.getHours());console.log(date.getMinutes());console.log(date.getSeconds());var mstr=date.getMinutes() <10 ? "0"+date.getMinutes() :date.getMinutes();var datestr=date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()+" "+date.getHours()+":"+mstr+":"+date.getSeconds()console.log(datestr);console.log(date.toLocaleString());<script type="text/javascript">var obj1={};console.log(obj1);var obj2 = {name:"zhangsan",age:18};console.log(obj2);var obj3=new Object();console.log(obj3);var obj4=Object.create(null);console.log(obj4);var obj5 =Object.create(obj2);console.log(obj5);console.log(obj1.name);console.log(obj2.name);console.log(obj3.name);console.log(obj4.name);console.log(obj5.name);obj2.age= 20;console.log(obj2);obj2.upwd="123456";console.log(obj2);var obj={name:"zhangsan",pwd:"123456",age:18};console.log(obj);obj.name="lisi";console.log(obj);var jsontostr= JSON.stringify(obj);console.log(jsontostr);console.log("====");var jsonstr='{"name":"zhangsan","pwd":"123456","age":18}';jsonstr.name="lisi";console.log(jsonstr);var strtoobj= JSON.parse(jsonstr);console.log(strtoobj);function test(){console.log("这是一个测试方法...");console.log(this);}test();var o={name:"zhangsan",age:18,sayhello:function(){console.log("你好呀~");console.log(this);}}o.sayhello();</script></body>
<script type="text/javascript">function loadWindow(){console.log("文档加载完毕...");}function test(){console.log("按钮被点击了...");}function aa(){console.log("失去聚焦点了...");}function bb(){console.log("聚焦了...");}function changecity(){console.log("值改变了..");}function outButton(){console.log("鼠标离开了按钮...");}var btn2 = document.getElementById("btn2");console.log(btn2);btn2.onclick= function(){console.log("按钮2被点击了...");}btn2.onmouseout=function(){console.log("鼠标离开了按钮2...");}var btn3 = document.getElementById("btn3");btn3.addEventListener("click" ,function(){console.log("按钮3被点击了...");},false);btn3.addEventListener("mouseout" ,btnfunction,false);function btnfunction(){console.log("鼠标离开了按钮3...");}btn3.addEventListener("click" ,function(){console.log("按钮3被点击了...");},false);</script>

实例：

表单：

获取表单：

1. document.getElementById("id属性值");
                   通过from标签的id属性值获取表单对象
               2.document.表单的name属性值；
                   通过表单的name属性值获取表单对象
               3.document.forms[下标]
                   通过指定下标获取表单元素
               4.document.forms[表单的name属性值];
                   通过表单的name属性值获取表单对象

               document.forms：获取html文档中的所有表单对象

获取表单元素：

获取input元素
               // document.getElementById("id属性值");
               // 表单对象.表单元素的name属性值;
               // document.getElementByName("name属性值");
       获取下拉选项
               //获取下拉框对象
                   var 对象 = document.getElementById("id属性值");
               //获取下拉框的下拉选项列表
                   var 对象 = 下拉框对象.options;
               //获取下拉框被选中项的索引
                   var index = 下拉框对象.selectedIndex;
               //获取下拉框选中项的值
                   var 值 = 下拉框对象.value;
               //通过选中项的下标获取下拉框被选中项的值
                   var 值 = 下拉框对象.options[index].value;
               //获取下拉框被选中项的文本
                   var 文本值 = 下拉框对象.options[index].text;
           注：
                   获取下拉框选中项的值时：（value）
                       如果option标签设置了value属性值，则获取value属性对应的值
                       如果option标签未设置了value属性值，则获取的是option双标签中的文本值
                   下拉框的选中状态
                       选中状态：selected = selected、selected = true、selected
                       未选中状态：selected = false、不设置selected属性

*Jquery

Ajax
               异步无刷新技术

               原生Ajax的实现流程
               1.得到XMLHttpRequest对象
                        var xhr = new XMLHttpRequest();
               2.打开请求
                        xhr.open(method,uri,async);
                       method:请求方式，get\post
                       uri:请求地址
                       async:是否异步。如果是true表示异步，false表示同步
               3.发送请求
xhr.send(params);
params:请求时需要传递的参数
                       如果是GET请求，设置null。(GET请求的参数设置在uri后面)
                       如果是POST请求，无参数设置为null,有参数则设置参数
               4.接收响应
xhr.status 响应状态（200=成功 404=资源未找到 500=服务器异常）
xhr.responseText 得到响应结果