JavaScript语言入门

最新推荐文章于 2024-09-23 17:26:41 发布

guotao1983

最新推荐文章于 2024-09-23 17:26:41 发布

阅读量353

点赞数

JavaScript语言入门

为什么学习JavaScript

兼容性好，绝大多数浏览器均支持Javascript。

Javascript是由Netscape公司创造的一种脚本语言。为便于推广，被定为javascript，但是javascript与java是两门不相干的语言，作用也不一样。

JavaScript也可以做到与服务器的交互响应。

JavaScript可以被嵌入到HTML文件中，不需要经过Web服务器就可以对用户操作作出响应，使网页更好地与用户交互。

将JavaScript插入网页的方法

使用language=”javascript”表示使用JavaScript脚本语言，如果没有language属性，表示默认使用JavaScipt脚本。其中的...就是代码的内容。例如：

1、JavaScript中字符串的常见操作

注：索引以0开始计数。

x.length －－获取字符串的长度

x.toLowerCase() －－转为小写

x.toUpperCase() －－转为大写

x.trim() －－去除字符串两边空格,但是不能去掉两边的换行符和制表符

x.charAt(index) －－返回字符串中第index位置的字符

x.indexOf(findstr) －－返回字符串中出现str的第一个位置(从前向后找)

x.lastIndexOf(findstr,fromIndex) －－返回字符串中出现str的第一个位置(从后向前找)

x.substr(start) －－返回字符串从start位置开始到结尾的字符串

x.substr(start, length) －－start表示开始位置，length表示截取长度

x.substring(start) －－返回字符串从start位置开始结尾的字符串

x.substring(start,end) －－返回字符串从start位置开始,到索引end位置结束的字符串(左闭又开)

x.slice(start, end) －－切片操作字符串,(向后进行查找) [左闭右开]

其中slice的用法和substring的用法基本相同.

x.replace(findstr,tostr) －－字符串替换

x.split(); －－分割字符串

x.concat(addstr) －－拼接字符串

代码示例：

var str2 = "Hadoop and Spark";

console.log("返回字符串从第二个位置开始到-1位置的字符串"+str2.slice(1,-2)); // adoop and Spa

console.log("返回字符串从-5位置开始到-1位置的字符串"+str2.slice(-5,-2)); // Spa

</script>

2、JavaScript中数组的常见操作

1）数组join(separator) 方法 :

循环遍历数组中的每一个元素(数组中的元素可以是字符串, 也可以是数字),

并用指定的分隔符separator将它们拼接起来,结果返回一个字符串。

2）数组concat方法:用于字符串的拼接的操作(当然也可以拼接数组)

3）方法sort方法:不是按照数字大小进行排序的,而是按照最高位的ASCII码排序的。(这是一个坑) 如何将数字按照大小排序呢?

function sort_arr(m,n)

{

return n - m;

}

然后sort中的参数写的是sort_arr这个函数。

4）数组的切片操作和字符串的切片操作是一样的.

5）数组中的push pop这两个方法模拟的是一个栈操作

x.push(value, ...) 压栈 x.pop() 弹栈

代码示例：

var arr1 = ["spark","Hadoop",10]

var arr2 = new Array("spark","Hadoop",10)

str3 = arr1.join("_")

str4 = arr2.join("-")

var a = [1,2,3]

var b = a.concat([4,5])

console.log(a.toString()) //1,2,3,4,5

var d = [100,56,34,8,6,7]

e = d.sort() //[100,34,56,6,7,8] //按ASCII码排序

function sort_arr(m,n) {

return n - m; }

var d2 = [100,56,34,8,6,7]

d2.sort(sort_arr) //这样就是按大小排序了，将排序的回调函数传入

//数组中的切片方法,和我们字符串中的方法是一样的:

var arr5 = ["spark","Hadoop","hbase","scala","Django"]

console.log("返回数组中第1个索引位置之后的列表"+arr5.slice(1)) //["Hadoop","hbase","scala","Django"]

console.log("返回数组中第1个索引位置到第-1个索引位置之后的列表"+arr5.slice(1,-1)) //["Hadoop","hbase","scala"]

//数组中的插入和删除的方法:push 和 pop

var arr6 = ["spark","Hadoop","hbase","scala","Django"]

arr6.push("dj") //["spark","Hadoop","hbase","scala","Django","dj"]

arr6.pop("dj") //["spark","Hadoop","hbase","scala","Django"]

</script>

3、JavaScript中日期的常见操作

获取日期和时间

getDate() 获取日

getDay () 获取星期

getMonth () 获取月（0-11）

getFullYear () 获取完整年份

getYear () 获取年

getHours () 获取小时

getMinutes () 获取分钟

getSeconds () 获取秒

getMilliseconds () 获取毫秒

getTime () 返回累计毫秒数(从1970/1/1午夜)

代码示例：

function getCurrrentDate() {

//1、创建Date对象

var date = new Date()

var year = date.getFullYear()

}

</script>

4、JavaScript中函数中的内置对象

函数的内置对象arguments:函数参数的集合

//内置对象arguments的应用1

function add(x,y)

{

var sum = 0

for (var i=0;i<arguments.length;i++)

{

sum += arguments[i]

console.log(arguments[i])

}

console.log("总和是:"+sum)

}

add(2,3)

//内置对象arguments的应用2:判断函数参数的个数是否正确

function add_sum(a,b,c)

{

if (arguments.length != 3)

console.log("函数的参数个数不对!")

else

alert("传入参数的个数success!")

}

</script>

运行结果：

总和是:5

函数的参数个数不对!

5、JavaScript中的BOM对象

【浏览器对象模型（BOM） Broswer object model（整合js和浏览器）】

window对象：

所有浏览器都支持 window 对象。

概念上讲.一个html文档对应一个window对象.

功能上讲: 控制浏览器窗口的.

使用上讲: window对象不需要创建对象,直接使用即可.

alert() 显示带有一段消息和一个确认按钮的警告框。

confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。

prompt() 显示可提示用户输入的对话框。

//setInterval可以让一个函数循环往复的操作.

setInterval(func,time)：按照指定的周期（以毫秒计）来调用函数。

clearInterval(arg) 取消由 setInterval() 设置的定时器,arg的数值是setInterval()的返回值。

//setTimeout只会让一个函数执行一次.

setTimeout(func,time) ：在指定的毫秒数后调用函数或计算表达式。

clearTimeout(arg) ：取消由 setTimeout() 方法设置的定时器,arg的数值是setTimeout()的返回值。

示例程序3：定时器的应用

<!DOCTYPE html>

<head>

<title>Title</title>

[type="text"]{

width: 250px;

}

</style>

</head>

<body>

<input type="text"> <button>start</button> <button>stop</button>

</body>

button_ele = document.getElementsByTagName("button")

input_ele = document.getElementsByTagName("input")[0]

//给标签按钮增加一个事件监听器

var ID;

console.log("ID的初始数值是:"+ID)

button_ele[0].onclick = function(){

//一旦ID已经有了数值,用户的操作就置为无效:否则点一次开了一次定时器

if (ID == undefined){

input_ele.value = new Date().toString()

//1s钟之后就会周而复始的更新值

ID = setInterval(set_time,1000)

}

button_ele[1].onclick = function(){

clearInterval(ID)

console.log("ID此时的数值是:"+ID)

ID = undefined;

}

function set_time() {

input_ele.value = new Date().toString()

}

</script>

</html>

6、HTML DOM对象中的节点查找（全局查找与局部查找）

HTML DOM: HTML Document Object Model（文档对象模型）

HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构（节点树)

直接查找节点：

document.getElementById(“idname”)

document.getElementsByTagName(“tagname”)

document.getElementsByName(“name”)

导航节点属性:

parentElement 或者 parentNode // 父节点标签元素

children // 所有子标签

firstElementChild // 第一个子标签元素

lastElementChild // 最后一个子标签元素

nextElementtSibling // 下一个兄弟标签元素

previousElementSibling // 上一个兄弟标签元素

7、如何获取节点对应的文本值以及如何对标签内部的文本值进行赋值（innerText和）

HTML中的节点：

<p>这是P标签</p>

</div>

javaScript中的代码：

console.log(document.getElementById("box").innerText);

</script>

打印结果：

这是P标签

javaScript中的代码：

console.log(document.getElementById("box").innerHTML);

</script>

打印结果：

<p>这是P标签</p>

低版本的火狐浏览器不支持使用innerText，而是支持使用textContent，因此我们需要封装一个兼容版本

function getText(element) {

if(element.innerText) {

return element.innerText;

}else{

return element.textContent; //低版本的火狐支持

}

如何对标签内部的文本进行赋值:

document.getElementById("box"). innerText = "这是另一个标签";

或者

document.getElementById("box").innerHTML = "<p>这是另一个标签</p>"

8、如何对一个标签的属性进行赋值和取值

获取属性值的操作：

方法1：elementNode.getAttribute(属性名)

方法2：elementNode.属性名

给属性赋值的操作：

方法1：elementNode.setAttribute(属性名,value)

方法2：elementNode.属性名 = 属性值

9、关于classlist的相关操作

elementNode.className :查看标签对应的class名字(是个数组，内容是一个空格分割的字符串)

elementNode.classList.add:向class列表中添加一个属性

elementNode.classList.remove:向class列表中删掉一个属性

<!DOCTYPE html>

<head>

<title>Demo网页</title>

<style>

.left_menu{

width:20%;

height: 500px;

background-color: wheat;

float: left;

}

.content_menu{

width: 80%;

height: 500px;

background-color: darkgray;

float: left;

}

.title{

/*将子菜单的标题进行居中*/

text-align: center;

/*子菜单的背景色为暗红色*/

background-color: crimson;

line-height: 40px;

/*子菜单的标题的颜色为白色*/

color: white;

}

/*含有con的属性会自动隐藏*/

.hide{

display: none;

}

.item{

margin: 20px;

}

</style>

</head>

<body>

</div>

</div>

</div>

<div class="content_menu">这是一块空白的展示</div>

</div>

</body>

var eles = document.getElementsByClassName("title")

for (var i=0;i<eles.length;i++){

eles[i].onclick = function(){

//使用nextElementSibling获取兄弟节点<div class="gt hide">，

//将该标签class列表去掉hide这个属性

this.nextElementSibling.classList.remove("hide")

var arr_item = this.parentElement.parentElement.children//即菜单一二三

var ele_curr_p = this.parentElement//当前菜单

for (var i=0;i<arr_item.length;i++){

if (arr_item[i] != ele_curr_p){//判断是非当前菜单

arr_item[i].children[1].classList.add("hide")

}

</script>

</html>

10、节点操作

创建节点:

createElement(标签名) ：创建一个指定名称的元素.

给节点增加属性,并进行赋值:

elementNode.setAttribute(属性名,value)

添加节点:

追加一个子节点（将作为最后的子节点）

parentnode.appendChild(newnode)

删除节点:

parentnode.removeChild(子节点)：获得要删除的元素，通过父元素调用删除

替换节点:

parentnode.replaceChild(newnode, oldnode);

11、如何在JavaScript当中改变css样式

<p id="p2">Hello world!</p>

document.getElementById("p2").style.color="blue";

document.getElementById("p2")..style.fontSize=48px;

<!DOCTYPE html>

<head>

<title>网页demo</title>

</head>

<body>

<div class="item">Hello world</div>

</div>

</body>

div_item = document.getElementsByClassName("item")[0]

/*<div class="item">hello you</div>*/

input_button = document.getElementsByTagName("input")[0]

/*<input type="button" value="点我">*/

//为点击按钮增加相应的事件监听器:点击字体之后变颜色

input_button.onclick = function(){

//注意:value值要加双引号

div_item.style.color = "blue";

div_item.style.fontSize="48px";

div_item.style.backgroundColor = "red";

}

</script>

</html>

12、JavaScript中的事件介绍

onsubmit：

当表单在提交时触发,该属性也只能给form(表单)元素使用.

应用场景: 在表单提交前验证用户输入是否正确.如果验证失败.在该方法中我们应该阻止表单的提交.

默认submit作用：在form表单中,当点击这个按钮后,会将form表单中所有的数据打包然后发到server端。

阻止默认的提交事件的两种方法：

return false;

e.preventDefault()

实例代码：

<!DOCTYPE html>

<head>

<title>网页demo</title>

</head>

<body>

姓名:<input type="text"><br>

密码:<input type="password"><br>

</form>

</body>

var ele = document.getElementById("formId_1")

ele.onsubmit = function(e){

alert("123") //这一行代码可以理解为登陆验证

//通过return false可以阻止默认事件的发生(默认事件是向服务器端发送form表单的数据)

//return false;

//e.preventDefault()

}

</script>

</html>

onkeydown:

Event 对象：Event 对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态。

事件通常与函数结合使用，函数不会在事件发生前被执行！

<!DOCTYPE html>

<head>

<title>Title</title>

</head>

<body>

</body>

var ele = document.getElementById("test")

//按下鼠标之后的反应

ele.onkeyup = function(event){

event = event || window.event

//keynum实际上是ASCII编码

var keynum = event.keyCode

console.log(keynum)

var keychar = String.fromCharCode(keynum)

if (keychar == "B"){

alert("你输入的大写字母B")

}

</script>

</html>