文章说明:
觉得前面太简单的同学,请直接跳到第7节。
语言类型:
初学者牢记这个框架,在总体上有个模糊的认知。 现在不必知道是什么意思。学完回过头来看即可明白。
JS有三种导入方式(也可以理解为两种)
这种办法通常只用于测试,正式代码一般不出现。
<script>
alert("alert用于弹窗");
</script>
这种办法通常用于对特定页面写的特定js
<head>
<script>
alert("alert用于弹窗");
</script>
</head>
这种办法用于引用通用js
<head>
<script src="xxx.js"></script>
</head>
之所以提供以上三种方法来导入js,跟css的三种导入方式有着一样的原因。(可查看css必备基础的4.3节)
变量是用于存储信息的容器
javascript中的变量与ava中的变量不一样。
在javascript中使用 var 运算符(variable 的缩写)加变量名定义的。
JavaScript 变量名称的规则:
一般情况下,变量使用var声明即可,而不需要int、doublt、float等类型声明。
var i = 10;
在ECMAScript中,变量可以存在两种数据类型,即原始类型与引用类型。
原始类型 相当于 Java基本数据类型
ECMAScript有五种原始类型
通过typeof方法可以获取一个变量的类型 为什么 typeof 运算符对于 null 值会返回 “Object”。这实际上是 JavaScript 最初实现中的一个错误,然后被 ECMAScript 沿用了。现在,null 被认为是对象的占位符,从而解释了这一矛盾,但从技术上来说,它仍然是原始值。
引用类型通常叫做类(class),也就是说,遇到引用值,所处理的就是对象。
从传统意义上来说,ECMAScript 并不真正具有类。
ECMAScript 定义了“对象定义”,逻辑上等价于其他程序设计语言中的类。
对象是由 new 运算符加上要实例化的对象的名字创建的
var obj=new Object();
Object对象自身用处不大,但是 ECMAScript 中的 Object 对象与 Java 中的 java.lang.Object 相似,ECMAScript 中的所有对象都由这个对象继承而来,Object 对象中的所有属性和方法都会出现在其他对象中
常用的javascript对象有
ECMAScript为开发者提供了大量的类型转换方法。
大部分类型具有进行简单转换的方法,还有几个全局方法可以用于更复杂的转换。
Boolean 值、数字和字符串的原始值它们是伪对象,这意味着它们实际上具有属性和方法。
toString()方法.把number转成string,boolean转string
parseInt() 和 parseFloat()。前者把值转换成整数,后者把值转换成浮点数。
parse是解析的意思,翻译过来就是“将括号内的参数解析为int\float类型。一般情况下,函数都不需要死记
只有对 String 类型调用这些方法,它们才能正确运行;对其他类型返回的都是 NaN(not a number)。
ECMAScript 中提供了三种强制类型转换:
与java(甚至其他大部分语言)基本一致,不再赘述,实在不会可查阅官方参考手册。
与java(甚至其他大部分语言)基本一致,不再赘述,实在不会可查阅官方参考手册。
与java基本一致,不再赘述,实在不会可查阅官方参考手册。
包含 Array Boolean Date Math Number String RegExp(正则表达式,初学者可先跳过,遇到再进行学习) 重点掌握Array,String,其他的遇到查文档即可。
第一种
function 函数名称(参数列表){
函数体;
return 返回值
}
第二种
var 函数名称=function(参数列表){
函数体;
}
第三种:【了解】 var 函数名称 = new function(参数列表,函数体);
var add = new function('a','b','return a + b');
console.log(add(10,10);
js对形参个数没有进行限制,简单的说,也就是函数调用时传递的参数不一定要与函数声明时的参数个数一致。
在javascript中有一个特殊的对象arguments,我们可以通过它来获取所有函数中的参数。
全局函数,只需要理解为:在js中可以直接使用的函数
事件通常与函数配合使用,这样我们可以通过发生的事件来驱动函数执行.
常见事件:
在javascript中事件经常与函数一起使用。
以下将介绍怎样将一个事件与函数绑定到一起。
简单说,就是某个事件被触发后,函数将被调用。
事件的三要素:事件、事件源、响应行为
通用代换代码
<script>
function 函数名(){
进行操作
}
</script>
<被监听的标签 事件属性="函数名()"></被监听的标签>
事件属性及7.1表中的事件属性
举例:
<script>
function clickMe(){
alert("button被点击了");
}
</script>
<button onclick="clickMe()"></button>
效果:当button被点击时,函数调用,弹窗显示“button被点击了” 说明: 事件绑定是js的核心部分,通过事件,可以对html页面进行各种动态改写。 本章不做详细的例子,请各位举一反三,发挥想象力,自行尝试
onload():
等到页面加载完毕在执行onload事件所指向的函数.
浏览器对象模型,可以对浏览器窗口进行访问和操作。
由于没有相关的 BOM 标准,每种浏览器都有自己的 BOM 实现。但有一些事实上的标准。如具有一个窗口对象和一个导航对象,不过每种浏览器可以为这些对象或其他对象定义自己的属性和方法。
window对弹框的三个方法,alert,confirm,prompt
<script type="text/javascript">
function click1() {
//alert是window对象的方法,平时开如可以省略window
window.alert("党的十九大招开了");//提示框
}
function click2() {
//显示带有一段消息以及确认按钮和取消按钮的对话框。
//用户选择后,会返回true或者false
var rsl = window.confirm("你确定要分手吗?");
alert(rsl);
}
function click3(){
//显示可提示用户输入的对话框,点确定后,返回用户输入的密码,点取消,返回null
var rsl = prompt("请输入你的银行卡密码");
alert("你输入的密码是:" + rsl)
}
</script>
<button onclick="click1();">点击1</button>
<button onclick="click2();">点击2</button>
<button onclick="click3();">点击3</button>
指定时间执行
间隔时间执行
注册后5秒跳转首页
历史跳转
DOM(文档对象模型)是 HTML 和 XML 的应用程序接口(API)。
DOM 将把整个页面规划成由节点层级构成的文档。HTML 或 XML 页面的每个部分都是一个节点的衍生物。
DOM就是将html页面生成为一棵树。
请看下面的 HTML 页面
这段代码可以用 DOM 绘制成一个节点层次图:
DOM 通过创建树来表示文档,从而使开发者对文档的内容和结构具有空前的控制力。
W3C DOM 标准被分为 3 个不同的部分:
- HTML 的标准对象模型
- HTML 的标准编程接口
- W3C 标准HTML DOM 定义了所有 HTML 元素的对象和属性,以及访问它们的方法。
XML DOM 定义了访问和处理 XML 文档的标准方法
HTML文档格式 符合XML语法标准,所以可以使用XML DOM API。
在XML DOM每个元素都会被解析为一个节点Node,而常用的节点类型又分为
HTML DOM 定义了针对 HTML文档的对象,可以说是一套 更加适用于 JavaScript 技术开发 的API。
HTML DOM是对XML DOM的扩展。
进行 JavaScript DOM开发 可以同时使用 XML DOM和 HTML DOM。
以下方法,顾名思义即可掌握,难在熟练灵活的使用。
注意:子标签之间不要换行或空格,
喜欢的城市:<br>
<ul id="city">
<li id="bj">北京</li>
<li id="sh">上海</li>
<li id="gz">广州</li>
</ul>
<button id="btn" onclick="myClick()">点击</button>
<script type="text/javascript">
function myClick(){
//创建节点
var li = document.createElement("li");
li.setAttribute("id","sz");
//创建一个文本
var txt = document.createTextNode("深圳");
li.appendChild(txt);
//获取ul
var ul = document.getElementById("city");
//ul.appendChild(li);//尾部添加
var sh = document.getElementById("sh");
//ul.insertBefore(li,sh);//插入到上海前面
//ul.insertAfter(li,sh);//插入到上海后面
//ul.removeChild(sh);//删除上海
}
</script>
设置标签内的"值"
div.innerHTML = "<h1>今天</h1>"