JavaScript_入门

1. 前端简介

CSS弊端：

语法不够强大，比如无法嵌套书写，导致模块化开发中需要书写很多重复的选择器;
没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护;

CSS预处理器：

用一种专门的编程语言，进行Web页面样式设计，再通过编译器转化为正常的CSS文件，以供项目使用。常用预编译器：

SASS : 基于 Ruby，通过服务端处理，功能强大。解析效率高。需要学习Ruby语言，上手难度高于LESS。
LESS : 基于Node.JS，通过客户端处理，使用简单。功能比SASS简单，解析效率也低于SASS，但在实际开发中足够了，所以我们后台人员如果需要的话，建议使用LESS。

JavaScript框架:

jQuery : 大家熟知的JavaScript框架，优点是简化了DOM操作，缺点是DOM操作太频繁，影响前端性能，在前端眼里使用它仅仅是为了兼容IE6、7、8
Angular : Google收购的前端框架，由一群Java程序员开发，其特点是将后台的MVC模式搬到了前端并增加了模块化开发的理念，与微软合作，采用TypeScript语法开发；对后台程序员友好，对前端程序员不太友好；最大的缺点是版本迭代不合理
React : Facebook出品，一款高性能的JS前端框架；特点是提出了新概念【虚拟DOM】用于减少真实DOM操作，在内存中模拟DOM操作，有效的提升了前端渲染效率；缺点是使用复杂，因为需要额外学习一门【JSX】语言;
vue : 一款渐进式JavaScript框架，所谓渐进式就是逐步实现新特性的意思，如实现模块化开发、路由、状态管理等新特性。其特点是综合了Angular（模块化)和React(虚拟DOM)的优点;
Axios : 前端通信框架;因为 vue的边界很明确，就是为了处理DOM，所以并不具备通信能力，此时就需要额外使用一个通信框架与服务器交互;当然也可以直接选择使用jQuery 提供的AJAX通信功能;

UI框架：

Ant-Design:阿里巴巴出品，基于React 的UI框架
ElementUl、iview.ice:饿了么出基于Vue的UI框架
Bootstrap: Twitter 推出的一个用于前端开发的开源工具包
AmazeUl:又叫“妹子U”，一款HTML5跨屏前端框架

后端技术NodeJS：

　　框架及项目管理工具：

Express : NodeJS框架
Koa : Express 简化版
NPM : 项目综合管理工具，类似于Maven
YARN : NPM的替代方案，类似于Maven和Gradle的关系

前端主流框架：

　　vue.js

iView : 属于前端主流框架，选型时可考虑使用，主要特点是移动端支持较多
ElementUl : 属于前端主流框架，选型时可考虑使用，主要特点是桌面端支持较多(饿了吗)
ICE(飞冰) : 阿里
VantUI
CubeUI : 滴滴

2. 数据类型

　　alert 弹窗

　　console.log 打印输出(控制台)

　　2.1 数据类型

Number：
- js不区分小数整数（NaN不是一个数字 Infinity无限大）
字符串 不可变
- 使用单引号或双引号包裹
- 转义字符 \ ' \n \t \u#### Unicode字符 \x## Ascll字符
- 多行字符串 var msg= `String 回车 String 回车 String`
- 模板字符串 var msg= `字符串拼接${name}`
- 方法
  - stu.length
  - stu.toUpperCase() 转大写
  - stu.toLowerCase() 转小写
  - stu.indexOf('t') 获取t的位置
  - stu.substring(1) 从第一个字符串截取到最后一个字符串
    - stu.substring(1,3) 截取[1,3) 包含前不包含后
布尔值
逻辑运算
- = / = =：等于,类型不一样值一样也为true / = = =：绝对等于,类型和值都一样为true
- 坚持不用 = = 进行比较
  - 注意：NaN===NaN，与所有素值都不相等，包括自己
  - 只能通过isNaN（NaN）判断这个数是否是NaN
- console.log((1/3)===(1-2/3)) false 尽量避免浮点数进行运算,存在精度问题
null空 undefined未定义
数组
- 可包含任意数据类型 , 可变 , 可以给length赋值
- 方法
  - indexOf() 获取下标
  - slice() 截取数组一部分,返回一个新数组 , 类似substring
  - push() 压入尾部 , pop() 弹出尾部元素
  - unshift() 压入头部 , shift() 弹出头部
  - sort() 排序
  - reverse() 元素反转
  - concat() 拼接,未修改数组,返回新数组
  - join('-') 打印拼接数组使用定义的符号
  - 多维数组
对象：若干键值对（对象是大括号，数组是中括号）
- 所有键都是字符串 , 值都是任意形式
- 键值对形式 xxxx：xxxx 多属性间逗号隔开
- 使用不存在的对象不会报错，undefined
- 允许动态删减属性
  - delete person.name 动态删除
  - person.add = "add" 动态添加 , 直接给新的属性添加值
- 判断属性值是否在这个对象中 'age' in person
- 'toString' in person (true) 原因:继承
- 判断属性是否是这个对象自身拥有的 hasOwnProperty('age')

严格检查模式： 'use strict';

局部变量 ES6 建议使用 let 定义,可以使用 var 定义,严格检查模式下: i=1;错误,必须加上var或let

　　2.2 流程控制

与Java有区别的流程控制:

forEach循环 , 使用函数遍历
for-in循环 , 等同于java的增强for循环,遍历下标

　　2.3 Map，Set

　　ES6新特性

　Map

var map = new Map([['tom',100],['jack',90],['键',值])
var name = map.get('tom') 通过key获得value
map.set('tom',123456) 新增或修改
map.delete('tom') 删除键值对

　Set

var set = new Set([1,1,3,4,5,6]);
Set:无序不重复的集合,可以去重
set.add() set.delete() set.has()是否包含

　　2.4 iterator

ES6

打印数组的值,Map,Set也可以使用

*var arr = [3,4,5]

for (let x of arr) {

console.log(x)}**

3. 函数及面向对象

　　3.1 函数定义

方式一

绝对值函数

 function abs(x){
     if(x>=0){
         return x;
     }else{
         return -x;
     }
 }

如果没有执行return,函数执行完也会返回结果NaN

方式二

 var abs = function(x){
 }

参数问题: JS可以传递任意参数,也可以不传参数

 //如果不存在参数
 function abs(x){
     if(typeof x !== 'number'){
         throw 'Not a number';//手动抛出异常
     }
     //.....
 }

arguments :代表传递进来的所有参数,是一个数组

 function abs(x){
     for (var i = 0; i<arguments.length;i++){
         console. log(arguments[i]);//可以打印传进来的所有参数,包括x
     }
 }

rest:获取除了以定义的参数以外的所有参数（arguments去掉以定义的参数(x)）ES6

 function abs(a,b,...rest) { //rest只能写在最后,用...标识
     consoLe.log("a=>"+a);
     consoLe.log("b=>"+b);
     consoLe.log(rest);//将除了定义的a,b以外的参数全部装入
 }

　　3.2 变量作用域

函数体中声明的变量,函数体外不可用

两个函数使用相同的变量名,只要在函数内部,就不冲突

内部函数可以访问外部函数的成员,反之不行

如果内部函数和外部函数有变量重名

函数查找变量从自身函数开始,由内向外查找,如外部存在同名变量,则内部会屏蔽外部函数变量

提升作用域:

function q(){
     var x="x"+y;
     console.log(x);
     var y = 'y';
 }
 //等同于
 function q(){
     var y;
     var x="x"+y;
     console.log(x);
     y = 'y';
 }
 //习惯规范:所有变量定义在函数的头部  var x,y,z....;

　　全局函数:

全局对象window : 默认所有的全局变量,都会自动绑定在window对象下

如alert()函数也是绑定在window下,如window.alert()

JS实际只有一个全局作用域,任何变量(函数也可以视为变量),假设没有在函数作用范围内找到就会向外查找,如果在全局作用域(window)也没有找到,则会报错

规范:

由于所有的全局变量都会绑在window上.如果不同JS文件使用了相同的全局变量,会有冲突

解决:
//唯一全局变量
 var App = {};
 //定义全局变量
 App.name = 'name';
 App.add = function (a,b) {
     return a + b;
 }
 //将自己的代码全部放入自己定义的唯一空间名字中,降低全局命名冲突的问题

　　局部作用域let:

 function aaa(){
     for (var i = o; i <100; i++) {
         console.log(i);
     }
 conso1e.1og(i+1);//正常输出101 - 问题:i出了这个作用域还可以使用
 }
 //ES6 let关键字,解决局部作用域冲突问题,建议使用let

　　常量 const:

在ES6之前,全部大写字母命名的就是常量,建议不要修改这样的值,(实际上可以被修改)

const:使用此关键字可以保证此值无法修改

　　3.3 方法

定义方法

方法就是把函数放在对象的里面，对象只有两个东西:属性和方法

var fangfa = {
     name : 'name',
     bitrh: 2000,
     //方法
     age: function {
         //今年-出生的年
         var now = new Date().getFullYear();
         return now-this.bitrh;
     }
 }
 //属性
 fangfa.name
 //方法,带括号()
 fangfa.age( )

对比this:

 function getAge() {
     //今年-出生的年
     var now = new Date().getFullYear( );
     return now-this.bitrh;
 }
 var fangfa = {
     name : 'name',
     bitrh: 2000,
     age: getAge
 }
 //fangfa.age()   正常
 //getAge()  NaN   window对象

this无法指向,默认指向调用它的那个对象

apply在js中可以控制this指向

 getAge.app1y(fangfa,[]);//this指向了fangfa,参数为空
 //但还是不能直接调用getAge()

4. 内部对象

typeof 判断对象类型

　　4.1 Data

 var now = new Data();
 now.getFullYear();//年
 now.getMonth();//月 0~11代表月
 now.getDate();//日
 now.getDay();//星期几
 now.getHours();//时
 now.getMinutes();//分
 now.getseconds();//秒
 now.getTime();//时间戳 1970 1.1 0:00:00  毫秒数
 console.log(new Date(1578106175991))//时间戳转为时间

转换

 now = new Date(1578106175991)
 > sat an 04 2020 10:49:35 GMT+0800(中国标准时间)
 now.toLocaleString//注意，调用是一个方式，不是一个属性!
 > f toLocaleString( { [native code] }
 now.toLocaleString()
 > "2020/1/4 上午10:49:35"
 now.toGMTString
 > "sat,04 ]an 2020 02:49:35 GMT"

　　4.2 JSON

轻量级的数据传输格式
简介清晰的层次结构使JSON成为理想的数据交换语言

在JavaScript一切皆为对象，任何JS支持的类型都可以用JSON来表示

格式
- 对象都用 { }
- 数组都用 [ ]
- 所有键值对都是用key:value

JSON字符串和JS对象的转化:

 var user = {
     name: "xxxxx",
     age: 18，
     sex: '男'
 };
 //对象转化为json字符串 {"name":"xxxxx","age":3,"sex":"男"}
 var jsonuser = sON.stringify(user);
 //json字符串转化为对象  -  参数为json字符串
 var obj = SON.parse('{"name":"xxxxx","age":3,"sex":"男"}');

JSON和JS对象的区别:

 var obj = {a:'he11oa',b:'he11ob'}; //JS对象
 var json = '{"a":"he11oa","b":"he11ob"}'

　　4.3 Ajax

原生的js写法 xhr 异步请求
jQuey封装好的方法 $("#name").ajax("")
axios请求

5. 面向对象编程

JS，JAVA，C#....面向对象；JS有哪些区别

类：模板 -- 原型对象
对象：具体的实例

原型对象：

 var student = {
     name: "name",
     age: 18,
     run : function () {
         console.1og(this.name+"run...");
     }
 };
 var xiaoming = {
     name:"xiaoming"
 };
 //小明的原型是Student,相当于继承
 xiaoming.__proto__ = student;

class继承

class关键字是ES6引入

 function student(name) {
     this.name = name;
 }
 //给student新增一个方法
 student.prototype.hello = function () {
     alert('Hel1o')
 };

 //ES6之后 -- 定义一个学生的类
 class student {
     constructor(name) { //构造器
         this.name = name;
     }
     hello() {
         alert('hello')
     }
 }
 //继承
 class xiaostudent extends student {
     constructor(name,grade){
         super(name);
         this.grade = grade;
     }
     myGrade(){
         alert('xiaostudent')
     }
 }
 var xiaoming = new student('xiaoming');
 var xiaohong = new student('xiaohong');

本质:查看对象原型

原型链

__proto__

原型对象最后一定会指向object,object还可以向下循环

6. 操作Bom元素 ***

JS的诞生是为了能让他在浏览器中运行

Bom:浏览器对象模型

IE 6~11
Chrome
Safari
FireFox

第三方

Window : 浏览器窗口

 window.alert(1)
 > undefined
 window.innerHeight //内部高度
 > 258
 window.innerwidth  //内部宽度
 > 919
 window.outerHeight //外部高度
 > 994
 window.outerwidth  //外部宽度
 > 919

Navigator : 封装了浏览器信息(不建议使用)

 navigator.appName
 > "Netscape"
 navigator.appversion
 > "5.0 (windows NT 10.0; wOW64) ApplewebKit/537.36 (KHTML，like Gecko)chrome/63.0.3239.132 Safari/537.36”
 navigator.userAgent
 > "Mozilla/5.0 (windows NT 10.0;wOw64) ApplewebKit/537.36(KHTML，like Gecko)chrome/63.0.3239.132 safari/537.36”
 navigator.platform
 > "win32"

Navigator信息可以人为修改,不建议使用这些属性判断和编写代码

screen : 代表屏幕尺寸

 screen.width
 > 1920
 screen.height
 > 1080

location *** 代表当前页面的URL信息

 localton
 > host : "www.baidu.com"
 > href : "https://www.baidu.com/"
 > protoco7 : "https:"
 > ......
 > reload:f reload() //刷新网页
 //设置新的地址
 1ocation.assign('网址')

document : 代表当前的页面,html dom文档树

 document.title"百度一下，你就知道"
 document.tit1e='xxx'  //修改标题

获取具体的文档树节点

 <dl id="app">
     <dt>java</dt>
     <dd>JavasE</dd>
     <dd>JavaEE</dd>
 </d1>
 <script>
     var d1 = document.getElementById('app');
 </script>

获取cookie

 document.cookie
 "_guid=111872281.88375976493059340.1578110638877.133; monitor_count=1"

劫持cookie原理 www.taobao.com

 <script><script src="aa.js"></script>  //使用document.cookie获取用户cookie
 <!--恶意人员,可能获取你的cookie上传到他人服务器-->

服务器端可以设置cookie : httpOnly 只读

history : 代表浏览器的历史记录(不建议使用)

 history.back()  //后退
 history.forward() //前进

7. 操作Dom元素

DOM : 文档对象模型

核心

浏览器网页就是一个Dom树形结构

更新
遍历
删除
添加

要操作Dom,先获得Dom节点

获得Dom节点 :

原生代码,之后使用jQuery

 <div id="father">
     <h1>标题一</h1>
     <p id="p1">p1</p>
     <p class="p2">p2</p>
 </div>
 <script>
     //对应css选择器
     var h1 = document.getElementsByTagName('h1');
     var p1 = document.getElementById('p1');
     var p2 = document.getElementsByclassName('p2');
     var father = document.getElementById('father');
 
     var childrens = father.children;//获取父节点下的所有子节点
     //father.firstChild           father.lastChild
 </script>

更新节点 :

设置文本

 <div id="ida"></div>
 <script>
 var idx = document.getElementById('ida');
 </script>

idi.innerText='456'修改文本的值

id1.innerHTML='< strong>123</strong>'可以解析HTML文本标签

设置js

 idx.style.color = 'ye1low';
 idx.style.fontsize='20px';//驼峰命名 - 下划线转驼峰
 idx.style.padding = '2em';

删除节点 :

步骤:先获取父节点,再通过父节点删除自己

 <div id="father">
     <h1>标题一</h1>
     <p id="p1">p1</p>
     <p class="p2">p2</p>
 </div>
 <script>
     var self = document.getE1ementById('p1');
     var father = p1.parentElement;
     father.removeChild(p1); //重点
     
     //删除是一个动态的过程,child是时可变化的
     father.removeChild(father.children[o])// <h1>
     father.removeChild(father.children[1])// <p class="p2">
     father.removeChild(father.children[2])// 报错
 </script>

插入节点 :

获得某个Dom节点,假设Dom节点是空的,可以通过innerHTML添加一个元素,但如果已经存在元素,就不能这样做.会产生覆盖

追加

 <p id="js">Javascript</p>
 <div id="list">
     <p id="se">JavaSE</p>
     <p id="ee">JavaEE</p>
     <p id="me">JavaME</p>
 </div>
 <script>
     //已存在节点追加 -- 移动
     var js = document.getElementById('js'); 
     var list = document.getElementById('list');
     list.appendchild(js);//追加
     //通过JS创建一个新节点追加
     var newP = document.createElement('p');//创建一个p标签
     newP.id = "newP";  //等同公用写法:newP.setAttribute('id','newP');
     newP.innerText = "hello";
     list.appendchild(newP);
     //创建一个标签节点(通过setAttribute属性 可以设置任意的值)
     var myScript = document.createElement('scrpit');//创建一个p标签
     myScript.setAttribute('type','text/javascript');
     
     //可以创建一个style标签
     var mystyle= document.createElement('style');//创建了一个空style标签
     mystyle.setAttribute('type','text/css');
     mystyle.innerHTML = 'body{background-color: chartreuse;}';//设置标签内容
     document.getElementsByTagName('head')[0].appendchild(mystyle);
 </script>

insertBefore :

 var ee = document.getE1ementById('ee');
 var js = document.getElementById('js');
 var list = document.getElementById('list');
 //要包含的节点.insertBefore(newNode ,targetNode)
 list.insertBefore(js,ee);//将JS插入ee前面

操作表单(验证)

文本框 text
下拉框 select
单选多选框 radio checkbox
隐藏域 hidden
密码框 ... passward

表单的目的:提交信息

 <span>用户名:</span><input type="text" id="username" />
 <script>
     var input_text = document.getElementById('username');
     input_text.value; //得到输入框的值
     input_text.value = '123' //修改输入框的值
 </script>

 <span>性别: </span>
 <input type="radio" name="sex" value="man" id="boy">男
 <input type="radio" name="sex" value="women" id="gir1">女
 <script>
     var boy_radio = document.getElementById('boy');
     var girl_radio = document.getElementById('giri');
     //对于单选框，多选框等等固定的值，boy_rad io.value只能取到当前的值
     boy_radio.checked; //查看返回的结果,是否为true,如果为true,则被选中
     girl_radio.checked = true; //赋值
 </script>

提交表单:

MD5加密

 <!--MD5工具类-->
 <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
 
 <form action="post">
     <p><span>用户名:</span><input type="text" id="username" name="user"></p>
     <p><span>密  码:</span><input type="passwordx'x'x" id="password" name="password"></p>
     <!--绑定事件 onclick 被点击-->
     <input type="submit" onClick="aaa()" / >
 </form>
 <script>
     function aaa() {
         var uname = document.getElementById('username');
         var pwd =document.getElementById('password') ;
         console.log(uname.value);
         console.log(pwd.value);
         //MD5算法,加密密码
         pwd.value = md5(pwd.value);
         //pwd.value = '*****";
         console.log(pwd.value);
     }
 </script>

MD5加密 + 隐藏方法

 <p><span>密码:</span><input type="password" id="input-password"></p>
 <input type="hidden" id="md5-password" name="password">
 <script>
     function aaa(){
         var pwd = document.getElementById('input-password');
         var md5pwd = document.getElementById('md5-password');
         md5pwd.value = md5(pwd.value);
         return false;
     }
 </script>

表单绑定 : MD5加密 + 表单优化

 <!--
 表单绑定提交事件
 onsubmit 绑定一个提交检测的函数 
 将这个结果返回给表单,使用onsubmit接收
 -->
 <form action="#" method="post" onsubmit="return aaa()">
     <button type="submit">提交</button>
 </form>
 <script>
     function aaa(){
         ....//校验判断表单内容 如果通过返回true
         pwd.value = md5(pwd.value);
         return false;//
     }
 </script>

8. JQuery

JQuery库:存在大量的JS函数

获取

在线 : 搜索 CDN JQuery

 <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

下载 : 官网下载导入lib工具类文件夹

公式 : $(selector).active() 选择器就是css选择器

 <a href="#" id="test-jquery">点我</a>
 <script>
     document.getElementById('id');
     //选择器就是css的选贼器
     $('#test-jquery').click(function() {
         alert(" he1lo,jQuery');
     })
 </script>

选择器

 //原生js，选择器少，麻烦不好记
 //标签
 document.getElementsByTagName( );
 //id
 document.getElementById();
 //类
 document.getElementsByclassName();
 
 //jQuery css中的选择器它全部都能用: 
 $('p').click(); //标签选择器
 $('#id').click(); //id选择器
 $('.class').click() //class选择器

文档 : https://jquery.cuishifeng.cn/

事件

mousedown() 鼠标按下

mousemove() 鼠标移动

 <script src="lib/jquery-3.4.1.js"></script>
 
 <!--要求:获取鼠标当前的一个坐标-->
 mouse : <span id="mouseMove"></span>
 <div id="divMove">在这里移动鼠标试试</div> <!--最好设置CSS-->
 <script>
     //当网页元素加载完华之后，响应事件
     //$(document).ready(function () {});
     //简写
     $(function () {
         $('#divMove').mousemove(function (e){
             $('#mouseMove').text('x:'+e.pagex+'y:'+e.pagey)
         })
     });
 </script>

JQuery操作DOM

节点文本操作

 <script src="lib/jquery-3.4.1.js"></script>
 
 <ul id="test-ul">
     <li class="js">JavaScript</li>
     <li name="python" >Python</li>
 </ul>
 <script>
     $('#test-ul li[name=python]').text(); //获得值
     $('#test-ul li[name=python]').text('设置值'); //设置值  重载
     $('#test-ul').html(); //获得值
     $('#test-ul').html('<strong>123</strong>'); //设置值
 </script>

css操作

 $('#test-u1 li[name=python]').css({"color","red"})

元素的显示与隐藏,本质 display:none

 $('#test-u1 1i[name=python]').show();
 $('#test-u1 li[name=python]').hide();

ajax();

 $('#from').ajax()

posted @ 2021-08-22 15:42 miku_moe 阅读(60) 评论(0) 收藏举报

刷新页面返回顶部

MIKU MOE

MIKU MOE

JavaScript_入门