JavaScript的基本使用
一、JavaScript的简单介绍
JavaScript是一种属于网络的脚本语言(简称JS),已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。
JavaScript代码常存在于HTML文档中,被script标签所包裹。为了方便多个HTML使用同一份JavaScript代码,也可以将JavaScript代码写在js文件中,需要在HTML文档中使用,导入即可。
<script>
//JavaScript代码
alert(123);
</scpript> <script type="text/javascript">
//JavaScript代码
alert(123);
</scpript>
代码存在于HTML文档中
注:script标签可放在HTML文档的head标签内,但建议将其放置在body标签内部的最下方(这样写浏览器会先加载网页的内容,再加载其动态效果)。
二、JavaScript的基本数据类型
JavaScript的基本数据类型有数字(在JS中,数字不区分整型和浮点类型)、数组,字符串,布尔(只用两个值,true和false)。
在JavaScript中申明一个变量:
PI = 3.14 // 声明一个全局变量,赋值3.14, 数字类型 var a = 6; // 声明一个局部变量a,为其赋值6,是数字类型
var b = [1,2,3,4] // 数组
var c = "hell world" // 字符串
var d = true // 布尔类型
var e = {'k1':v1, 'k2':v2, 'k3':v3} //字典 c = null // 清空变量c
字符串类型的常用方法:
"string".length 返回字符串长度 " string ".trim() 移除字符串的空白
" string ".trimLeft() 移除字符串左侧的空白
" string ".trimRight) 移除字符串右侧的空白
"string".charAt(n) 返回字符串中的第n个字符
"string".concat(string2, string3, ...) 拼接
"string".indexOf(substring,start) 子序列起始位置
"string".lastIndexOf(substring,start) 子序列终止位置
"string".substring(from, to) 根据索引获取子序列
"string".slice(start, end) 切片
"string".toLowerCase() 将字符串转为大写
"string".toUpperCase() 将字符串抓为小写
"string".split(delimiter, limit) 以特定字符分割字符串 // 与正则表达式搭配使用
"string".search(regexp) 从头开始匹配,返回匹配成功的第一个位置(g无效)
"string".match(regexp) 全局搜索,如果正则中有g表示找到"string".replace(regexp, replacement) 替换,正则中有g则替换所有,否则只替换第一个匹配项,
$数字:匹配的第n个组内容;
$&:当前匹配的内容;
$`:位于匹配子串左侧的文本;
$':位于匹配子串右侧的文本
$$:直接量$符号
数组类型的常用方法:
obj.length 数组的大小 obj.push(ele) 尾部追加元素
obj.pop() 从尾部弹出元素
obj.unshift(ele) 头部插入元素
obj.shift() 头部移除元素 // 可用此句完成对数组的插入,删除,替换操作
obj.splice(start, deleteCount, value, ...) 从start位置开始,删除deleteCount个元素,插入value,... obj.slice( ) 切片
obj.reverse( ) 反转
obj.join(sep) 将数组元素连接起来以构建一个字符串
obj.concat(val,..) 连接数组
obj.sort( ) 对数组元素进行排序
四、JavaScript的选择和循环语句
与其他编程语言类型,JS也有三种程序执行流程,即顺序,选择,和循环。
if (判断条件){
// js代码
}else if(判断条件){
// js代码
}else{
// js代码
} // 常用判断符号与逻辑符号
&& 逻辑与
|| 逻辑或
> < 大于 小于
== != 判断值
=== !== 判断值和类型
选择语句_1
// x代指变量,case为x不动的取值情况,defult当上面的case都不满足执行defult,相当于else
switch(x){
case '1':
var i = 1;
break;
case '2':
var i = 2;
break;
case '3':
var i = 3;
break;
defult:
i = 0;
}
选择语句_2
1. 循环时循环的是索引
a = [11,22,33];
for (var item in a){
console.log(a[item]); // 在浏览器的console中打印a[item]的值,item是索引
} a = {'k1':'v1', 'k2':'v2', 'k3':'v3'};
for (var item in a){
console.log(a[item]);
} 2. 常规for循环
for (var i=0; i<10; i++){
//js代码
}
for循环
var len = 10;
var i = 0;
while(i < len){
console.log(i); // 代指js代码
i++;
}
while循环
五、JavaScript的函数申明
与其他编程语言类型,JS也有函数,在JS中申明一个函数特别简单。
// 常规函数
function funcname(a, b, c) {
var a = 0; // JS代码块
}
// 匿名函数,匿名函数只有某一块代码使用,在声明时已经确定由谁来执行它
setIntervar(function(){
console.log(123); // js代码块
}, 5000)
// 自执行函数,函数声明完后立即执行并且不会被其他代码调用
(function(arg){
console.log(arg); //js代码块
})(1)
六、JS面向对象
在JavaScript中,面向对象其实是函数的一种变种,与函数的定义非常类似。
方式一:
// 定义一个类
function Foo(n){
this.name = n; // 属性
// 方法
this.sayHello = function(){
console.log("hello,", name);
}
} // 实例化一个对象
var obj = new Foo('abc');
obj.name; // 调用属性
obj.sayHello(); // 调用方法
方式二:
function Foo(n){
this.name = n;
} Foo.prototype = {
'sayHello': function(){
console.log("hello,", this.name);
}
} var obj = new Foo('abc');
obj.name;
obj.sayHello();
注:通常使用方式二来定义和使用一个对象。
七、JavaScript中常用的系统方法
1. 定时器,每隔特定的时间执行一次特定的任务,用途十分广泛。
var a = setInterval(function(){console.log('hello');}, 间隔时间);
clearInterval(a); // 清除定时器
2. 超时器,设置一段时间,比如5秒钟,当时间超过5秒钟后执行某一任务。
var b = setTimeout(funciton(){console.log('hello')}, 5000); // 设置超时器
clearTimeout(b); // 清除超时器,比如当用户执行某一操作后,取消超时器使用它
3. 弹出提示框
alert('message') // message代指要提示的信息
4. 弹出确认框
// 向用户弹出一个确认框,如果用户选择确认,v=true;否则,v=false。
var v = confirm('message') // message为确认提示信息,比如真的要删除吗?
5. 刷新页面
location.reload(); // 执行此方法浏览器自动刷新当前页面,可以和定时器配合使用用以定时刷新页面
6. 页面跳转
location.href // 获取当前页面的url
location.href = url; // 从当前页面跳转到指定url,可与超时器配合使用,做网站的页面跳转
location.href = location.href; // 与location.reload()效果相同,刷新当前页面
7. eval(使用eval,可将字符串转换成代码执行)
var s = '1+2';
var a = eval(s);
console.log(a);
8. 序列化
序列化试将一个对象转化成字符串,方便存储,打印等。在任何一门编程语言中都存在序列化。
而反序列化是将读取到的字符串转化为对象,方便程序使用。
在js中,序列化与反序列画的操作如下:
ls = [1,2,3,4];
s = JSON.stringify(ls); //object ---> string
console.log(s);
new_ls = JSON.parse(s) //string ---> object
console.log(new_ls);
9. 字符串的编码与解码
为了能够在所有计算机上识别出字符串,在传输过程中要对字符串编码,传输完成后要对字符串解码。
escape(str) // 对字符串编码
unescape(str) // 对字符串解码 encodeURI() // 对URI编码
decodeURI() // 对URI解码与encodeURI() 对应
encodeURIComponent() // 对URI编码
decodeURIComponent() // 对URI解码与encodeURIComponent() 对应
八、触发JavaScript的事件
当我们用鼠标点击浏览器界面中的一个按钮时就触发了一个事件(即点击事件),类似的还有很多其他事件,比如当鼠标移动到某个标签上,光标选中某个输入框等,这些都是事件,那么就,接下来就介绍一下一些常用的事件。
标签绑定事件的方式:
对div标签绑定点击事件
方式一:
<div id="i1" onclick="funcname">点我</div>
方式二:
<div id="i1">点我</div>
tag = document.getElementById("i1");
tag.onclick = funciton () {console.log("div i1");};
方式三:
<div id="i2">点我</div>
tag = document.getElementById("i2");
tag.addEventListener("click", function () {
console.log("div i2");
}, false);
注:使用方式二和方式三可做到事件与标签相分离,在测试代码时,可以使用方式一绑定标签与事件,在日常编程中建议使用方式二和方式三。
常用的事件有:
onclick --- 鼠标点击执行js函数
onfocus --- 光标选中执行js函数
onblur --- 光标移走执行js函数
onmouseover --- 鼠标移到某个标签执行js函数
onmouseout --- 鼠标从某个标签移走执行js函数
八、使用JavaScript完成一些常用功能
1. HTML中的模态对话框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <style>
.c2{
background-color: black;
opacity: 0.4;
z-index: 8;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0; }
.c3{
background-color: white;
z-index: 9;
height: 200px;
width: 500px;
position: fixed;
top: 25%;
left: 50%;
margin-left: -250px;
}
.hid{
display: none;
}
</style>
</head>
<body style="margin: 0 auto;">
<div>
<table style="border: 1px solid red" border="1">
<thead>
<tr>
<th>host</th>
<th>port</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.1.1.1</td>
<td>1111</td>
</tr>
<tr>
<td>1.1.1.2</td>
<td>1112</td>
</tr>
<tr>
<td>1.1.1.3</td>
<td>1113</td>
</tr>
</tbody>
</table>
</div>
<div>
<input type="button" value="添加" onclick="ShowModel();"/>
</div> <!--遮罩层-->
<div id="i2"; class="c2 hid"></div>
<!--对话框-->
<div id="i3" class="c3 hid">
<fieldset style="border: 1px solid red;">
<legend>添加</legend>
<div>
<label>host:</label>
<input type="text"/>
</div>
<div>
<label>port:</label>
<input type="text"/>
</div>
<p>
<input type="button" value="取消" onclick="HiddenModel();"/>
<input type="button" value="确定"/>
</p>
</fieldset>
</div> <script>
function ShowModel() {
tag = document.getElementById('i2').classList.remove('hid');
tag = document.getElementById('i3').classList.remove('hid');
}
function HiddenModel() {
tag = document.getElementById('i2').classList.add('hid');
tag = document.getElementById('i3').classList.add('hid');
}
</script>
</body>
</html>
2. HTML中的全选,反选,取消按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<div>
<input type="button" value="全选" onclick="checkedAll();"/>
<input type="button" value="反选" onclick="reverseAll();"/>
<input type="button" value="取消" onclick="cancelAll();"/>
</div> <table style="border: 1px solid red;" border="1">
<thead>
<tr>
<th>opotion</th>
<th>host</th>
<th>port</th>
</tr>
</thead>
<tbody id="i3">
<tr>
<td><input type="checkbox"></td>
<td>1.1.1.1</td>
<td>1111</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1.1.1.2</td>
<td>1112</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1.1.1.3</td>
<td>1113</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1.1.1.4</td>
<td>1114</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1.1.1.4</td>
<td>1114</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1.1.1.5</td>
<td>1115</td>
</tr>
</tbody>
</table>
</div>
<script>
function checkedAll() {
var tags = document.getElementById("i3").children;
for (var i in tags) {
var checkbox = tags[i].firstElementChild.firstElementChild;
checkbox.checked = true;
}
} function cancelAll() {
var tags = document.getElementById("i3").children;
for (var i in tags) {
var checkbox = tags[i].firstElementChild.firstElementChild;
checkbox.checked = false;
}
} function reverseAll() {
var tags = document.getElementById("i3").children;
for (var i in tags) {
var checkbox = tags[i].firstElementChild.firstElementChild;
if (checkbox.checked) {
checkbox.checked = false;
}
else {
checkbox.checked = true;
} }
}
</script>
</body>
</html>
3. 类似于购物商城的左侧菜单栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <style>
.item {
margin-bottom: 15px;
} .menu {
background-color: blueviolet;
height: 30px;
line-height: 30px;
font-weight: bolder;
} .hide {
display: none;
} .content{
background-color: lightseagreen;
}
</style>
</head>
<body> <div style="height: 150px;"></div>
<div style="width: 350px; border: 1px solid red;">
<div class="item">
<div id="i1" class="menu" onclick="ChangeMenu('i1');">菜单1</div>
<div class="content">
<div>内容1</div>
<div>内容1</div>
<div>内容1</div>
<div>内容1</div>
</div>
</div>
<div class='item'>
<div id="i2" class="menu" onclick="ChangeMenu('i2');">菜单2</div>
<div class="content hide">
<div>内容2</div>
<div>内容2</div>
<div>内容2</div>
<div>内容2</div>
</div>
</div>
<div class='item'>
<div id="i3" class="menu" onclick="ChangeMenu('i3');">菜单3</div>
<div class="content hide">
<div>内容3</div>
<div>内容3</div>
<div>内容3</div>
<div>内容3</div>
</div>
</div>
<div class='item'>
<div id="i4" class="menu" onclick="ChangeMenu('i4');">菜单4</div>
<div class="content hide">
<div>内容4</div>
<div>内容4</div>
<div>内容4</div>
<div>内容4</div>
</div>
</div>
</div> <script>
function ChangeMenu(id) {
menu = document.getElementById(id);
items = menu.parentElement.parentElement.children; for (var i=0; i<items.length; i++) {
var current_item = items[i].children;
current_item[1].classList.add('hide');
}
menu.nextElementSibling.classList.remove('hide');
}
</script>
</body>
</html>
4. 鼠标移到标签某行改变其样式,移走恢复
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1" width="300px">
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
</table> <script>
var myTag = document.getElementsByTagName('tr'); // 找到标签 for (var i=0, len=myTag.length; i<len; i++) {
myTag[i].onmouseover = function () {
this.style.backgroundColor = "red"; // 改变样式
} myTag[i].onmouseout = function () {
this.style.backgroundColor = ""; //恢复样式
}
</script>
</body>
</html>
5. 搜索框提示信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.search{
margin: 0 auto;
border: 1px solid red;
}
</style>
</head>
<body>
<div style="width: 100%;">
<input id="i1" class="search" type="text" name="keywords" onfocus="Focus();" onblur="Blur();" value="请输入关键字"/>
<input type="button" value="搜索"/>
</div> <script>
function Focus() {
tag = document.getElementById('i1');
val = tag.value;
console.log(val);
if (val == "请输入关键字") {
tag.value = "";
}
}
function Blur() {
console.log(2);
tag = document.getElementById('i1');
val = tag.value;
if (val == "") {
tag.value = "请输入关键字";
}
} </script>
</body>
</html>
JavaScript的基本使用的更多相关文章
- JavaScript之父Brendan Eich,Clojure 创建者Rich Hickey,Python创建者Van Rossum等编程大牛对程序员的职业建议
软件开发是现时很火的职业.据美国劳动局发布的一项统计数据显示,从2014年至2024年,美国就业市场对开发人员的需求量将增长17%,而这个增长率比起所有职业的平均需求量高出了7%.很多人年轻人会选择编 ...
- javascript中的Array对象 —— 数组的合并、转换、迭代、排序、堆栈
Array 是javascript中经常用到的数据类型.javascript 的数组其他语言中数组的最大的区别是其每个数组项都可以保存任何类型的数据.本文主要讨论javascript中数组的声明.转换 ...
- Javascript 的执行环境(execution context)和作用域(scope)及垃圾回收
执行环境有全局执行环境和函数执行环境之分,每次进入一个新执行环境,都会创建一个搜索变量和函数的作用域链.函数的局部环境不仅有权访问函数作用于中的变量,而且可以访问其外部环境,直到全局环境.全局执行环境 ...
- 探究javascript对象和数组的异同,及函数变量缓存技巧
javascript中最经典也最受非议的一句话就是:javascript中一切皆是对象.这篇重点要提到的,就是任何jser都不陌生的Object和Array. 有段时间曾经很诧异,到底两种数据类型用来 ...
- 读书笔记:JavaScript DOM 编程艺术(第二版)
读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...
- 《Web 前端面试指南》1、JavaScript 闭包深入浅出
闭包是什么? 闭包是内部函数可以访问外部函数的变量.它可以访问三个作用域:首先可以访问自己的作用域(也就是定义在大括号内的变量),它也能访问外部函数的变量,和它能访问全局变量. 内部函数不仅可以访问外 ...
- JavaScript权威指南 - 函数
函数本身就是一段JavaScript代码,定义一次但可能被调用任意次.如果函数挂载在一个对象上,作为对象的一个属性,通常这种函数被称作对象的方法.用于初始化一个新创建的对象的函数被称作构造函数. 相对 ...
- JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome
今天为大家分享一下我自己制作的浏览器滚动条,我们知道用css来自定义滚动条也是挺好的方式,css虽然能够改变chrome浏览器的滚动条样式可以自定义,css也能够改变IE浏览器滚动条的颜色.但是css ...
- JavaScript进阶之路(一)初学者的开始
一:写在前面的问题和话 一个javascript初学者的进阶之路! 背景:3年后端(ASP.NET)工作经验,javascript水平一般般,前端水平一般般.学习资料:犀牛书. 如有误导,或者错误的地 ...
- 梅须逊雪三分白,雪却输梅一段香——CSS动画与JavaScript动画
CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...
随机推荐
- Mybatis查询,resultMap="Map" 查询数据有空值,导致整个map为空的问题
解决方法,不要使用Map接收,使用HashMap或者LinkHashMap,都可以. resultMap="Map" 替换为: resultMap="HashMap&qu ...
- struts 中的创建Action的三种方法
1.对于直接创建类,不实现接口和继承任何的类 例如创建一个helloAction package cn.lonecloud.control; import com.opensymphony.xwork ...
- MysqL读写分离的实现-Mysql proxy中间件的使用
为什么要架设读写分离,这里不做多余的说明,想了解具体原理,请百度或者参考其他帖子.在这里只做大概的配置说明,测试中使用三台服务器 192.168.136.142 主服务器 192.168.136. ...
- 15-谜问题(深拷贝、LC检索、面向对象编程)
问题描述: 在一个分成16格的方形棋盘上,放有15块编了号码的牌.对这些牌给定一种初始排列,要求通过一系列的合法移动将这一初始排列转换成目标排列. 这个问题解决时用到了L-C检索.在检索的过程中计算估 ...
- 危化品速查APP--Android Project
开发环境 Android studio 2.3.1 功能描述 集成多种查询方式,查看本地数据库中危险化学品的信息: 按照中文拼音和英文首字母,对化学品进行查询: 按照UN号或者CAS号查询相应的化学品 ...
- 试着简单易懂记录synchronized this object Class的区别,模拟ConcurrentHashMap
修饰静态方法默认获取当前class的锁,同步方法没有释放的锁,不影响class其他非同步方法的调用,也不影响不同锁的同步方法,更不影响使用class的其他属性. package thread.base ...
- (转载)SVM-基础(五)
作为支持向量机系列的基本篇的最后一篇文章,我在这里打算简单地介绍一下用于优化 dual 问题的 Sequential Minimal Optimization (SMO) 方法.确确实实只是简单介绍一 ...
- 搭建多系统yum服务器
一.多系统服务器搭建 1.首先挂载光盘 2.安装vsftp 3.使用rpm -ql vsftpd查看vsftpd安装时都产生了哪些文件,找到以.server结尾的文件路径.此文件的文件名就是vsftp ...
- MyBatis入门一
本人只是刚刚学习MyBatis,作为学习路程的记录,写的不好,不完善的地方请多多包涵: 首先,先比较一下Hibernate和MyBatis两种框架之间的区别: 两种都是ORM框架,但是Hibernat ...
- 使用CXF和spring搭建webService服务
虽然下一个项目需要使用xfire,但是在查资料的过程中还是看到有不少地方都说cxf比xfire更好,cxf继承了xfire,但是不仅仅包含xfire,因此便也一起来尝试尝试.大概是有了xfire的经验 ...