一、你知道,为什么JavaScript非常值得我们学习吗?
1. 所有主流浏览器都支持JavaScript。
2. 目前,全世界大部分网页都使用JavaScript。
3. 它可以让网页呈现各种动态效果。
4. 做为一个Web开发师,如果你想提供漂亮的网页、令用户满意的上网体验,JavaScript是必不可少的工具。
二、易学性
1.学习环境无外不在,只要有文本编辑器,就能编写JavaScript程序。
2.我们可以用简单命令,完成一些基本操作。
三、从哪开始学习呢?
学习JavaScript的起点就是处理网页,所以我们先学习基础语法和如何使用DOM进行简单操作。
2.如何插入js
<script>标签在HTML文件中添加JavaScript代码
<script type="text/javascript"> <script>
3.引用js外部文件
JavaScript代码只能写在HTML文件中吗?当然不是,我们可以把HTML文件和JS代码分开,并单独创建一个JavaScript文件(简称JS文件),其文件后缀通常为.js,然后将JS代码直接写在JS文件中。
注意:在JS文件中,不需要<script>标签,直接编写JavaScript代码就可以了。
4.js在页面中的位置
放在<head>部分
最常用的方式是在页面中head部分放置<script>元素,浏览器解析head部分就会执行这个代码,然后才解析页面的其余部分。
放在<body>部分
JavaScript代码在网页读取到该语句的时候就会执行。
注意:
javascript作为一种脚本语言可以放在html页面中任何位置,但是浏览器解释html时是按先后顺序的,所以前面的script就先被执行。
比如进行页面显示初始化的js必须放在head里面,因为初始化都要求提前进行(如给页面body设置css等);而如果是通过事件调用执行的function那么对位置没什么要求的。
5.javaScript注释
单行注释,在注释内容前加符号 “//
多行注释以"/*"开始,以"*/"结束。
6.什么是变量
(基本数据类型) 数据类型 (Number boolean Nulll Object String undefined) 存放在堆内存
(引用数据类型)保存在堆内存中对象
定义变量使用关键字var: var 变量名;
变量名可以任意取名,但要遵循命名规则:
1.变量名必须使用字母或者下划线(_)开始。
2.变量名必须使用英文字母、数字、下划线(_)组成。
3.变量名不能使用JavaScript关键词与JavaScript保留字。
4.在函数内部没有使用var来声明变量时,这个变量就会作为全局变量声明,在函数定义中使用var.
注意:
1. 在JS中区分大小写,如变量mychar与myChar是不一样的,表示是两个变量。
2. 变量虽然也可以不声明,直接使用,但不规范,需要先声明,后使用。
<script type="text/javascript">
var myage = 18;
if(myage>=18) //myage>=18是判断条件
{ document.write("你是成年人。");} else //否则年龄小于18
{ document.write("未满18岁,你不是成年人。");}
</script>
7.什么是函数
函数是完成某个特定功能的一组语句。如没有函数,完成任务可能需要五行、十行、甚至更多的代码。这时我们就可以把完成特定功能的代码块放到一个函数里,直接调用这个函数,就省重复输入大量代码的麻烦。
定义一个函数
function 函数名{ 函数代码;}
有参函数
function 函数名(参数1,参数2){
函数代码;
}
function add2(x,y)
{
sum = x + y;
document.write(sum);
}
返回值的函数
function add2(x,y)
{
sum = x + y;
return sum; //返回函数值,return后面的值叫做返回值。
}
还可以通过变量存储调用函数的返回值,代码如下:
result = add2(3,4);//语句执行后,result变量中的值为7。
函数调用:
函数定义好后,是不能自动执行的,所以需调用它,只需直接在需要的位置写函数就ok了,
代码如下:
8.输出内容(document.write)
document.write()
可用于直接向 HTML 输出流写内容。简单的说就是直接在网页中输出内容。
第一种:输出内容用“”括起,直接输出""号内的内容。
<script type="text/javascript">
document.write("I love JavaScript!"); //内容用""括起来,""里的内容直接输出。
</script>
第二种:通过变量,输出内容
<script type="text/javascript">
var mystr="hello world!";
document.write(mystr); //直接写变量名,输出变量存储的内容。
</script>
第三种:输出多项内容,内容之间用+号连接。
<scripttype="text/javascript">
var mystr="hello";
document.write(mystr+"I love JavaScript"); //多项内容之间用+号连接
</script>
第四种:输出HTML标签,并起作用,标签使用“”括起来。
<script type="text/javascript">
var mystr="hello";
document.write(mystr+"<br>");//输出hello后,输出一个换行符
document.write("JavaScript");
</script>
8.
警告(alert 消息对话框)
我们在访问网站的时候,有时会突然弹出一个小窗口,上面写着一段提示信息文字。如果你不点击“确定”,就不能对网页做任何操作,这个小窗口就是使用alert实现的。
语法: alert(字符串或变量);
9.
确认(confirm 消息对话框)
confirm 消息对话框通常用于允许用户做选择的动作,如:“你对吗?”等。弹出对话框(包括一个确定按钮和一个取消按钮)。
语法: confirm(str);
str:在消息对话框中要显示的文本
返回值:boolean值
当用户点击"确定"按钮时,返回true
当用户点击"取消"按钮时,返回false
例子:<script type="text/javascript">
var mymessage=confirm("你喜欢JavaScript吗?");
if(mymessage==true)
{ document.write("很好,加油!"); }
else
{ document.write("JS功能强大,要学习噢!"); }
</script>
10.提问(prompt 消息对话框)
prompt
弹出消息对话框,通常用于询问一些需要与用户交互的信息。弹出消息对话框(包含一个确定按钮、取消按钮与一个文本输入框)。
语法: prompt(str1,str2);
str1:要显示在消息对话框中的文本,不可修改
str2:文本框中的内容,可以修改
返回值:
1. 点击确定按钮,文本框中的内容将作为函数返回值
2. 点击取消按钮,将返回null
var myname=prompt("请输入你的姓名:");
if(myname!=null)
{ alert("你好"+myname); }
else
{ alert("你好 my friend."); }
11.
打开新窗口(window.open)
open() 方法用于打开一个新的窗口。
语法: window.open(<URL>, <窗口名称>, <参数字符串>)
参数说明:
URL:打开窗口的网址或路径。
窗口名称:被打开窗口的名称。
可以是'_top',为覆盖当前页面,'_blank'新页面打开窗口,'_self'当前页面区域显示。
参数字符串:设置窗口参数,各参数用逗号隔开。
参数表:
注意:
1.参数之间逗号及等号前后有空格,该字符串无效,只有删除空格才能正常运行。
2.运行结果考虑浏览器兼容问题。
例如:打开http://www.imooc.com网站,大小为300px * 200px,无菜单,无工具栏,无状态栏,有滚动条窗口:
<script type="text/javascript"> window.open('http://www.imooc.com','_blank','width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes')
</script>
12.
关闭窗口(window.close)
13.编程练习:
制作新按钮,“新窗口打开网站” ,点击打开新窗口。
<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
<script type="text/javascript">
function openWindow(){
var message;
message=confirm("是否打开新窗口?");
var site=null;
// 新窗口打开时弹出确认框,是否打开
if(message==true){
// 通过输入对话框,确定打开的网址,默认为 http://www.imooc.com/
site=prompt('是否打开','http://www.imooc.com/');
//打开的窗口要求,宽400像素,高500像素,无菜单栏、无工具栏。
window.open(site,'_blank','width=400px,hight=500px,menubar=no,toolbar=no');
}
}
</script>
</head>
<body>
<input type="button" value="新窗口打开网站" οnclick="openWindow()" />
</body>
</html>