文章目录
一、JavaScript是什么
Javascrip是一个运行于Javascript解释器/引擎中的解释型脚本语言
运行环境:
1、独立安装的JS解释器(NodeJS)
2、嵌入在浏览器内核中的JS解释器
解释型:
运行前不需要编译(不同c++、java这些语言),直到碰到错误为止
编译型:
对源码进行编译,还能检查语法错误
JS的组成:
1、ECMAScript(核心)
2、DOM(Document Object Model)文档对象模型
让JS有能力与网页进行对话
3、BOM(Browser Object Model)浏览器对象模型
让JS有能力与浏览器进行对话
二、语法
一些单位的转换:
声明变量的时候要注意双引号的使用:
三、数据类型
1、首先定义都是用var,后面赋值是什么类型数据的就是什么类型
JS在运算过程中会自己进行转换的操作,不需要人为参与
JAVASCRIT语言也可以使用类似c的函数,如:
可以看到获取数据类型的方法有两种写法:
typeof(num);
typeof num;
这两条语句都是一个意思,都是获取num的数据类型
2、其次,对于isNaN(数据),要注意它表示的是“不是一个数字”,如果判断的变量是数字则会返回false,否则就是返回true
图中的需注意点那里写着:所有的数据类型与string进行运算时,结果都是string类型的结果
var num=15;
var str = num+"";
3、使用函数parseInt()表示取指定数据的整数部分,如:
var result = parseInt(数据);
parseInt从左到右依次进行转换,碰到第一个非整数字符则停止转换。如果第一个字符是非整数字符,结果是NaN
同样的,parseFlost()函数和Number()函数也是一样的用法
但使用Number()函数时,如果原有变量中有非数字则直接返回NaN,如:var s=“999 888”和var s=“999nj”,但也有例外,如果是日期对象,如:var s=Date(),使用Number(s)时则会返回一串数字
四、运算符/表达式
1、算术运算符
下图可以看到str1是字符串类型的数据,然后在进行num1+str1的运算时,变成了字符串相加,这就是上面提到的,所有格式的数据与字符串类型的数据做+运算时都会变成字符串运算。
javascript也有自增自减操作
这个自增自减与c++等的编程语言是一样的规则,前加加或前减减都是先加或减再赋值,后加加或减减是先返回原值再加或减
2、逻辑运算符
3、条件运算符
五、函数的基本知识
语法:
function 函数名(){
可执行语句;
}
例如:创建一个函数。名叫sayHello,功能是:
向控制台输出一句Hello World
function sayHello(){
console.log("hello");
console.log("world");
}
上面的例子都是无参数的例子,下面看一下有参数的情况
上面的例子都是没有返回值的函数,下面看一下有返回值的函数定义:
作用域
按值传递:
注意的是,函数中如果对全局变量进行操作,其实是没有改变全局变量的值的,函数相当于只是一开始从全局变量复制了一份放进函数里面进行操作,所以实际上操作并没有改变全局变量的值。
六、分支结构
程序=数据+算法
程序的三种结构:
1、顺序结构
2、分支结构
3、循环结构
1、分支结构
(1)if结构和if-else结构
使用到:
(1)if结构
(2)if-else结构
(2)switch结构
七、循环结构
1、while
2、do-while
3、for循环
4、for、while、do-while之间的区别
八、数组
1、索引数组
使用数组名字.length读取数组的长度
2、关联数组
关联数组是可以自定义下标名称的数组
对关联数组进行遍历的时候使用的是for in
如上图的遍历就是for(var key in bookInfo){}
3、索引数组与关联数组的区别
九、数组API函数
1、数组转字符串
使用arr.join(“连接符”)函数
将arr中每个元素转为字符串
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<script>
var chars=["h","e","l","l","o"];
document.write(chars.join(","));
</script>
</body>
</html>
利用该方法可以实现:
1、检查数组是否为空
2、将字符连接成单词
3、还可以将单词组成句子
4、将数组转化为页面元素的内容
2、拼接与选取
(1)concat()拼接
使用concat()函数对两个及两个以上的数组进行拼接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<script>
var arr1=[90,91,92];
var arr2=[80,81];
var arr3=[70,71,72,73];
var arr4=arr1.concat(50,60,arr2,arr3);
document.write(arr4);
</script>
</body>
</html>
(2)slice()选取
slice()函数中放的是开始的下标和结束的下标,表示截取开始下标(包括这个下标的内容)到结束下标的前面一个数(含头不含尾)
当里面的参数使用的是负数的时候就是从后往前面数的意思
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<script>
var arr1=[90,91,92,98,100,50,60];
var arr2=[80,81];
var arr3=[70,71,72,73];
var arr4=arr1.slice(-4,-2);
document.write(arr4);
</script>
</body>
</html>
slice()还可以用来复制数组:
(3)splice()修改数组
(4)reverse()颠倒数组
(5)排序
十、DOM(document object model)查找
1、DOM
2、DOM查找
(1)document.getElementById("")
按id找
注意上面的Element后面是没有s的
1、document这个词不能换不能省略
2、只用于精确查找一个元素
3、不是所有元素都有id
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p id="demo">单击按钮来改变这一段中的文本。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
document.getElementById("demo").innerHTML="Hello World";
};
</script>
</body>
</html>
(2)document.getElementsByTagName("")
按标签名找
注意Element后面是有s的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p id="demo">单击按钮来改变这一段中的文本。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
document.getElementsByTagName("P")[0].innerHTML="Hello World";
};
</script>
</body>
</html>
(3)document.getElementsByName("")
按name找
注意有兼容性问题:IE9+
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function getElements(){
var x=document.getElementsByName("x");
alert(x.length);
}
</script>
</head>
<body>
猫:
<input name="x" type="radio" value="猫">
狗:
<input name="x" type="radio" value="狗">
<input type="button" onclick="getElements()" value="多少名称为 'x'的元素?">
</body>
</html>
(4)getElementsByClassName("")
按class找
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<div class="example">第一 Div 元素 class="example"。</div>
<div class="example">第二个 Div 元素 class="example"。</div>
<p>点击按钮修改第一个 Div 元素的文本信息(索引值为 0 的 class="example")。</p>
<button onclick="myFunction()">点我</button>
<p><strong>注意:</strong> Internet Explorer 8 及更早 IE 版本不支持 getElementsByClassName() 方法。</p>
<script>
function myFunction() {
var x = document.getElementsByClassName("example");
x[0].innerHTML = "Hello World!";
}
</script>
</body>
</html>
(5)使用css选择器进行查找
querySelector("");
下面是使用querySelector("")查找一个id的情况
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p id="demo">id="demo" 的 p 元素</p>
<p> 点击按钮修改 id="demo" 的 p 元素内容</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction() {
document.querySelector("#demo").innerHTML = "Hello World!";
}
</script>
</body>
</html>
下面是使用querySelectorAll("")查找多个的情况
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h2 class="example">使用 class="example" 的标题</h2>
<p class="example">使用 class="example" 的段落</p>
<p>点击按钮为 class="example" (索引为 0) 的第一个元素设置背景颜色。</p>
<button onclick="myFunction()">点我</button>
<p><strong>注意:</strong>Internet Explorer 8 及更早版本不支持 querySelectorAll() 方法。</p>
<script>
function myFunction() {
var x = document.querySelectorAll(".example");
x[0].style.backgroundColor = "red";
}
</script>
</body>
</html>
十一、DOM修改
1、读取属性值
2、修改属性值
(1)setAttribute(“属性名”,"")
使用setAttribute(“属性名”,"")第二个参数也是需要加双引号的:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<script>
function myFunction(){
document.getElementsByTagName("INPUT")[0].setAttribute("type","button");
document.getElementsByTagName("input")[0].setAttribute("value","good");
};
</script>
<input value="OK">
<p id="demo">点击下面的按钮来设置按钮的类型属性。</p>
<button onclick="myFunction()">点我</button>
<p>Internet Explorer 8 及更早的版本不支持 setAttribute 方法。</p>
</body>
</html>
(2)setAttributeNode(“属性名”)
意思是增加一个属性值:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style type="text/css">
.democlass{
color:red;
}
</style>
</head>
<body>
<h1>Hello World</h1>
<p id="demo">单击按钮来设置标题上面的类属性节点。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
var atr=document.createAttribute("class");
atr.nodeValue="democlass";
var h=document.getElementsByTagName("H1")[0];
h.setAttributeNode(atr);
};
</script>
</body>
</html>
3、判断是否存在指定属性
4、移除属性值
5、修改样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript:改变 HTML 样式</title>
</head>
<script>
function myFunction(){
x=document.getElementById("demo");// 找到元素
x.style.backgroundColor="red"; // 改变样式
x.style.color="white";
}
</script>
<body>
<h1>我的第一段 JavaScript</h1>
<p id="demo">
JavaScript 能改变 HTML 元素的样式。
</p>
<button type="button" onclick="myFunction()">点击这里</button>
</body>
</html>
十二、DOM添加
1、
添加元素的步骤
1、创建空元素
2、设置关键属性
3、将元素添加到DOM树
其实在十一里面介绍setAttribute时的例子里面用到了createElement()
上述图片在insertBefor中使用的lastChild就是指,放在最后一个节点的前面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<ul id="myList"><li>Coffee</li><li>Tea</li></ul>
<p id="demo">单击按钮插入一个项目列表</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
var newItem=document.createElement("LI")
var textnode=document.createTextNode("Water")
newItem.appendChild(textnode)
var list=document.getElementById("myList")
list.insertBefore(newItem,list.childNodes[0]);
}
</script>
<p><strong>注意:</strong><br>首先创建一个li节点,<br>然后创建一个文本节点,<br>然后添加文本节点的在li节点。<br>最后在第一个子节点列表插入li节点。</p>
</body>
</html>
2、注意
十三、BOM(Browser Object Model)浏览器对象模型
1、
2、定时器
作用:
让程序按指定时间间隔自动执行任务
网页的动态效果、计时功能等
(1)周期性定时器setInterval()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>点击按钮,等待 3 秒会弹出 "Hello"。</p>
<p>在弹出的对话框中点击 “确定”, 3 秒后会继续弹出。如此循环下去...</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction() {
setInterval(function(){ alert("Hello"); }, 3000);
}
</script>
</body>
</html>