黑马javascript教科书黑马程序员javascript

转载

mob6454cc769a22 2024-01-10 12:47:31

文章标签 黑马javascript教科书 html 封装 HTML 文章分类 JavaScript 前端开发

JavaScript
  JavaScript代码和HTML的结合
   JS代码存放在标签对 <script></script>中。
   当有多个html页面使用到相同的JS脚本时，可以将js代码封装到一个文件中，
   只要在script标签的src属性,引入一个js文件。（方便后期维护，扩展）
   javascript和html的结合方式
     想要将其他代码融入到Html中，都是以标签的形式。
      当有多个html页面使用到相同的JS脚本时，可以将js代码封装到一个文件中，
     只要在script标签的src属性引入一个js文件。（方便后期维护，扩展）
     注意：如果在script标签中定义了src属性，那么标签中的内容不会被执行。
       例：<scriptsrc=”test.js” type=”text/javascript”></script>
   JS弹出框
       (1) 警告框用法：alert(...);
       (2) 确认框用法：confirm(...);
       (3) 提示框用法：prompt("","");  前者为提示信息，后者为默认值
JavaScript语法-变量
   JavaScript是一种弱类型语言。
   通过关键字var来定义变量

       注：JS中特殊的常量值：undefined，当变量没有初始化就被使用，
           该变量的值就是undefined（未定义）。
       注意：Javascript的语句在结尾处是可以不用分号结束的，非严谨语言的特点。
       而且有些情况是必须写分号的，如：var x =3 ; var y =5
       如果两条语句写在同一行，就需要分号隔开。
JavaScript语法-运算符
   Javascript中的运算符和Java大致相同。只是运算过程中需要注意几点：
   var x = 3120/1000; x = 3
   var x = 2.4+3.6 ; x=6
   var x = “12” + 1; x=13

特殊运算符 typeof : 返回一个操作表达式的数据类型的字符串。
JavaScript语法-语句
   判断结构(if语句) 注：var x = 3;
      if(x==4)//可以进行比较运算。
      if(x=4)//可以进行赋值运算，而且可以同样进行判断。不报错。
      因为在Js中0或者null就是false，
      非0或者非null就是true（通常用1表示）。
      所以if(x=4)结果是true；
      可以通过if(4==y)来解决该问题。因为4=y不会进行判断，而是会报错。
   选择结构(switch语句)
      与java不同的是：因为弱类型，也可以对字符串进行选择。
   循环结构(while语句，do…while语句，for语句)。
      注：不同的是，没有了具体数据类型的限制，使用时要注意。
   document的write方法。可以写字符串，也可以写出html标签。

JavaScript语法-函数
   A 一般函数
   格式：function 函数名(形式参数...) {
       执行语句；
       return 返回值；  }
   函数是多条执行语句的封装体，只有被调用才会被运行。
   注意：调用有参数的函数，但没有给其传值，函数一样可以运行，
   或者调用没有参数的函数，给其传值，该函数也一样运行。
     函数在调用时的其他写法：
   var show = demo();//show变量接收demo函数的返回值。
   var show = demo;//这种写法是可以的，意为show和demo代表同一个函数。
   //那么该函数也可以通过show()的方式运行。
   动态函数通过Js的内置对象Function实现。
   例：var demo = newFunction(“x,y”;”alert(x+y);”);
   不同的是，动态函数，参数以及函数体都可以通过参数进行传递，可以动态指定。
   匿名函数
   格式：function(){...}
   例：var demo = function(){...} demo();
   通常在定义事件属性的行为时较为常用。
   例： function test() {
       alert(“load ok”);
   }
   window.onload = test;
   可以写成匿名函数的形式：
   window.onload = function()
   {
       alert(“load ok”);
   }
   匿名函数就是一种简写格式
JavaScript语法-数组
     格式：vararr = [元素1，元素2，元素3...];
   注意：其中的元素可以使任意类型，但是，推荐使用同一种类型。
       vararr = new Array();
       vararr = new Array(3);
JavaScript自定义对象
   Js是基于对象的，不是面向对象的。但是我们可以通过函数来模拟对象的使用。
   用js的函数模拟对象并使用, 用js的函数模拟对象的成员变量及方法
JavaScript用于操作对象的语句
   with语句。格式：with(对象){ }
   当调用一个对象中多个成员时,为了简化调用,避免"对象."这种格式的重复书写。
       var p = new Person(“zhangsan”,20);
       alert(p.name+”,”+p.age);
       可以写成：var p = newPerson(“zhangsan”,20);
       with(p) { alert(name+”,”+age);   }
       with语句定义了某个对象的作用域，在该域中可以直接调用该对象的成员。
   for...in语句用于遍历对象属性。
       例：var p = newPerson(“zhangsan”,20);
       for(x in p) {
       alert(x);//结果是两个对话框，一个是name，一个是age。
       alert(x+”:”+p[x]);
       //可以得到属性与属性的值。p[x]:p对象就是个数组，要通
             过指定的元素名获取元素的值。
       }
JavaScript对象的高级特性
   prototype属性
       js给已有对象提供了一个特殊的属性,prototype属性.原型属性.
       它的作用:获取该对象的原型引用. 这里可以理解为一个父类.
       原型的出现,可以获取到该对象的父类的引用.
       当给带对象的父类添加新属性和行为时,该对象也会具备这些属性和行为.
       所以,原型的出现,可以给已有的对象进行新功能的扩展.
       为了方便理解:照猫画虎.
           照猫画虎. 虎怎么来的,我是照着猫画来的,这个时候,我们就可以说虎的原型是猫.
       也就是说: 虎.prototype = 猫.
       如果,我们在猫上加了一个方法猫.play = function(){alert("play run")}
       这个时候,虎具备play这个方法了吗,具备了吗.
       虎的原型是猫吗.可以看出猫是虎的父类吗.

BOM概述
   BOM:Browser Object Model 浏览器对象模型
   浏览器本身是一个窗体,所以它有一个windows对象.windows包含如下对象
   navigator ：包含关于 Web 浏览器的信息。
   history：包含了用户已浏览的 URL 的信息。
   location：包含关于当前 URL 的信息。
   document:代表给定浏览器窗口中的 HTML 文档。也就是我们的DOM对象。

   DOM: Document Object Model 文档对象模型.
   该技术的出现,将标记型文档封装成了对象.
   并将该标记型文档中的所有内容(标签,属性,文本)都封装成了对象.
DOM解析.
   当标记型文档被DOM解析器解析后，会按照标签的层次关系，产生一颗dom树结构。
   这个树的每个分支被称为一个节点。

DHTML概述
   它不是一个语言,它是多个技术的综合体简称. 这里包含的技术有html,css,dom,javascript
   这四种技术在DHTML编程中所处的角色呢:
   html: 提供了标签用于封装数据.它是基础.没标签,什么都做不了.
   css: 提供了样式,可以对标签封装的内容进行样式的操作.
   dom: 将html文档封装成了对象.并将文档中的内容都封装成了对象.
         对象中都定义了更多的属性和行为.方便于对象的操作.
   javascript: 提供了逻辑性很强的程序设计语言来负责页面的行为.

DOM获取节点的方式
   getElementById：通过该标签的id属性值来获取该标签节点对象.
   getElementsByName：通过标签的name属性值来获取对象.
   而且返回的不是一个节点对象.而是多个节点对象,用数组表示的.
   getElementsByName：通过标签名称获取节点对象.
   但是标签很容易重复.所以返回的是一个节点数组.
   document对象作为html文档的对象,可以获取页面中任意一个节点.
   节点本身是个对象,它具备三个属性:
       1:nodeName 节点名称
       2:nodeType 节点类型
       3:nodeValue 节点值
   设置获取节点的值
       1：value
       2：innerHTML,innerText
   节点间的层级关系
       1:parentNode:父节点是唯一的
       2:childNodes:子节点可以有多个
       3:兄弟节点
           上一个兄弟节点 previousSibling
           下一个兄弟节点 nextSibling
取消超链接的默认点击效果.
   方式1:通过给href属性的值定义一个'#'.
   这是借用了定位标记的原理.不指定具体的位置.
        这样就取消了超链接的效果.但是会启动file引擎,不够专业.
   方式2:可以定义:javascript:void(0);启动js引擎,运行一个函数.
   void(0) 这个函数什么都不做.
   超链接的默认事件被取消了.需哟自定义事件完成超链接的点击效果

下面例子是一个改变字体大小和颜色的例子：

代码如下：

<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>无标题文档</title>
<styletype="text/css">
a:link,a:visited{
color:#0099CC;
text-decoration:none;
font-size:14px;
 }
a:hover{
color:#0033FF;
 }
 .newStyle{
border:#9900CC1px solid;
font-size:16px;
width:350px;
color:#0033FF
 }
 .max{
color:#6633FF;
background-color:#99FF66
width:350px;
 }
 .min{
color:#FFFF66;
background-color:#9900CC;
width:350px;
 }
</style>
<scripttype="text/javascript">
functionchangFont(size,newStyle)
{
vardivNode=document.getElementById("newstext");
divNode.style.fontSize=size
    divNode.className=newsstext
 
}
functionchangFont_1(styleName)
{
vardivNode=document.getElementById("newstext");
    divNode.className=styleName;
}
</script>
</head>
<body>
<h2>这是一个大新闻</h2>
<ahref="javascript:void(0)" οnclick="changFont_1('max')" >大字体</a>
<ahref="javascript:void(0)" οnclick="changFont_1('newStyle')">中字体</a>
<ahref="javascript:void(0)" οnclick="changFont_1('min')">小字体</a>
<divid="newstext" class="newStyle">
付款就爱上看见俺看上哪款<br/>
   空间非常卡就是卡车<br/>
南昌付款就散开处罚结束<br/>
   里充满了卡是卡从哪里<br/>
</div>
</body>
</html>
总结：改变字体大小，定义一个函数通过Id来获取这个节点，在定义函数时设置一个参数，为了不让用户自己瞎改变大小，可以在传入字体的大小值改变字体颜色时，要先预先定义好几个样式，然后通过传参数的方式传进来。这样写代码有利于修改，并提高了复用性
下面例子是用于演示开关的
代码如下：
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>无标题文档</title>
<!--
演示展开闭合效果
布局属性overflow
-->
<styletype="text/css">
div{
overflow:hidden;
color:#FF0066;}
</style>
<scripttype="text/javascript">
functionlist()
{
vardivNode=document.getElementsByTagName("div")[0];
with(divNode.style)
 {
        //alert(overflow=="visible");
overflow=(overflow=="visible")?"hidden":"visible";
 }
}
</script>
</head>
<body>
<divοnclick="list()" style="height:10px">
gfjeroafmkjo<br/>
fjneawaevevg<br/>
fcdewmvfireohjtoier<br/>
fh3ewoiafmn3jfg<br/>
</div>
</body>
</html>

总结：JavaScript和CSS都是为了简化HTML、赋予HTML色彩，JavaScript是添加HTML的动态效果，CSS是添加HTML的静态效果。

实际上在html中的每个标签都封装成的对象，并且存在于一个dom树中，只要我们找到这个节点对象对其操作即可。主要的问题是找到节点对象。

------

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。