自学_JAVASCRIPT

其他 2019-03-16 10:31:26 阅读次数: 0

自学_JAVASCRIPT

什么是JAVASCRIPT

  • HTML只是描述网页长相的标记语言，没有计算、判断能力，如果所有计算、判断（比如判断文本框是否为空、判断两次密码是否输入一致）都放到服务器端执行的话网页的话页面会非常慢、用起来也很难用，对服务器的压力也很大，因此要求能在浏览器中执行一些简单的运算、判断。JavaScript就是一种在浏览器端执行的语言。HTML内容，css衣服，修饰，js控制
  • JavaScript的Java没直接的关系，唯一的关系就是JavaScript原名LiveScript，后来吸收了Java的一些特性，升级为JavaScript。JavaScript有时被简称为JS。
  • JavaScript是解释型语言，无需编译就可以随时运行，这样哪怕语法有错误，没有语法错误的部分还是能正确运行。

JAVASCRIPT开发环境

入门

<script type="text/javascript">
alert(new Date().toLocaleDateString());
</script>

<script language="....>已经不推荐使用。

  • JavaScript代码放到<script>标签中，script可以放到<head>、<body>等任意位置，而且可以有不止一个<script>标签。alert函数是弹出消息窗口，new Date()是创建一个Date类的对象，默认值就是当前时间。 JS是大小写敏感的。

  • 放到<head>中的<script>在body加载之前就已经运行了。写在body中的<script>是随着页面的加载而一个个执行的。

  • 除了可以在页面中声明JavaScript以外，还可以将JavaScript写到单独的js文件中，然后在页面中引入：<script src="test.js" type="text/javascript"></script>。声明到单独的js文件的好处是多页面也可以共享、减小网络流量。js文件的CDN(*)内容分发布网络(CDN),将别的服务器上的库

  • 注意：不要写成<script src="test.js" type="text/javascript"/>否则会有问题，这是一个比较特殊的地方。

事件

  • 在超链接的点击里执行JavaScript：<a href="javascript:alert(88)">发发</a>
  • JavaScript中也有事件的概念，当按钮被点击的时候也可以执行JavaScript：
    • <input type="button" onclick="alert(99)" value="久久"/>
    • 只有超链接的href中的JavaScript中才需要加“"javascript:”，因为它不是事件，而是把“"javascript:”看成像“http:”、“ftp:”、“thunder://”、“ed2k://”、"mailto:"一样的网络协议，交由js解析引擎处理。只有href中这是这是一个特例。
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
    <script type="text/javascript">
            var sum = 0;
            for(int i = 0;i<=100;i++){
                sum += i;
            }
            alert(sum);
        function test() {
            var sum = 0;
            for(int i = 0;i<=100;i++){
                sum += i;
            }
            alert(sum);
        }
    </script>
</head>
<body>
    <a href="javascript:test()">Click me</a>
    <a href="win.htm" onclick="alert('123')">Click me</a>
    <input type="button" value="按钮" ondblclick="test()" />
</body>
</html>

变量

  • JavaScript中即可以使用双引号声明字符串，也可以使用单引号声明字符串。主要是为了方便和html集成，避免转义符的麻烦。只有一种类型var
  • JavaScript中有null、undefined两种，null表示变量的值为空，undefined则表示变量还没有指向任何的对象，未初始化。两者的区别参考资料。
  • JavaScript是弱类型，声明变量的时候无法：int i=0；只能通过var i=0;声明变量，和C#中的var不一样，不是C#中那样的类型推断。
  • JavaScript中也可以不用var声明变量，直接用，这样的变量是“全局变量”，因此除非确实想用全局变量，否则使用的时候最好加上var。
  • JS是动态类型的，因此var i=0;i="abc";是合法的。并且可以把方法放到var中，
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
    <script type="text/javascript">
        var x = "abc";
        if (!null) {
            alert("null");
        }
        if (!undefined) {
            alert("undefined");
        }
        if (x == null) {
            alert("null");
        }
        if (typeof(x) == "undefined") {
            alert("undefined");
        }
        if (!x) {
            alert("未初始化   0");
        }
        if (x) {
            alert(x);
        } 
    </script>
</head>
<body>
</body>
</html>

除错和调试

  • 如果JavaScript中的代码有语法错误，浏览器会弹出报错信息，查看报错信息就能帮助排查错误。
  • JavaScript的调试，使用VS可以很方便的进行JavaScript的调试，调试时需要注意几点：
  • IE6的调试选项要打开，Internet选项→高级，去掉“禁用脚本调试”前的勾选。
  • 以调试方式运行网页。
  • 设置断点、监视变量等操作和C#一样。
    案例：用循环语句的方法计算1到100之间整数的和

判断变量初始化

JavaScript中判断变量、参数是否初始化 的三种方法：

var x;
if (x == null) {
alert("null");
}
if (typeof (x) == "undefined") {
alert('undefined');
}
if (!x) {alert('不x');}
if(x){}//变量被初始化了或者变量不为空或者变量不为0.

推荐用最后一种方法。

函数声明

  • JavaScript中声明函数的方式：
function add(i1, i2) {
return i1 + i2;
}

int add(int i1,int i2)//C#写法

  • 不需要声明返回值类型、参数类型。函数定义以function开头。
var r = add(1, 2);
alert(r);
r = add("你好", "tom");
alert(r);
  • JavaScript中不像C#中那样要求所有路径都有返回值，没有返回值就是undefined。
  • 易错：自定义函数名不要和js内置、dom内置方法重名，比如selectall、focus等函数名不要用。

匿名函数

var f1 = function(i1, i2) {
return i1 + i2;
}
alert(f1(1,2));
  • 类似于C#中的匿名函数。
  • 这种匿名函数的用法在JQuery中的非常多
  • alert(function(i1, i2) { return i1 + i2; }(10,10));//直接声明一个匿名函数，立即使用。用匿名函数省得定义一个用一次就不用的函数，而且免了命名冲突的问题，js中没有命名空间的概念，因此很容易函数名字冲突。通过例子发现一旦命名冲突以最后声明的为准
  • 必须<script src="my1.js" type="text/javascript"></script>不能：<script src="my1.js" type="text/javascript"/>

面向对象基础

JavaScript中没有类的语法，是用函数闭包（closure）模拟出来的，下面讲解的时候还是用C#中的类、构造函数的概念，JavaScript中String、Date等“类”都被叫做“对象”，挺怪，方便初学者理解，不严谨。JavaScript中声明类（类不是类，是对象）：

function Person(name,age) {
this.name = name;
this.age =age;
this.sayHello=function(){
  alert("你好，我是"+this.name+"，我"+this.age+"岁了");
}
} 
var p1 = new Person("tom",20);
p1.sayHello();
  • 必须要声明类名，function Person(name,age)可以看做是声明构造函数，Name、Age这些属性也是使用者动态添加了。var p1 = new Person("tom", 30);//不要丢了new，否则就变成调用函数了，p1为undefined。new 相当于创建了函数的一个实例

string 对象

  • length属性；
  • charAt方法；取第几个字符
  • indexOf lastIndexOf
  • Substr(start,length)、substring(start,end)
  • split
  • match、replace(只会替换一个，替换多个要用正则表达式)、search方法，正则表达式相关
var str = "我爱北京天安门,北京天安门爱我";
var reg = /我/g;
alert(str.replace("我", "你")); //replace()当第一个参数是字符串，只替换源字符串中的第一个匹配到的字符

如果是reg，就可以全部替换成功alert(str.replace(reg, "你"));是正则表达式，是一个object

ARRAY对象

JavaScript中的Array对象就是数组，首先是一个动态数组，而且是一个像C#中数组、ArrayList、Hashtable等的超强综合体。

var names = new Array();
names[0] = "tom";
names[1] = "jerry";
names[2] = "lily";
for (var i = 0; i < names.length; i++) {
alert(names[i]);
}

无需预先制定大小，动态。

dictionary

JS中的Array是一个宝贝，不仅是一个数组，还是一个Dictionary，还是一个Stack。

 var pinyins = new Array();
pinyins["人"] = "ren";
pinyins["口"] = "kou";
pinyins["手"] = "shou";
alert(pinyins["人"]);
alert(pinyins.人);

像Hashtable、Dictionary那样用，而且像它们一样效率高。

array简化

Array还可以有简化的创建方式
var arr = [3, 5, 6, 8, 9]; 普通数组初始化
这种数组可以看做是pinyins["人"] = "ren";的特例，也就是key为0、1、2……
字典风格的简化创建方式：
var arr = {"tom":30,"jim":20};

数组，for其他

  • 对于数组风格的Array来说，可以使用join方法拼接为字符串
    var arr = ["tom","jim","lily"]; alert(arr.join(","));//JS中join是array的方法，不像.Net中是string的方法
  • for循环可以像C#中的foreach一样用
  • for循环还可以获得一个对象所有的成员，类似于.Net中的反射
for (var e in document) {
alert(e);
}

有了它没有文档也可以进行开发。

var p1 = new Object();//创建一个Object对象，动态增加属性、方法s
p1.Name = "tom";
p1.Age = 30;
p1.SayHello = function() { alert("hello"); };
p1.SayHello();
for(var e in p1) {//对象的成员都是对象的key
alert(e);
}

扩展方法

通过类对象的prototype设置扩展方法，下面为String对象增加quote（两边加字符）方法

String.prototype.quote = function(quotestr) {
if (!quotestr) {
quotestr = "\"";
}
return quotestr + this + quotestr;
};
alert("abc".quote());alert("abc".quote("|"));

扩展方法的声明要在使用扩展方法之前执行。JS的函数没有专门的函数默认值的语法，但是可以不给参数传值，不传值的参数值就是undefined，自己做判断来给默认值。

  • 一门新的语言学：数据类型，程序接口，类库

类库DOM

DOM(document object medol)文档对象模型。

  • DOM就是HTML页面的模型，将每个标签都做为一个对象，JavaScript通过调用DOM中的属性、方法就可以对网页中的文本框、层等元素进行编程控制。比如通过操作文本框的DOM对象，就可以读取文本框中的值、设置文本框中的值。
  • JavaScript→Dom就是C#→.Net Framwork。没有.net，C#只能for、while，连WriteLine、MessageBox都不行。Dom就是一些让JavaScript能操作HTML页面控件的类、函数。
    DOM也像WinForm一样，通过事件、属性、方法进行编程。
    CSS+JavaScript+DOM=DHTML
  • 学习阶段只考虑IE。用IE Collection安装IE所有版本，学习使用IE6（要调试必须使用本机安装的版本）。

事件

  • 事件：<body onmousedown="alert('哈哈')">当点击鼠标的时候执行onmousedown中的代码。有时间事件响应的代码太多，就放到单独的函数中：
<script type="text/javascript">
function bodymousedown() {
alert("网页被点坏了，赔吧！");
alert("逗你玩的！");
}
</script>
<body onmousedown="bodymousedown()">

bodymousedown后的括号不能丢（ onmousedown="bodymousedown" ），因为表示onmousedown事件发生时调用bodymousedown函数，而不是onmousedown事件的响应函数是bodymousedown。

动态设置事件

可以在代码中动态设置事件响应函数，就像.Net中btn.Click+=一样

function f1() {
alert("1");
}
function f2(){
alert("2");
}

<input type="button" onclick="document.ondblclick=f1" value="关联事件1" />//注意f1不要加括号。如果加上括号就变成了执行f1函数，并且将函数的返回值复制给document.ondblclick
<input type="button" onclick="document.ondblclick=f2" value="关联事件2" />

  • window对象代表当前浏览器窗口，使用window对象的属性、方法的时候可以省略window，比如window.alert('a')可以省略成alert('aa')。
    • alert方法，弹出消息对话框
    • confirm方法，显示“确定”、“取消”对话框，如果按了【确定】按钮，就返回true，否则就false
    if (confirm("是否继续？")) {
alert("确定");
}
else {
alert("取消");
}
    • 重新导航到指定的地址：navigate("http://www.rupeng.com");
    • setInterval每隔一段时间执行指定的代码，第一个参数为代码的字符串，第二个参数为间隔时间（单位毫秒），返回值为定时器的标识
      setInterval("alert('hello')", 5000);
    • clearInterval取消setInterval的定时执行，相当于Timer中的Enabled=False。因为setInterval可以设定多个定时，所以clearInterval要指定清除那个定时器的标识，即setInterval的返回值。
      var intervalId = setInterval("alert('hello')", 5000); clearInterval(intervalId);

    • setTimeout也是定时执行，但是不像setInterval那样是重复的定时执行，只执行一次，clearTimeout也是清除定时。很好区分：Interval：间隔；timeout：超时。
      var timeoutId = setTimeout("alert('hello')", 2000);

    • showModalDialog弹出模态对话框，注意showModalDialog必须在onClick等用户手动触发的事件中才会执行，否则可能会被最新版本的浏览器当成广告弹窗而拦截。
      • 第一个参数为弹出模态窗口的页面地址。
      • 在弹出的页面中调用window.close()（不能省略window.close()中的window.）关闭窗口，只有在对话框中调用window.close()才会自动关闭窗口，否则浏览器会提示用户进行确认。

    • 除了有特有的属性之外，当然还有通用的HTML元素的事件：onclick（单击）、ondblclick（双击）、onkeydown（按键按下）、onkeypress（点击按键）、onkeyup（按键释放）、onmousedown（鼠标按下）、onmousemove（鼠标移动）、onmouseout（鼠标离开元素范围）、onmouseover（鼠标移动到元素范围）、onmouseup（鼠标按键释放）等。

window对象属性

  • window.location.href='http://www.itcast.cn'，重新导向新的地址，和navigate方法效果一样。window.location.reload() 刷新页面
  • window.event是非常重要的属性，用来获得发生事件时的信息，事件不局限于window对象的事件，所有元素的事件都可以通过event属性取到相关信息。类似于winForm中的e(EventArg).
    • altKey属性，bool类型，表示发生事件时alt键是否被按下，类似的还有ctrlKey、shiftKey属性，例子 <input type="button" value="点击" onclick="if(event.altKey){alert('Alt点击')}else{alert('普通点击')}" /> ；
    • clientX、clientY 发生事件时鼠标在客户区的坐标；screenX、screenY 发生事件时鼠标在屏幕上的坐标；offsetX、offsetY 发生事件时鼠标相对于事件源（比如点击按钮时触发onclick）的坐标。
    • returnValue属性，如果将returnValue设置为false，就会取消默认事件的处理。在超链接的onclick里面禁止访问href的页面。在表单校验的时候禁止提交表单到服务器，防止错误数据提交给服务器、防止页面刷新。
    • srcElement，获得事件源对象。几个事件共享一个事件响应函数用。
    • keyCode，发生事件时的按键值。
    • button，发生事件时鼠标按键，1为左键，2为右键，3为左右键同时按。<body onmousedown="if(event.button==2){alert('禁止复制');}">
  • （*）screen对象，屏幕的信息
    alert("分辨率：" + screen.width + "*" + screen.height);
if (screen.width < 1024 || screen.height < 768){
alert("分辨率太低！");
}
  • clipboardData对象，对粘贴板的操作。clearData("Text")清空粘贴板；getData("Text")读取粘贴板的值，返回值为粘贴板中的内容；setData("Text",val)，设置粘贴板中的值。
    • 案例：复制地址给友好。见备注。
    • 当复制的时候body的oncopy方法被触发，直接return false就是禁止复制。<body oncopy="alert('禁止复制！');return false;"
    • 很多元素也有oncopy、onpaste事件：
    • 案例：禁止粘贴帐号。见备注。
  • 在网站中复制文章的时候，为了防止那些拷贝党不添加文章来源，自动在复制的内容后添加版权声明。
function modifyClipboard() {
clipboardData.setData('Text', clipboardData.getData('Text') + '本文来自传智播客技术专区，转载请注明来源。' + location.href);
}
+ `oncopy="setTimeout('modifyClipboard()',100)"`。用户复制动作发生0.1秒以后再去改粘贴板中的内容。100ms只是一个经常取值，写1000、10、50、200……都行。不能直接在oncopy里修改粘贴板。
+ 不能直接在oncopy中执行对粘贴板的操作，因此设定定时器，0.1秒以后执行，这样就不再oncopy的执行调用栈上了。
  • history操作历史记录
    • window.history.back()后退；window.history.forward()前进。也可以用window.history.go(-1)、window.history.go(1)前进
document属性。

是最复杂的属性之一。后面讲解详细使用。

  • document是window对象的一个属性，因为使用window对象成员的时候可以省略window.，所以一般直接写document

  • document的方法：
    • write：向文档中写入内容。writeln，和write差不多，只不过最后添加一个回车
    <input type="button" value="点击" onclick="document.write('<font color=red>你好</font>')" />
    • 在onclick等事件中写的代码会冲掉页面中的内容，只有在页面加载过程中write才会与原有内容融合在一起
    <script type="text/javascript">
document.write('<font color=red>你好</font>');
</script>
    • write经常在广告代码、整合资源代码中被使用。见备注
      内容联盟、广告代码、cnzz，不需要被主页面的站长去维护内容，只要被嵌入的js内容提供商修改内容，显示的内容就变了。
  • getElementById方法（非常常用），根据元素的Id获得对象，网页中id不能重复。也可以直接通过元素的id来引用元素，但是有有效范围、form1.textbox1之类的问题，因此不建议直接通过id操作元素，而是通过getElementById
  • （*）getElementsByName，根据元素的name获得对象，由于页面中元素的name可以重复，比如多个RadioButton的name一样，因此getElementsByName返回值是对象数组。
  • （*）getElementsByTagName，获得指定标签名称的元素数组，比如getElementsByTagName("p")可以获得所有的

    标签。

    • 案例：实现checkbox的全选，反选
    • 案例：点击一个按钮，被点击的按钮显示“呜呜”，其他按钮显示“哈哈”。
    • 案例：十秒钟后协议文本框下的注册按钮才能点击，时钟倒数。(btn.disabled = true )

dom动态创建

document.write只能在页面加载过程中才能动态创建。
可以调用document的createElement方法来创建具有指定标签的DOM对象，然后通过调用某个元素的appendChild方法将新创建元素添加到相应的元素下

function showit() {
var divMain = document.getElementById("divMain");
var btn = document.createElement("input");
btn.type = "button";
btn.value = "我是动态的！";
divMain.appendChild(btn);
}
<div id="divMain"></div>
<input type="button" value="ok" onclick="showit()" />
  • Value 获取表单元素
  • 几乎所有DOM元素都有innerText、innerHTML属性（注意大小写），分别是元素标签内内容的文本表示形式和HTML源代码，这两个属性是可读可写的。
<a href="http://www.itcast.cn" id="link1">传<font color="Red">智</font>播客</a>
<input type="button" value="inner*" onclick="alert(document.getElementById('link1').innerText);alert(document.getElementById('link1').innerHTML);" />
  • 用innerHTML也可以替代createElement，属于简单、粗放型、后果自负的创建
function createlink() {
var divMain = document.getElementById("divMain");
divMain.innerHTML = "<a href='http://www.rupeng.com'>如鹏网</a>";
}

浏览器兼容性的例子

ie6，ie7对table.appendChild("tr")的支持和IE8不一样，用insertRow、insertCell来代替或者为表格添加tbody，然后向tbody中添加tr。FF不支持InnerText。

所以动态加载网站列表的程序修改为：

var tr = tableLinks.insertRow(-1);//FF必须加-1这个参数
var td1 = tr.insertCell(-1);
td1.innerText = key;
var td2 = tr.insertCell(-1);
td2.innerHTML = "<a href='" + value + "'>" + value + "</a>";

或者：

<table id="tableLinks">
<tbody></tbody>
</table>，然后tableLinks. tBodies[0].appendChild(tr);
事件冒泡

事件冒泡：如果元素A嵌套在元素B中，那么A被点击不仅A的onclick事件会被触发，B的onclick也会被触发。触发的顺序是“由内而外” 。验证：在页面上添加一个table、table里有tr、tr里有td，td里放一个p，在p、td、tr、table中添加onclick事件响应，见备注。

<table onclick="alert('table onclick');">
<tr onclick="alert('tr onclick');">
<td onclick="alert('td onclick');"><p onclick="alert('p onclick');">aaaa</p></td>
<td>bbb</td>
</tr>
</table>

事件中的this。

除了可以使用event.srcElement在事件响应函数中

this表示发生事件的控件。

只有在事件响应函数才能使用this获得发生事件的控件，在事件响应函数调用的函数中不能使用，如果要使用则要将this传递给函数或者使用event.srcElement。

(*)this和event.srcElement的语义是不一样的，this就是表示当前监听事件的这个对象，event.srcElement是引发事件的对象：事件冒泡。

易错：修改元素的样式不是设置class属性，而是className属性。案例：网页开关灯的效果。
修改元素的样式不能this.style="background-color:Red"。
易错：单独修改样式的属性使用“style.属性名”。注意在css中属性名在JavaScript中操作的时候属性名可能不一样，主要集中在那些属性名中含有-的属性，因为JavaScript中-是不能做属性、类名的。所以CSS中背景颜色是background-color，而JavaScript则是style.backgroundColor；元素样式名是class，在JavaScript中是className属性；font-size→style.fontSize；margin-top→style.marginTop
单独修改控件的样式<input type="button" value="AAA" onclick="this.style.color='red'" />。技巧，没有文档的情况下的值属性名，随便给一个元素设定id，然后在js中就能id.style.出来能用的属性。

猜你喜欢

转载自www.cnblogs.com/lovexinyi/p/10540851.html
今日推荐
NetBSD 禁止提交由 AI 生成的代码
Apache Doris 2.0.10 版本正式发布！
开源日报 | 大模型开战；大模型独角兽被曝卖身；周鸿祎建议谷歌开源所有产品；最大开源AI社区提供1000万美元共享GPU
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
周排行
static方法和非static方法的区别（java）
如何查找计算机专业paper
java.lang.ClassFormatError: Incompatible magic value 0 in class file com/sitecha
跳跃游戏II
stm32_之【建立工程】
TeaWeb v0.0.9 发布，统计底层优化、主机监控功能改进
事件分发 -----控制字体大小
JavaScript DOM练习（动态表格添加） December 25，2019
JSF Scope & CDI
实现从零搭建一个登录注册页面（附源代码）
每日归档
更多
2024-05-19(0)
2024-05-18(4)
2024-05-17(34)
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022