JavaWeb基础—JS学习小结

JavaScript是一种运行在浏览器中的解释型的编程语言

推荐:菜鸟教程
一、简介
js:javascript是基于对象【哪些基本对象呢】和和事件驱动【哪些主要事件呢】的语言,应用在客户端(注意与面向对象的区分)

js的三大特点
  交互性:信息的动态交互
  安全性:不能访问本地磁盘的文件
  跨平台性:能支持js的浏览器都能运行

JavaScript 对大小写敏感
与java的区别:(只是长得像而已,雷锋&雷峰塔)
   1.不同公司开发的语言,java:Oracl js:网景公司
  2.java:面向对象 js:基于对象(已经有很多存在可以直接使用的对象)
  3.java:强类型语言 js:弱类型语言
  4.java:需要先编译再运行 js:不需要

js的组成:
  ECMAScript
    ECMA:欧洲计算机组织 基本语法
  BOM
    Broswer Object Model 浏览器对象模型
  DOM
    Document Object Model 文档对象模型
    用以访问 HTML 元素的正式 W3C 标准


二、与HTML两种结合方式(建议放在</body>后)
  1.使用script标签 <script type="text/javascript"> js代码 </script>
    那些老旧的实例可能会在 <script> 标签中使用 type="text/javascript"。
    现在已经不必这样做了。JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。
  2.使用script标签,引入外部js文件 <script type="text/javascript" src="js文件路径">【此处应为空】</script>
    提示:外部脚本不能包含 <script> 标签。

   请使用 document.write() 仅仅向文档输出写内容。
   如果在文档已完成加载后执行 document.write,整个 HTML 页面将被覆盖:

三、基本语法(注释同java)
1.原始类型和变量声明:
  五个数据类型:【string——详细方法,参见菜鸟教程。 number boolean】 null undifined
  JavaScript 变量有很多种类型,但是现在,我们只关注数字和字符串
  极大或极小的数字可以通过科学(指数)计数法来书写:

  使用var进行变量定义,使用typeof(变量名);查看当前变量类型
  var data=new Data(); 拿到对象引用,null表示引用为空,父类都为Object

  类型转换可以使用对应的方法:String(x),Number(x)
2.js的语句
  if判断语句(同java)
  switch语句,弱类型,都支持 switch(){
  case:
  break;
  case:
  break;
  }
  循环语句 for while do{}while 类似java
3.js的运算符:
  与java不同的,由于是弱类型,var i=1;1/10*10=1(不是java的0)
  字符串+同java的拼接 相减时会真正执行(非数字报错NaN)- var str="2" str-1=1;
  boolean类型也可以进行加减运算,true为1 false为0
  == :等于,只判断值,与类型无关
  === :全等,检测值和类型
  向页面输出:document.write();输出值或者HTML代码 ("aaa") ("<hr/>") 对应99乘法表案例
4.js的数组:
  弱类型,存取数据无类型要求
  表示方法: var arr=[1,"aa",true];
  使用内置对象Array var arr1=new Array(5),长度为5; 取同java arr1[0]=1;
  var arr2=new Array(3,4,5);为具体元素
  长度属性:length 如arr.length
5.js的函数:【写完方法记得调用,注意单双引号和分号的使用】
  定义方式:使用function关键字:function 函数名(参数列表){} 返回值可选
  调用方法:函数名(参数列表);参数列表不带类型
  弱类型语言,无需类型
  function add(a,b){ var sum=a+b; alert(sum);}
  add(2,3);
  匿名函数:function(){} 调用 var add3=function(){} add3(5,6);
  与上一种类似
  动态函数:【作了解】使用内置对象Function new Function("参数列表","方法体和返回值");
  使用方式同上,参数列表 方法体可以提出来写
6.js的全局变量和局部变量
  全局变量:在一个script中定义一个变量,全局js页面中都可以使用。(其它的script也可以)
  **IE中调试工具,按F12

7.script标签的放置的位置:
  理论上是全局都可以(包括HTML标签后)
  原则:放在</body>后面,由于HTML是由上到下解析,可以保证获取到HTML中的值等。
8.js的重载:

  js中是不支持重载的,原因是js中识别函数的唯一方法就是函数的函数名

  如想模拟java的重载,可以通过函数体中队参数的判断进行模拟
9. JavaScript 对象
  对象由花括号分隔。在括号内部,对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔:
  var person={firstname:"Bill", lastname:"Gates", id:5566};
  当然也可以new一个自己的 var person = new Object();
  当您像这样声明一个 JavaScript 变量时:
  var txt = "Hello";
  您实际上已经创建了一个 JavaScript 字符串对象。字符串对象拥有内建的属性 length。
  对于上面的字符串来说,length 的值是 5。字符串对象同时拥有若干个内建的方法

JS对象:

 

一、string对象,类似于java两种创建方式(栈中或者堆中)HTML不区分大小写,JS区分
  属性和方法:length属性 如 str.length
  方法:1.与HTML相关的方法:
  bold()方法:加粗。 如str.bold();
  fontcolor()方法:字体颜色。如str.fontcolor("red");
  fontsize()方法:字体大小。如str.fontsize(2);
  link()方法:字符串显示为连接。如str.link("链接地址");str为链接显示内容
  sub()与sup()方法:设置上标与下标
    2.与java相似的方法:
  concat()方法:连接字符串。如str.concat("a");
  charAt()方法:返回指定位置字符 str.charAt(2);超出为空(非null)
  indexOf()方法:返回位置,没有返回-1;
  split()方法:将字符串切分为字符数组(从分隔符处分割为数组元素
  replace方法:替换,如str.replace("原始值","新值");
  substr()与substring():取子字符串
二、Array对象,创建方法见初识JS
  属性和方法:length属性 如arr.length
  方法:concat()方法:连接数组,返回一个新合成的数组
  join()方法:使用指定连接符,返回元素连接而成的字符串
  push()方法:向数组末尾添加新元素,并且返回新的数组长度,若加的是数组,
  新返回的长度仍是原长度加1,加入的视为一个元素!
  pop()方法:删除最后一个元素并返回该元素
  reverse()方法:颠倒数组元素顺序(改变原数组)
三、Date对象,创建 var date=new Date();类同java
  方法:toLocaleString()方法:格式化方法
  得到年,推荐getFullYear()方法
  得到月,使用getMonth()方法,注意返回范围0-11
  得到星期,使用getDay()方法,返回0-6,从周日开始
  得到日,使用getDate()方法,范围1-31,正常
  得到小时,getHours()方法,分秒同理
  getTimes()方法:返回1970年1月1日至今的毫秒数
  应用场景:使用毫秒数来处理缓存
四、Math对象,类似java也是静态方法,通过类名来调用,如Math.ceil(100.2);
  方法:Math.ceil()方法:向上取整
  Math.floor()方法:向下取整
  Math.round()方法:四舍五入
  Math.random()方法:得到随机数,同java,0.0到1.0之间的伪随机数
五、全局函数,由于全局函数不属于任何一个对象,直接写函数名使用
  方法:eval();执行js代码 ,var str = "alert("1122")"";eval(str);
  encodeURI:对字符编码,encodeURI(str);返回编码值
  decodeURI:对字符解码,为上述逆序
  isNaN();判断当前字符串是否是数字,是数字返回false,NaN表示不是数字
  parseInt();类型转换,类同java,字符串转数字
六、JS的重载
  注意java中重载:名称相同,参数可辨
  重写:子类父类相同方法名称与参数的不同实现

 

  JS不存在重载!但可以通过其他方法模拟实现重载。【然而并没有什么卵用,仅面试答答】
  arguements数组,保存传递的参数,就通过这个数组来实现
  function add(){//此处不传参数,函数内判断
  if(arguements.length==2){
  return arguements[0]+arguements[1];
  }else if(...){
  ...
  }

  ...
  
七、JS的BOM对象(浏览器对象)
  对象:navigator:获取浏览器的信息(客户机)如navigator.appName等(注意是属性。
  对象包含有关访问者浏览器的信息。具有误导性
  srceen:屏幕信息,如srceen.width
  location:(重点看href属性)href,设置或返回当前请求的url地址(HTML中的button的事件绑定
  <input type="button" value="点击跳转" οnclick="js代码方法等"/>
  location.href="".
  history:请求的url的历史记录
  <input type="button" value="back" οnclick="back()"/>
  function back(){history.back();}其它同理,history.forward();
  还可以history.go(-1或1实现)
  【重点】window:窗口的顶层对象(包含上述四个)
  方法:(window.alert();等为完整代码,可省略,依次类推
  alert();警告框页面弹窗,显示内容
  confirm();确认提示框,会返回一个确定与否的boolean值
  根据返回值做相关操作,if()
  prompt();输入的对话框【了解】,两个参数,提示信息与默认值
  close();是否关闭的方法(兼容性差)

 

  做定时器使用的方法:
  setInterval();两个参数,JS代码与毫秒数(1:1000)
  如:setInterval("f1();",1000)
  setTimeout();相同参数,倒计时后执行代码,单次执行
  ======================================
  clearInterval(); 清除setInterval定时器
  clearTimeout(); 同上,需要传的参数为set的返回值,清除此值实现
八、JS的DOM对象:getElementById()获取,操作使用innerHTML 以及直接.属性名操作
  改变样式:document.getElementById("p2").style.color="blue";

 

  文档对象模型,document为超文本文档,使用这些属性方法对超文本文档操作
  也就是第一步需要将这些文档封装成对象,并且解析这些超文本文档(如HTML)
  分配一个 树形 结构(层级结构)进行解析。比如说span里的id属性也会封装成对象
  对象:
  document对象:整个HTML文档
  element对象:元素对象,标签对象
  属性对象
  文本对象
  Node对象:即上述对象的父对象(树中结点对象),子对象中找不到
  想找的方法时。找父对象。

 

  DHTML:动态HTML,多项技术的合称(html,css,dom,js(此时强调的是ECMAScript))
九、document对象
  方法:(注意需要调用的格式 ,如document.write())
  write();向页面输出文本及html代码等
  getElementById();通过ID得到元素,
  如<input type="text" id="tex" name="name1" value(默认值)="aa"/> var input1 =document.getElementById(); //得到的是对象 alert(input1.value);
  getElementsByName();通过NAME得到一个集合(理解为对象数组)
  如同上述有四个同name的输入项 var inputs =document.getElementsByName();
  常用的遍历,for(var i=0;i<inputs.length;i++)
  getElementsByTagName();通过标签名字得到
  如var inputs=document.getElementsByTagName("input");

 

  windou弹窗案例:见案例
  注意问题,案例中访问的是本地文件,由于JS的安全机制,浏览器不生效,当然此情况
  仅限于此案例,实际开发不会如此操作
  在末尾添加结点案例:见案例
  基本思路是创建节点,进行添加。基本步骤:
  1.获取ul标签
  2.创建li标签
  3.创建文本
  4.将文本添加到li下
  5.将li添加到ul下
十、元素对象,element对象:要操作必须要获取到(get...)了解。
  方法:getAttribute();得到属性的值。input1.getAttribute("value");
  setAttribute(name,value);设置相应属性的值IE缓存的清理。
  removeAttribute();删除属性,但不能删value!
  属性:childNode: 获取子标签,返回集合(对象数组) ul.childNode
  兼容性差
  【重点】方法:在ul下执行ul1.getElementsByTagName();获取子标签的唯一有效方法,
  document里的方法特殊用法

 


十一、Node对象
  属性一:nodeName;
      nodeType;
      nodeVlaue;
  使用DOM解析HTML的时候,HTML里面的标签 属性 文本都封装成对象
  标签可以使用三个属性,例如id属性也可以使用三个属性,var id1 = span1.getAttribute();
  标签 属性 文本
    nodeType 1 2 3
    nodeName 大写(SPAN等) 属性名称 如#text
    nodeValue null 属性的值 文本的值
    !常用的为nodeType(从外到内)

 

  属性二:父节点,子节点,同辈节点:层级结构,类同数据结构
  parentNode,childNodes(兼容性差)firstChild lastChild,

 

十二、 操作DOM树:
  先document.createElement("p");
  var node=document.createTextNode("这是新段落。")
  para.appendChild(node);
  创建了一个带文本的p标签,后面可以再使用相似方法操作

 


  appendChild()方法:实现剪切粘贴的效果。注意是剪切效果!
  insertBefore(newNode,oldNode)方法:在旧结点之前实现插入新结点,通过old结点的父节点进行添加,毕竟不能自己添加自己
  !不存在insertAfter方法
  removeChild():方法,通过父节点进行删除操作,自己也不能删除自己
  基本步骤:获取要删除的结点、获取父节点。进行删除操作
  replaceChild();方法,类同上删除操作。获得要替换的旧结点,创建要替换的新结点,
  获取父节点,进行替换。
  cloneNode(boolean)复制结点,bool表示是否复制。一般是true,东西理解为放在剪切板
  操作的是剪切板的内容(操作副本),原内容还在。

 

十三、innerHTML属性:非DOM组成部分,主流浏览器均兼容,【用的多】
  主要作用:获取文本内容 如span1.innerHTML注意是属性
  向标签里设置内容(可以是html代码)如div11.innerHTML = "";
  var tab = "<table></table>";注意外面双引号,里面单引号。
  案例:动态显示时间:见案例。
  全选练习:见案例。checked=true表示选中
  下拉列表左右选择案例:见案例。
  select中multiple="multiple"属性实现显示所有下拉选择
  selected="true"表示选中
  省市联动案例:见案例。select的onchange方法;注意循环的长度,让i回来以便取完。
  动态生成表格案例:见案例。

一些事件:

 

 js事件,待更新。。。

 

 

 

实例
本例检测输入变量的值。如果值是错误的,会抛出一个异常(错误)。
catch 会捕捉到这个错误,并显示一段自定义的错误消息:
<script>
function myFunction()
{
try
{
var x=document.getElementById("demo").value;
if(x=="") throw "empty";
if(isNaN(x)) throw "not a number";
if(x>10) throw "too high";
if(x<5) throw "too low";
}
catch(err)
{
var y=document.getElementById("mess");
y.innerHTML="Error: " + err + ".";
}
}
</script>

 

<h1>My First JavaScript</h1>
<p>Please input a number between 5 and 10:</p>
<input id="demo" type="text">
<button type="button" οnclick="myFunction()">Test Input</button>
<p id="mess"></p>

 

转载于:https://www.cnblogs.com/jiangbei/p/6679823.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/252950.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Asp.Net 设计模式 之 “简单工厂”模式

主要思想&#xff1a;public static Operation CreateFactory(string ope) { //实例化空父类&#xff0c;让父类指向子类 Operation op null; switch (ope) { case "": op …

UBuntu国内镜像地址下载

http://www.oschina.net/p/ubuntu http://releases.ubuntu.com/ http://mirrors.163.com/ubuntu-releases/14.04/

Effective_STL 学习笔记(十九) 了解相等和等价的区别

find 算法和 set 的 insert 成员函数是很多必须判断两个值是否相同的函数代表&#xff0c; find 对 “相同” 的定义是相等&#xff0c;基于 operator &#xff0c; set::insert 对 “相同” 的定义是等价&#xff0c;通常基于 operator< 。 操作上来说&#xff0c;相等的概…

判断是否获取到手机相机权限

实际运用场景&#xff1a; 上传图片&#xff0c;查看相机设备&#xff0c;使用相机 在做这些操作的时候先调用这段话 AVAuthorizationStatus authStatus [AVCaptureDevice authorizationStatusForMediaType:AVMediaTypeVideo]; if (authStatus AVAuthorizationStatusRestric…

事物笔记

什么是事务&#xff1a; 一件事情有N个组成单元&#xff0c;执行之后要么同时成功&#xff0c;要么同时失败。 MySQL是一条默认的事务&#xff0c;一条sql语句就是一条事务。------------------------------------------------------------MySQL事务&#xff1a; 1、开启一个事…

Python Socket通信黏包问题分析及解决方法

参考&#xff1a;http://www.cnblogs.com/Eva-J/articles/8244551.html#_label5 1.黏包的表现(以客户端远程操作服务端命令为例) 注&#xff1a;只有在TCP协议通信的情况下&#xff0c;才会产生黏包问题 基于TCP协议实现的黏包 #!/usr/bin/env python # -*- coding: utf-8 -*- …

Django 路由

定义&#xff1a; URL配置(URLconf)就像Django 所支撑网站的目录。它的本质是URL与要为该URL调用的视图函数之间的映射表&#xff1b;你就是以这种方式告诉Django&#xff0c;对于这个URL调用这段代码&#xff0c;对于那个URL调用那段代码。 URL配置格式&#xff1a; urlpatter…

Ubuntu默认不进入图形界面

修改 /etc/X11/default-display-manager如果值为/usr/sbin/gdm&#xff0c;(ubuntu12.04 为/usr/sbin/lightdm)则进入图形界面 如果值为false&#xff0c;则进入控制台&#xff08;命令行方式&#xff09;。如果想从控制台进入图形界面&#xff0c;可以在控制台上输入命令 sudo…

读《构建之法》的心得体会

前段时间&#xff0c;我看了《构建之法》的一些内容&#xff0c;有了一些心得体会。 软件工程所讨论的是代码量巨大、涉及人数众多、项目需求多变时所要解决的问题。而在校学生根本就没有这样的环境。而邹欣老师的《构建之法》是我读过的书中最浅显易懂的软件工程书。 在绪论中…

2440内存管理

title: 2440内存管理 tags: ARM date: 2018-10-17 19:08:49 --- 2440内存管理 特性 大/小端&#xff08;通过软件选择&#xff09;地址空间&#xff1a;每个 Bank 有 128M 字节(总共 1G/8 个 Bank)除了 BANK0&#xff08;16/32 位&#xff09;之外【引导ROM&#xff0c;其总线宽…

C#设计模式之十二代理模式(Proxy Pattern)【结构型】

一、引言 今天我们要讲【结构型】设计模式的第七个模式&#xff0c;也是“结构型”设计模式中的最后一个模式&#xff0c;该模式是【代理模式】&#xff0c;英文名称是&#xff1a;Proxy Pattern。还是老套路&#xff0c;先从名字上来看看。“代理”可以理解为“代替”&#…

IPv6检测

1&#xff09;判断服务器是否支持IPv6 &#xff1a; http://ipv6-test.com/validate.php 2&#xff09;检测当前设备打开网站的连接方式是IPv4还是IPv6&#xff1a; http://ipv6.sjtu.edu.cn/ 转载于:https://www.cnblogs.com/superbobo/p/6687605.html

百度首席科学家吴恩达宣布将从百度离职

海外网3月22日电 据媒体消息&#xff0c;百度首席科学家吴恩达&#xff08;Andrew Ng&#xff09;在英文自媒体平台Medium及微博、Twitter等个人社交平台发布公开信&#xff0c;宣布自己将从百度离职&#xff0c;开启自己在人工智能领域的新篇章。 吴恩达是人工智能和机器学习…

CentOS7.5 使用二进制程序部署Kubernetes1.12.2(三)

一、安装方式介绍 1、yum 安装 目前CentOS官方已经把Kubernetes源放入到自己的默认 extras 仓库里面&#xff0c;使用 yum 安装&#xff0c;好处是简单&#xff0c;坏处也很明显&#xff0c;需要官方更新 yum 源才能获得最新版本的软件&#xff0c;而所有软件的依赖又不能自己指…

Oracle存储过程--案例

限额控制 CREATE OR REPLACE PACKAGE BODY NP_PCKG_MERCHANT_LIMIT ASPROCEDURE CHECK_LIMIT (in_iplCode IN VARCHAR2, --行业编号in_iplState IN VARCHAR2, --卡类型in_posNo IN VARCHAR2, --商户号in_tranAmt IN …

SpringMVC—对Ajax的处理(含 JSON 类型)(2)

这里编写了一个通用的类型转换器&#xff1a;用来转换形如&#xff1a; firstNamejack&lastNamelily&gender1&foodsSteak&foodsPizza&quoteEnteryourfavoritequote!&educationJr.High&tOfDDay 到 Student 对象。/*** author solverpeng* create 20…

马来西亚热情拥抱阿里巴巴 马云倡议的eWTP首次落地海外

摘要&#xff1a;3月22日&#xff0c;马来西亚总理纳吉布与阿里巴巴集团董事局主席马云一同出现在吉隆坡一场盛大启动仪式上&#xff0c;他们将共同见证马云的eWTP理念落地马来西亚。 3月22日&#xff0c;在邀请阿里巴巴集团董事局主席马云、阿里巴巴集团CEO张勇、蚂蚁金服集团…

征名公布|Qtum量子链企业版—Unita 中文名征集圆满落幕

Qtum量子链基金会为感谢社区与为了充分调动社区积极性&#xff0c;调动社区力量&#xff0c;在Qtum企业版完整公布之前将中文名留给社区成员们集思广益&#xff0c;其中截止2018年11月26日&#xff0c;我们征集到数百份来自社区的优秀名称&#xff0c;在经过基金会层层严肃认真…

随便玩玩之PostgreSQL(第一章)PostgreSQL简介

随便玩玩之PostgreSQL 未经授权不得转载 第1章PostgreSQL简介 1.1什么是PostgreSQLPostgresql是数据库&#xff08;软件&#xff09;。The worlds most advanced open source database.世界上最先进的开源数据库。 1.2PostgreSQL的优势随便用、不要钱 比MySQL好&#xff0c;媲美…

bootstrap 利用jquery 添加disabled属性

添加&#xff1a; $("#id").attr("disabled","disabled"); 去除&#xff1a; $("#id").removeattr("disabled");转载于:https://www.cnblogs.com/duyunchao-2261/p/6692141.html