- 什么是JavaScript?
JavaScript是一种描述语言,基于对象和事件驱动的脚本语言- JavaScriptte特点:
脚本语言(一种轻量级的编程语言)
一种解释性语言(无需预编译)
被设计为向HTML页面添加交互行为
运行于客户端- JavaScriptte基本语法
<script type= " text/javascript " >
<!--
// JavaScript 代码
//-->
</script>
注意:
(1)<!-- -->
部分是非必须的,为了规避老版本浏览器不识别
(2)“//”是 JavaScript 的注释符号(/**/也是注释符号),它会阻止
JavaScript 编译器对这一行的编译
(3)type属性不推荐写成 language= " javascript " ,不符合XHMLT1.0
JavaScriptte的组成:
- 关于ECMAScript
1.ECMAScript定义了脚本语言的所有属性、方法和对象
2.包括语法、类型、关键字、保留字、运算符、对象等
3.除了JavaScript外,同时也是Nombas的ScriptEase和
Flash脚本ActionScript的基础
- 关于DOM(Document Object Model文档对象模型)
1.HTML和XML的应用程序接口(API)
2.把整个页面规划为层级式的节点结构
- 关于BOM(Browser Object Model浏览器对象模型)
1.可对浏览器窗口进行访问和操作包括:
弹出新的浏览器窗口
移动、关闭浏览器窗口及调节浏览器窗口大小
获取用户屏幕分辨率的屏幕对象
WEB浏览器详细的定位对象
2.对象举例
Navigator对象
Screen对象
Window对象
- Window对象(表示浏览器中打开的窗口)
特点:
1.Window 对象是全局对象,可直接调用其方法和属性
2.Window对象的一些方法和属性可省略不写- Window对象常用属性
- history属性就是History对象的引用
方法:
1.back():加载上一个浏览的文档
2.forward():加载下一个浏览过的文档
3.go(n):n为整数,跳转第n个浏览过的文档
3.1.n==0 则刷新当前页面
3.2.n>0 则向前跳转到第n个文档
3.3.n<0 则向后跳转到第n个文档
代码:
<html>
<head>
<title>history对象</title>
</head>
<body>
<h1 id="hh1">返回上一页</h1>
<script>
//1 获取元素
var hh1 = document.getElementById("hh1");
//2 操作元素
hh1.onclick=function(){
history.back();
}
</script>
</body>
的繁荣打</html>
- location属性就是Location对象的引用
代码:
<html>
<head>
<title>history对象</title>
</head>
<body>
<input type="text" id="address" /><input type="button" value="跳转" id="btn" />
<!-- file:///C:/Users/naixi/Desktop/www.baidu.com -->
<script type="text/javascript">
//console.log(location);
//1 获取元素
var add=document.getElementById("address");
var btn1=document.getElementById("btn");
//2 操作元素
btn1.onclick=function(){
//console.log(location);
// 2.1 获取文本框中的内容
var a = add.value;
// 2.2 将文本框中的内容作为浏览器中的地址
location.href="https://"+a;
}
</script>
</body>
</html>
- document属性:每个载入浏览器的 HTML 文档都会成为 Document 对象,利用它可对 HTML页面中的所有元素进行访问。
常用属性:
title:返回或设置当前文档的标题
常用方法
1.write():向文档写HTML表达式或JavaScript代码
2.getElementById():返回对拥有指定id的第一个对象的引用
3.getElementsByTagName():返回带有指定名称的对象集合
4.getElementsByName():返回带有指定名称的对象集合
代码:
<html>
<head>
<title>document对象</title>
</head>
<body>
<ul>
<li name="ll1">苹果</li>
<li>葡萄</li>
<li name="ll1">西瓜</li>
</ul>
<script>
//1 获取元素
var lis = document.getElementsByTagName("li");
var names = document.getElementsByName("ll1");
//2 操作元素
lis[2].innerHTML="橘子";
for(var i=0;i<lis.length;i++){
console.log(lis[i].innerHTML);
}
//console.log(names);
//for(itm in names){
//console.log(itm);
//}
</script>
</body>
</html>
History对象
Location对象
- 引用JavaScriptte的三种方式
1.HTML标签中引用
2.<script>
标签中直接书写
3.通过<script>
标签的src属性引入外部JS文件
代码:
<html>
<head>
<title>javascript支持的三种弹窗,实现和用户交互</title>
<!--这是html注释-->
<script type="text/javascript">
//这是javascript注释
//第一种弹窗 alert()弹窗
//alert("你好!alert");//注意:alert有一个特性!
//浏览器处于阻塞状态,代码在alert这个位置停止并等待
//第二个弹窗 prompt()具有返回值,返回的是String类型
//var userName=prompt("请输入用户名称:", "刘德华");
//prompt("请输入姓名");
//接受两个参数,第一个是提示字符,第二个是输入框默认的值
//alert(typeof userName);
//第三个弹窗 confirm() 确认框,返回的是boolean类型的true或false
var flag=confirm("确定要提交吗?")
alert(flag);
document.write("你好,javascript");
</script>
</head>
</html>
JavaScript的数据类型
- undefined
1.undefined 类型只有一个值,即 undefined;
2.未定义或定义未赋值- Null
表示尚未存在的对象,与undefined值相等- Number
var iNum=23; //整数
var iNum=23.0; //浮点数- Boolean
true和false- String
一组被引号(单引号或双引号)括起来的文本
var string1=“This is a string”;
代码:
<html>
<head>
<title>介绍js的数据类型及基本操作</title>
<script type="text/javascript">
// 1 代码调试 代码断点调试alert来完成
// 2 代码调试 我不想中断代码 console.log();
//var userName="jack";
//alert(userName);
//console.log(userName);
var aa = 12; //使用var声明变量
console.log(typeof aa ); //number
//bb = 36; //没有使用var来声明
//上面是js支持的两种变量声明方式,注意他们是有区别的
//我只规定你们只能用第一种 不允许使用第二种
aa = "12";
console.log(typeof aa ); //string
console.log(12+"12"); //这边的加号和Java有相同的使用方法和注意事项,使用的时候需要大家尽量注意数据类型
console.log(12+"12"); //这边的加号和Java有相同的使用方法和注意事项,使用的时候需要大家尽量注意数据类型
var u ; //当你声明了一个变量的时候 , js自动复制undefined
var uu=null;
console.log(uu);
</script>
</head>
<body>
</body>
</html>
- 数据类型转换
◆转换函数
◼parseInt():字符串转换为整数
◼parseFloat():字符串转换为浮点数
◼toString():返回字符串
◆强制类型转换
◼Boolean():转化为逻辑值
◼Number():对象转化为数字
◼String():对象转化为字
- 常用的系统函数
- 自定义函数
语法:
代码:
<html>
<head>
<title>函数的介绍</title>
<script type="text/javascript">
//函数的使用
// 写一个最简单的函数并调用
// 函数的调用
//alertName("jack"); //声明在调用之后就无法被调用了
// 函数的声明方式1 js函数提升器 js会先声明这种方式声明的函数 再依次执行代码
function alertName(userName){
alert(userName);
}
// 函数的声明方式2 声明一个匿名函数将地址传递给变量
//var alertName = function(userName){
// alert(userName);
//}
/*
如果我函数的声明中参数和传入参数数量不一致会有什么结果
functuon fn1() {}
fn1("jack");
functuon fn2(userName) {}
fn2();
?形参和实参有关系吗?
*/
</script>
</head>
<body>
<h1>你好</h1>
</body>
</html>
- 常见事件举例
相关代码:
<html>
<head>
<title>事件的介绍</title>
</head>
<body>
<!-- onfocus -->
<input type="text" onfocus="javascript:console.log(this.value)"
onblur="javascript:console.log(this.value)" />
<br />
<select onchange="javascript:console.log(this.value)">
<option value="1">玩具</option>
<option value="2">文具</option>
<option value="3">书籍</option>
</select>
</body>
</html>
<html>
<head>
<script>
window.onload=function(){
// 当页面加载完成的时候 出发onload事件
// 这个事件绑定在一个函数上,然后执行这个函数
var input1 = document.getElementById("userName");
var texta1 = document.getElementById("texta");
console.log(input1.value);
console.log(texta.innerHTML);
}
</script>
</head>
<body>
<input type="text" id="userName" value="你好上海" />
<textarea id="texta">
你好中国
</textarea>
</body>
</html>
- 程序的输出调试方法
1.alert()调试法
2.document.write()调试法
3.console对象调试法(IE不支持)