1.JS的概述:
什么是JS:运行在浏览器端脚本语言,基于对象和事件驱动的语言,应用于客户端,浏览器会在读取代码时,逐行地执行脚本代码。而对于传统编程来说,会在执行前对所有代码进行编译。
JS的用途:使用JS提升用户的体验.使HTML动起来.
2.JS的引入方式:
(1):页面内直接编写JS代码,JS代码需要使用<script></script>.
(2):将JS的代码编写到一个.js的文件中,在HTML中引入该JS代码即可.
<script type="text/javascript" src="../js/check.js"> //这里面不写东西</script>。外部脚本不能包含 <script> 标签。
3.JS的组成:
(1) ECMAScript:JS的核心
基本语法
与 Java 一样,变量、函数名、运算符以及其他一切东西都是区分大小写的。
比如:变量 test 与变量 TEST 是不同的
弱类型语言,可以任意改变变量的类型,变量是弱类型的与 Java 和 C 不同,ECMAScript 中的变量无特定的类型,定义变量时只用 var 运算符,可以将它初始化为任意值。因此,可以随时改变变量所存数据的类型(尽量避免这样做)。
例子
var color = "red";
var num = 25;
var visible = true;
行代码结束可不加分号,就默认为换行,建议加上分号,最好的代码编写习惯是总加入分号,因为没有分号,有些浏览器就不能正确运行,不过根据 ECMAScript 标准,下面两行代码都是正确的:
var test1 = "red"
var test2 = "blue";
变量名可以包含数字,但是不能以数字开头
注释
单行注释 : 以双斜杠开头(//)
多行注释 : 以单斜杠和星号开头(/*),以星号和单斜杠结尾(*/)
js运算符:
一元运算符:++ -- 与Java一致
逻辑运算符:&& || !or
算术运算符:+ - * / % 运算
+ 特点 :做的是拼接操作
- 特点 : 先把值转换成数值后再进行减法运算,转换后不是数值相减会出现NaN
关系运算符:
> < >= <= == !=
== 和 ===的区别,前者比较的是数值,后者不仅比较值而且还比较数据类型
三元运算符
值?表达式1:表达式1
如果值为true,整个表达式取表达式1的值,如果值为false,整个表达式取表达式2值。
赋值运算符
*=、+=、-=、/=、%=
以上赋值运算符与java中操作一样
逗号运算符
var a=1, b=2;
逗号运算符可以在一条语句中执行多个运算
声明变量
var关键字
var i = 10;
var i = "wangbadan";
var i = true;
var i = null;
......
js流程控制语句:
if条件
格式 :if(条件){语句}else{语句}
在java中if语句后面的条件必须是true/false值,而在javascript 中我们描述true/false有多种方式,所以要注意与java中的区别
switch语句
While与do-while
for循环
js类型
原始类型
string:字符及字符串都看做为字符类型
number:数值类型
boolean:逻辑类型
null
undefined:变量未初始化
引用类型:
对象类型.对象类型默认值是null.
类型判断:
typeof()
类型转换:
toString():转传成字符串
parseInt(值):转换成数字类型
parseFloat(值):转换成浮点类型
Boolean(值):值转换成Boolean类型
Number(值):值转换成Number类型
(2)DOM:Document Object Model 文档对象模型
DOM:就是将文档加载到内存,形成树形结构, 从而操作树形结构就可以改变HTML的样子.
Document :文档对象.代表的是加载到内存中的整个的文档.
Element :元素对象.代表文档中的每个元素(标签)
Attribute:属性对象.代表元素上的属性.
Document,Element,Attribute统称为Node(节点)
DOM基本操作:1.获取元素:
document.getElementById() 通过ID获得元素
document.getElementsByName() 通过name属性获得元素
document.getElementsByTagName(); 通过标签名获得元素
2.创建元素:
document.createElement(); 创建元素
var para=document.createElement("p");
document.createTextNode(); 创建文本节点
var node=document.createTextNode("这是新段落。");
3.添加元素:
element.appendChild(); 在最后添加一个节点
element.insertBefore(); 在某个元素之前插入一个节点
4. 删除元素:
element.removeChild(); 如需删除 HTML 元素,您必须首先获得该元素的父元素:
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
如果能够在不引用父元素的情况下删除某个元素,就太好了。不过很遗憾。DOM 需要清楚您需要删除的元素,以及它的父元素。这是常用的解决方案:找到您希望删除的子元素,然后使用其 parentNode 属性来找到父元素:
var child=document.getElementById("p1");
child.parentNode.removeChild(child);
5.修改元素:
elementNode.setAttribute(name,value)
参数 描述
name 必需。规定要设置的属性名。
value 必需。规定要设置的属性值。
说明: 该方法把指定的属性设置为指定的值。如果不存在具有指定名称的属性,该方法将创建一个新属性。
6. 改变 HTML
改变 HTML 内容:document.getElementById(id).innerHTML=new HTML
改变 HTML 属性:document.getElementById(id).attribute=new value
7.改变 CSS
document.getElementById(id).style.property=new style
8. 事件
对 HTML 事件做出反应
onclick=JavaScript
<h1 onclick="this.innerHTML=‘谢谢!‘">请点击该文本</h1>
<h1 onclick="changetext(this)">请点击该文本</h1>
HTML 事件属性
向 button 元素分配 onclick 事件:
<button onclick="displayDate()">点击这里</button>
使用 HTML DOM 来分配事件
向 button 元素分配 onclick 事件:
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>
(3)BOM:Browser Object Model 浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器“对话”。
Window:窗口对象
alert(); 显示带有一段消息和一个确认按钮的警告框 alert("文本")
confirm(); 弹出一个确认对话框 confirm("文本")
open(); 打开一个新窗口
prompt(); 显示可提示用户输入的对话框 prompt("文本","默认值")
设置定时的方法
* setInterval(); :每隔多少毫秒执行某个表达式. * setInterval(“change()”,5000);
* setTimeout(); :隔多少毫秒执行一个该表达式. * setTimeout(“change()”,5000);
清除定时的方法 clearInterval();
(1) clearInterval(id_of_setinterval)
var int=self.setInterval("clock()",50)
window.clearInterval(int);
(2)clearTimeout();
clearTimeout(setTimeout_variable)
t=setTimeout("timedCount()",1000)
clearTimeout(t)
Navigator:浏览器对象
Screen:屏幕对象
History:历史对象 go(); 加载history 列表中的某个具体页面
Location:路径对象 href: 设置或者返回完整的URL
4.JS函数的定义和创建:
创建
function 函数名(参数){
函数体;
}
//默认返回值为true。
* window.onload = function(){
}
var 函数名 = new Function(参数(函数体))
var 函数名 = function(参数) {
函数体
}
js函数参数问题: 参数无数据类型,调用时不用按照方法里的参数规定来
js函数返回值问题:
(1) 如果有返回值可以用return
(2)有返回值不用声明返回值类型
注:没有方法重载,可以用arguments模拟
(3) 如果没有返回值就返回undefined
原文地址:https://www.cnblogs.com/unrulywind/p/9141466.html