WEB前端--JavaScript

时间：2023-03-08 23:41:25
WEB前端--JavaScript

JavaScript

JavaScript基础

一、JavaScript简介

JavaScript是一种嵌入到HTML文件中的描述性语言，由浏览器的解释器将其动态地处理成可执行的代码，能独立地完成与客户端动态交互的网页设计语言。

JavaScript特点：

  • 脚本语言，开发过程简单；

  • 基于对象，能运用已经创建的对象；

  • 简单，基于java基本语句和控制流，变量类型为弱类型；

  • 动态，直接对用户的输入做出响应；

  • 安全，不访问本地硬盘；

  • 跨平台性，依赖于浏览器本身，与操作系统无关。

1
2
3
4
5
6
7
8
<body>
……
<script type="text/javascript" src="j1.js" ></script>
<script type="text/javascript">
    f1()
    alert("func");
</script>
</body>

位置：紧贴body底部，加载慢，不影响其他东西显示。

单行注释：//

多行注释：/*   ……    */

二、JavaScript基本语法

1、常量和变量

常量的值不能改变，变量的值是可以改变的。

1.1、常量

整形常量（进制数）、实型常量（小数）、布尔值、空值（null）、特殊字符（/开头不可显示的特殊字符）。

1.2、变量

主要作为数据的存取容器

  • 局部变量声明：var name='jack'

  • 全局变量声明：name='jack'

一般不要写全局变量，都要var声明，否则会造成混乱，什么地方都能改，出错不好排查。

2、表达式和运算符

算术运算符：+、-、*、/、%、++、--

逻辑运算符：&&、||、！

比较运算符：<、>、<=、>=、=、!=

3、基本语句

3.1、if...else语句
1
2
3
4
5
if(条件)
{执行语句1}
else
{执行语句2}
//没有大括号也行，但这是一种习惯。
3.2、for语句
1
2
3
4
5
for(初始化；条件；增量)
{
语句集；
……
}
3.3、switch语句

多分支选择语句，相当于shell的case语句。

1
2
3
4
5
6
7
8
9
10
switch()
{
case 条件1：
语句块1
case 条件2：
语句块2
……
default
语句块N
}
3.4、while语句
1
2
3
4
while(条件){
语句集；
……
}

break跳出所有循环；continue结束本次循环，跳到下次循环。

4、函数

4.1、普通函数
1
2
3
function 函数名称（参数）{
函数执行部分
}
4.2、自执行函数

自己定义自己，并执行了自己这个函数。用处：jQuery本身功能满足不了需求，自己（用自执行函数）定义许多扩展功能，下面就能直接用了。

1
2
3
4
5
<script type="text/javascript">
    (function(arg){
        alert(arg)
    })('参数');
</script>

5、字符串常用方法和属性

obj.trim() 去除字符串两边的空格 a.trim()
obj.charAt(index) 根据索引获取字符串里的字符 a.charAt(0)
obj.substring(start,end) 获取字符串的子序列（类似切片） a.substring(0,2)
obj.indexOf(char) 获取字符的索引值 a.indexOf('a')
obj.length    -->字符串属性（property，不带括号） 计算字符串的长度 a.length

ps：可借用浏览器的console调试

6、数组

6.1、声明数组
1
2
3
var a= [1,2,3]
或
var a=Array()
6.2、添加
obj.push(ele) 追加元素 a.push(5)
obj.unshift(ele) 最前面插入元素 a.unshift(0)
obj.splice(index,0,ele) 指定索引处插入元素 a.splice(2,0,'ele')
6.3、移除
obj.pop() 尾部移除 a.pop
obj.shift() 头部移除 a.shift
obj.splice(index,count) 数组指定位置后count个字符 a.splice(2,1)
6.4、切片
obj.slice(start,end) 按索引切片 a.slice(0,3)
6.5、合并
新数组 = obj1.concat(obj2)

把obj2合并到obj1里

 a.concat(b)
6.6、翻转
obj.reverse() 元素都掉个顺序 a.reverse()
6.7、字符串化
obj.join('连接符') 合并成字符串,和python用法位置相反 a.join('_')
6.8、长度
obj.length 计算数组元素个数 a.length

7、字典

字典是数组的一种特殊形式，键值不必是字符串。可以通过键取值，也可循环。

1
2
3
4
5
6
7
>> a={k1:123,k2:456}
<< Object { k1: 123, k2: 456 }
>> a['k1']
<< 123
>> for (var item in a){console.log(item);}
<< k1
   k2

8、异常处理

1
2
3
4
5
6
7
try{
    var m=n;
}catch(e) {
    console.log(e);
}finally{
    console.log('finally');
}

WEB前端--JavaScript

三、JavaScript的事件

鼠标或键盘引发的一连串程序的动作，称为事件驱动。而对事件进行处理的程序或函数，则称为事件处理程序。

1、onClick事件（鼠标单击）

1
2
3
4
5
6
7
8
9
<body>
<div align="center">
    <img src="91@QLVP$85JJ5DD@T1V%7B%604K.png">
</div>
<div align="center">
    <input type="button" value="全屏" onclick="window.open(document.location,'big','fullscreen=yes')">
    <input type="button" value="还原" onclick="window.close()">
</div>
</body>

2、onchange事件（表格变化）

在文本区域外部点击会弹出警告提示对话框

1
2
3
<form>
<textarea cols='50' rows='5' onchange=alert("输入留言内容")></textarea>
</form>

3、onSelect事件

文本框中的内容被选定所触发的事件

1
<input name=stra id=stra tabIndex=1 value="选择输入的名称" size=16 onSelect=alert("选择输入的名称")>

在文本框中选中文字后，会弹出选择文字的提示对话框。

4、onFocus事件

当单击表单对象时，即将光标放在文本框或选择框上时。

1
2
3
4
<label>
<input type='radio' value='game' onfocus=alert('选择了游戏！')>
游戏
</label>

5、onLoad事件（页面加载时）

加载网页文档时触发，作用是在首次载入一个页面文件时检测cookie值，并用一个变量为其赋值，使其可以被源代码使用。

1
2
3
4
5
6
<script type="text/javascript">
function mm(msg){
    alert(msg);
}
</script>
<body onload="mm('欢迎光临')"></body>
1
2
3
4
5
6
7
8
//window方法
<body>
    <script type="text/javascript">
        window.onload=function(){
            alert("欢迎光临");
    }
    </script>
</body>

上面是整个页面加载完成，一般情况都是当框架加载完成就触发：

1
2
3
4
5
6
7
<body>
    <script type="text/javascript">
        document.ready=function(){
            alert("欢迎光临");
    }
    </script>
</body>

6、onUnload事件（退出网页时）

并可更新cookie的状态

1
2
3
4
5
6
<script type="text/javascript">
function mm(msg){
    alert(msg);
}
</script>
<body onunload="mm('再见！')"></body>

7、onBlur事件

与onFocus相对，文本框（text\textarea\select）不在拥有焦点，退到后台时触发。

8、onMuouseOver事件

当鼠标移动到某个对象上面时触发

9、onMouseOut事件

当鼠标离开某个对象时触发

10、onDblClick事件

鼠标双击时触发

1
<body ondblclick="触发的一个函数"></body>

11、其它事件

https://www.baidu.com/baidu?wd=js%CA%C2%BC%FE%C1%D0%B1%ED&tn=91529300_hao_pg

四、浏览器的内部对象

使用内部对象，可实现与HTML文档进行交互。这些内部对象提供了丰富的内部方法和属性，减轻了编程人员的工作，提高了变成效率。

1、navigator对象（浏览器对象）

提供有关浏览器的信息。

appName 浏览器的名称
appVersion 浏览器的版本
appCodeName 浏览器的代码名称
browserLanguage 浏览器使用的语言
plugins 可以使用的插件信息
platform 浏览器所使用的平台，如win32等
cookieEnabled 浏览器是否使用了cookie

2、document对象（文档对象）

document对象包含了与文档元素一起工作的对象，它位于最底层，对实现页面信息交互起着关键作用，所以，在这些对象系统中，文档对象属性最重要。

最重要的三个对象：links、anchor和form。

document对象有以下方法：输出显示write（）和writeln（）：该方法主要用来实现在web页面上显示输出信息。

3、window对象（窗口对象）

window对象处于对象层次的最顶端，提供了处理浏览器窗口的方法和属性。

4、location对象（位置对象）

位置对象时一个静态的对象，它描述的是某一个窗口对象所打开的地址。location对象常用的方法包括：

  • reload():相当于浏览器上的“刷新”功能。

  • replace():打开一个url后，单击浏览器的‘后退’，不能返回到之前的页面。

5、history对象

浏览器的浏览历史，常用方法：

  • back()：后退

  • forward()：前进

  • go()：进入指定的页面

DOM编程

一、dom简介

文件对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。

WEB前端--JavaScript

二、基础知识

1、选择器：

  • document.getElementById('id')

  • document.getElementsByName('name')

  • document.getElementsByTagName('tagname')

举例：
1
2
3
4
5
6
7
8
9
<body>
<div id="l1">
    123
</div>
<script type="text/javascript">
    var i= document.getElementById("l1"); //找
    i.innerText="456";    //改
</script>
</body>

注：Firefox不太好使

相关文章