java脚本语言学习心得

时间 2019-12-13

标签 java 脚本语言学习心得栏目 Java 繁體版

原文原文链接

第一篇技术博客，必定要认真！javascript

第一篇技术博客，必定要认真！css

第一篇技术博客，必定要认真！html

好了，进入正题：前端

一什么是脚本语言？java

程序的运行方式有两种：编译运行和解释运行jquery

1.1linux

前者的典型表明是java,web

从文件角度看分为三步：ajax

write[编写]:json

a.java文件(拿个记事本就能写，扩展名是.java),

compile[编译]:

编译(cmd命令是java a.java,ide集成了编译器运行以前自动编译)以后产生了a.class文件（是一堆二进制码，人看不懂，是给虚拟机看的）

运行[run]:

运行就是a.class文件在虚拟机上跑，在控制台或者dos输出结果，一个典型的helloworld!到此执行完成

这里有必要提一下java牛逼哄哄的"一次编写，到处运行"，举个例子就是windows下编译的.class文件拿到linux环境下照样能跑，根本缘由是虚拟机[jvm]只认.class二级制码文件，脱离了平台的限制，这样还有一个好处就是没法看到源码，除非反编译，抄都没地方抄。

1.2

解释运行不产生中间代码，就像翻译同样，一句话一句话执行，脚本语言的执行原理就是这样

这样运行的一个典型坏处就是一段10次循环的for循环，它就得翻译10遍，形成了重复执行同一段代码的现象，于是执行效率比较低

但针对简短的代码而言，没有什么计算量（后台处理程序是有必定计算量的），性能影响不是很明显，这也就是为何脚本语言总用在前端一些简单的特效和计算上的缘由

二我的学习路径

在学校打酱油的J2EE项目要作一些前端特效，组长是大神前端后端全包，我这个当小弟的看着组长那么辛苦于心不忍（其实也是想学一点东西），因而挺身而出要模仿着组长那几个页面的脚本也完成一些工做。原本的理解是照葫芦画瓢，不就jquery么，就几个选择器，回调函数的什么的，有啥难的？找了几个传智播客的视频看一看，搞得入了门，就开始坑队长了...最弱智的一个问题是int i=$("#div1").html(),当时憋了半天没想明白，这么SB的问题竟然把组长带进去了，还像模像样地调试了半天...看着本身不是红叉就是不能响应的脚本，当时别提有多心酸了。心酸归心酸，该坑还得继续坑，除了把人家代码粘下来改为狗屎以外，就是在火狐上f12改本身的狗屎,浪费了好多精力。吃了很多亏，仍是总结下吧。

1.别人的经验不能代替本身的思考。从我的来说，当时我是很佩服我组长的，技术一流，解决问题能力强，有毅力，并且我组长性格也好，没有沾上技术大牛孤芳自赏的臭毛病，每次个人弱智bug他都好耐心地调好（若是是人家本身作可能只用一半时间），而且愿意把技术教授于我。可是为何个人脚本仍是写的那么烂？由于我偷懒了，个人思惟天平倾向于依赖别人的经验，想走捷径。这是一种愚蠢的思想，身为技术人员，放弃了对技术的思考和探索，就像狼放弃了本身的牙和爪子，期望着吃从别人嘴里嚼烂的肉，用进废退，时间一长，就不得不面临着被淘汰的命运。

2.动手以前不要浮躁，正常的学习路线应该是这样的：先理解dom模型，再写一些简单的js脚本入门，以后系统的学习jquery(毕竟强大，js虽然是基础，但主要是入门领会思想，回头遇到问题再复习js也不迟)。推荐一个网站：w3c,里面的代码有展现功能，寓教于乐，更生动一点。推荐一个jquery工具：webstorm，其功能强大简直能够用丧心病狂形容，今后妈妈不再用担忧我不会jquery了。

三技术总结

JQuery是javaScript的库，所谓的库就是对js作了一个封装，若是js是一条生鱼，那么jquery就是红烧好的装在真空袋子里面熟食，食用起来更方便。在无聊的语法解释以前，有必要说一下dom模型。

document object model是一种基于浏览器的建模，它将浏览器页面的元素抽象成树形结构，根元素是document，枝叶有<div>，块，就像地图里面的省，下面有<p>,文本，<img>,图片等若干元素，这样组织的一大好处就是有条理性，另外可以经过父子，邻居关系遍历到每个元素，从计算机和人的角度都很容易接受。每一个元素想要被选到有四条路径(按照经常使用度排序)：

1.id选择：<p id="p1" class="style1">我是一段话</p> ； $（“#p1”）【$表明juqery选择器，（）里面是字符串，因此要打引号，#的含义是表明id】

2.元素选择: $("p") 【选择全部段落元素】

3.类选择器：$(".style1") 【选择style1这一类的元素】

4.采用相对位置的选择器：$("#p1").find("p10") 【选择了p1到p10之间的全部子元素】

前面经过dom模型对浏览器作了抽象，那么拿到元素以后呢？接下来就说一下JQuery/JS的另一个特色：弱类型

咱们知道在java中有八种基本数据类型，从int到char，为了符合面向对象的思想，对八种基本数据类型又作了装箱：从integer到character不等，再往上是全部对象的父类,object类（今后能够看出树形结构在计算机应用之普遍），可是在JQuery/JS中，只有一种类型，var类型，var类型就像孙悟空，囊括了全部从int到object的全部变种(你能想到的全部类型，反正声明变量上来就是var,var a='100'声明了一个字符串100，var a=100声明了整形100，前者加200是100200,后者是300)：

好比声明一个数组（二维的）:var a=new Array(); a[1]=new Array("a","b");

在好比获取标签元素并改变css样式：var p1=$("#p1") 　　p1.attr("font-color":red)

还能够定义对象（他们管他叫JSON,就是脚本中的对象,注意这是一个雇员而非普通抽象类型）：

var employees=[{"name":"BillGates","money":"100"},{"name":"Baffete","money":"200"}]

定了了一个对象数组，有两个雇员，盖茨和巴菲特，若是想看到盖茨的存款那么下面的代码能够作到：

$("#p1").html("<B>"+employee[0].money+"</B>"),让p1的内容显示盖茨的存款100块，哈哈

dom模型做为针对浏览器建模，var类型做为接受对象的容器,走到这里我突然想到了MVC的设计思想（model[模型]+view[视图]+controller[控制层]，不管从请求响应流程角度，仍是从解耦抽取代码角度看都堪称完美的一种软件设计思想）。那么dom和var同属于M层，手里有了砖头[盖房子的基本单位]，接下来就该考虑的是如何让这些砖头组织起来，也能够理解成为让这些砖头之间发生关系，动起来。

从客户角度来说，于电脑交互靠鼠标，就容易想到鼠标的两个操做，点击和移动，对应两个最经常使用的事件click和mouseover

$("button").click(function(){执行的代码}) 这段代码的含义是点击了按钮触发了一个函数(这个函数若是只用于点击就不用起名字了，相似于匿名函数)，完整的代码是这样子的，$(document).ready是浏览器打开页面时执行的第一段代码：

<script type="text/javascript" >
 $(document).ready(function () {
 $("#mm").click(function () {
 alert("123")
 })
 })

</script>

若是好多事件都用到了一个函数那么能够这么干，onclick="a()"是指点击按钮时触发的事件：

<script type="text/javascript" >
 function a() {
 alert("nihao a")
 }
</script>

<input type="button" id="mm" onclick="a()">
一个经典的jquery代码的两种写法到此完成，它实现的功能是，点击按钮弹出一个你好啊的对话框，以后能够在这基础上动一些小手脚，好比添加一段1000毫秒的动画，点击按钮以后，让一个画布(div)铺满整个屏幕，伸缩，淡出，显示指定的文字等等....除此以外还能发送ajax请求，所谓的ajax（异步消息处理）,通俗地讲就是区别于传统TCP交互方式【同步处理】，传统方式的一个典型例子是发送一个request,回传response以后刷新整个页面，对于某些请求（如只需改动页面某一数据）因为消耗资源太大，就发明了异步消息处理（回顾一下同步和异步，通俗地讲同步就是A喊B吃饭，A只有在获得B的回应以后才能作别的事情，异步中A只发送消息，而没必要等待B的回应），在不刷新整个页面的条件下获得了响应，发送和获得的数据格式能够是json样式的

四碎碎念的回顾

这一部分主要是对一些零散的知识点作一些回顾，代码基本上都本身跑了一遍，看着效果也会有成就感，主要复习jquery的鸡零狗碎（理解了思想以后其实到这里就好像记单词，我从w3c上面扒下来一些散碎，就像字典一个留个索引，方便之后用的时候回顾），也会穿插一点json,ajax，学习的时候注意推广着想(如对象-》数组对象；获取css的一个属性-》获取css的多个属性-》修改css的多个属性,下拉-》上拉-》动画时间，快慢-》能不能写一个回调函数?)

4.1语法

<head>
<script src="jquery-1.4.2.min.js"></script>
</head>
在head里引入jquery库

语法：
$(this).hide()
$(selector).action() 美圆符表明jquery,选择符selector查询和查找html元素，action()执行对元素操做

　$(document).ready(function(){...});
　选择器：$("p#demo")选取全部id=demo的<p>元素$("[href$='.jpg']") 选取全部 href 值以 ".jpg" 结尾的元素$("p").css("background-color","red");选取全部指定样式的元素

4.2效果（效果均可以加入callback做为参数，即回调函数【执行完效果后执行回调函数】）

　　hide(),隐藏；show(),显示；toggle()隐藏的变成显示的，显示的变成隐藏的

　　fadein(),淡入（渐渐显示隐藏的元素）;fadeout,淡出；fadetoggle,fadeto("slow",0.7) 快慢，透明度

　　$("button").click(function(){ $("div").animate({ left:'250px', height:'+=150px', width:'+=150px' }); });

　　animate:执行动画

　　$("button").click(function(){ var div=$("div"); div.animate({left:'100px'},"slow"); div.animate({fontSize:'3em'},"slow"); })

　　上面这行代码执行了2个动画

　　stop:中止动画

　　$("p").hide(1000,function(){ alert("The paragraph is now hidden"); });

　　在执行渐隐以后回调无名函数

　　$("#p1").css("color","red") .slideUp(2000) .slideDown(2000);

　　改变样式以后执行了两段函数

4.3 jquery和html

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值--主要是输入框标签的内容

里面的内容也能够设置:$("#p1").html("<p>"+我是一段文本+"</p>")

$("#test1").text(function(i,origText){
return "Old text: " + origText + " New text: Hello world! (index: " + i + ")";

拿到旧文本，在回调函数中显示

attr属性

$("button").click(function(){
  $("#w3s").attr("href", function(i,origValue){
    return origValue + "/jquery";
  });
})
改变连接的内容

4.4添加

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素以后插入内容
before() - 在被选元素以前插入内容

$("p").prepend("Some prepended text.");

4.5删除

remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素

$("p").remove(".italic");
上面的例子删除 class="italic" 的全部 <p> 元素：

4.6jquery和css
范例：

.important
{
font-weight:bold;
font-size:xx-large;
}

$("div").addClass("important");

addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操做
css() - 设置或返回样式属性

　　设置了p的新样式

$("p").css({"background-color":"yellow","font-size":"200%"});
　　尺寸

width()
height()

　　$("#div1").width()返回了画布的宽度

4.7jquery遍历

dom就像一个家族，经过血脉能够找到每一位成员

向上的 parent,parents,parentsUntil("mm")介于之间的元素

向下的 children,children("p.1")类为1的p元素，find("span")介于之间的

siblings()
next()
nextAll()
nextUntil()
prev()
prevAll()
prevUntil(）

全部同胞，下一个同胞，下一个全部同胞，到某一元素的全部同胞

first,last,eq,filter(".intro"),not五大过滤器，好像都是先选到元素再过滤的

 $("p").not(".intro");不是intro类的p元素

4.8 AJAX

$("button").click(function(){
  $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
    if(statusTxt=="success")
      alert("外部内容加载成功！");
    if(statusTxt=="error")
      alert("Error: "+xhr.status+": "+xhr.statusText);
  });
});
让div1载入了demo_test的内容，回调是一个格式，xhr封装了response的header,成功，返回200和success,statusTxt则是真正的返回值

$("button").click(function(){
  $.post("demo_test_post.asp",
  {
    name:"Donald Duck",
    city:"Duckburg"
  },
  function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});
关键点:url（像谁请求，去哪?）,data(数据，key-value形式的)，回馈(data,状态[成功？失败])

<%
dim fname,city
fname=Request.Form("name")
city=Request.Form("city")
Response.Write("Dear " & fname & ". ")
Response.Write("Hope you live well in " & city & ".")
%>
交互代码，拿东西，处理，返回

noconflic做为处理$表达式符号做为其余框架关键字时候的冲突，不多见，到用的时候再百度吧


5

最后头脑中遗留一个问题，js的弱类型实现依赖了什么机制？为何申请的var可以包容全部的类型？有大神能从原理方面或者是var的来历方面解读一下就太感谢啦！

您的点赞是对我前进道路上的鼓励，感谢阅读！若是转载，请注明出处，谢谢！