1、在HTML中直接编写js代码
1)放在<head>部分,浏览器解析head部分就会执行js代码,是最常用的方法
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>标题</title>
<script type="text/javascript">
document.write("I love") ;
</script>
</head>
2)放在<body>部分,网页读取到该语句的时候才会执行
<body>
<script type="text/javascript">
document.write("javascript");
</script>
</body>
2、引用外部js文件
<script src="js/script.js"></script>
在script.js文件中进行js代码编写
3、js语句,通常要加上英文分号作为语句结束(可以不加,但不推荐)
document.writ("hello,world");
4、注释
1)单行注释
document.wirte("单行注释使用‘//’");//单行注释
2)多行注释
document.write("多行注释/*注释内容*/");
/*
多行注释
*/
5、变量
var mychar;
mychar = "javascript";
mychar = "hello,world";
var mynum = 6;
1)变量必须使用字母、下划线或$符开始
2)后面可以使用任意多个英文字母、数字、下划线或$符
3)不能使用关键字和保留字
6、if...else
var score = 80;
if (score >=60)
{
document.write("及格");
}else
{
document.write("不及格");
}
7、函数
function contxt()//定义函数
{
alert("我被调用了");
}
函数调用
<input type="button" value="点击我" οnclick="contxt()" />
8、输出内容
document.write("hello,world"); //直接输出内容
mystr="hello,world“;
document.writle(mystr);//通过变量名输出内容
document.write(mystr + "!!!!!!");//输出多个内容
document.write(mystr + "<br>");//输出HTML标签
document.write(" "+"1"+" "+"23");//输出空格
9、消息对话框
1)警告(alert消息对话框)
alert(str);
实例:
alert("我被调用了");
2)确认(confirm消息对话框)
confirm(str);
返回Boolean值,当用户点击”确定“时,返回true;当用户点击”取消“时,返回false
实例:
var mymessage=confirm("你是女士吗?");
if (mymessage==true)
{
document.write("你是女士!");
}
else
{
document.write("你是男士!");
}
3)提问(prompt消息对话框)
prompt(str1,str2);
str1:显示在消息对话框汇中的文本,不可修改
str2:文本框中的内容,可以修改
点击”确定“,文本框中内容将作为函数返回值,点击”取消“,将返回null
var score;
score=prompt("输入你的成绩:");
if(score>=60)
{
document.wirte("及格");
}else
{
document.wirte("不及格");
}
10、打开新窗口(window.open)
window.open([URL],[窗口名称],[参数字符串]);
window.open('http://www.baidu.com','_bank','width=600,height=400,top=100,left=0,menubar=no,toolbar=no,status=no,scroollbars=yes')
/*
width宽度,height高度,top距屏幕顶距离,left距屏幕左边距离,menubar菜单,toolbar工具栏,status状态栏,scroollbars滚动条'
*/
11、关闭窗口(window.close)
window.close();//关闭本窗口
<窗口对象>.close();关闭指定窗口
var mywin = window.open('http://www.baidu.com')
mywin.close();//关闭本窗口
12、DOM
1)通过ID获取元素
var mychar=document.getElementById("con");
2)innerHTML属性
document.write("原标题:"+mychar.innerHTML+"<br>");
mychar.innerHTML="hello,world";
document.write("新标题:"+mychar.innerHTML+"<br>");
3)改变HTML样式
mychar.style.color="red"; // 设置文本的颜色
mychar.style.backgroundColor="blue"; //设置元素的背景颜色
mychar.style.width="300px"; //设置元素的宽度
mychar.style.height="50px"; //设置元素的高度
mychar.style.font= normal; //设置字体的属性
mychar.style.fontFamily= "楷体" //设置元素的字体系列
mychar.style.fontSize="20"; //设置字体的大小
4)显示和隐藏(display属性)
mychar1.style.display="none";//隐藏,此元素不会被显示
mychar1.style.display="block";//显示
5)控制类名(className属性)
object.className=className
1)放在<head>部分,浏览器解析head部分就会执行js代码,是最常用的方法
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>标题</title>
<script type="text/javascript">
document.write("I love") ;
</script>
</head>
2)放在<body>部分,网页读取到该语句的时候才会执行
<body>
<script type="text/javascript">
document.write("javascript");
</script>
</body>
2、引用外部js文件
<script src="js/script.js"></script>
在script.js文件中进行js代码编写
3、js语句,通常要加上英文分号作为语句结束(可以不加,但不推荐)
document.writ("hello,world");
4、注释
1)单行注释
document.wirte("单行注释使用‘//’");//单行注释
2)多行注释
document.write("多行注释/*注释内容*/");
/*
多行注释
*/
5、变量
var mychar;
mychar = "javascript";
mychar = "hello,world";
var mynum = 6;
1)变量必须使用字母、下划线或$符开始
2)后面可以使用任意多个英文字母、数字、下划线或$符
3)不能使用关键字和保留字
6、if...else
var score = 80;
if (score >=60)
{
document.write("及格");
}else
{
document.write("不及格");
}
7、函数
function contxt()//定义函数
{
alert("我被调用了");
}
函数调用
<input type="button" value="点击我" οnclick="contxt()" />
8、输出内容
document.write("hello,world"); //直接输出内容
mystr="hello,world“;
document.writle(mystr);//通过变量名输出内容
document.write(mystr + "!!!!!!");//输出多个内容
document.write(mystr + "<br>");//输出HTML标签
document.write(" "+"1"+" "+"23");//输出空格
9、消息对话框
1)警告(alert消息对话框)
alert(str);
实例:
alert("我被调用了");
2)确认(confirm消息对话框)
confirm(str);
返回Boolean值,当用户点击”确定“时,返回true;当用户点击”取消“时,返回false
实例:
var mymessage=confirm("你是女士吗?");
if (mymessage==true)
{
document.write("你是女士!");
}
else
{
document.write("你是男士!");
}
3)提问(prompt消息对话框)
prompt(str1,str2);
str1:显示在消息对话框汇中的文本,不可修改
str2:文本框中的内容,可以修改
点击”确定“,文本框中内容将作为函数返回值,点击”取消“,将返回null
var score;
score=prompt("输入你的成绩:");
if(score>=60)
{
document.wirte("及格");
}else
{
document.wirte("不及格");
}
10、打开新窗口(window.open)
window.open([URL],[窗口名称],[参数字符串]);
window.open('http://www.baidu.com','_bank','width=600,height=400,top=100,left=0,menubar=no,toolbar=no,status=no,scroollbars=yes')
/*
width宽度,height高度,top距屏幕顶距离,left距屏幕左边距离,menubar菜单,toolbar工具栏,status状态栏,scroollbars滚动条'
*/
11、关闭窗口(window.close)
window.close();//关闭本窗口
<窗口对象>.close();关闭指定窗口
var mywin = window.open('http://www.baidu.com')
mywin.close();//关闭本窗口
12、DOM
1)通过ID获取元素
var mychar=document.getElementById("con");
2)innerHTML属性
document.write("原标题:"+mychar.innerHTML+"<br>");
mychar.innerHTML="hello,world";
document.write("新标题:"+mychar.innerHTML+"<br>");
3)改变HTML样式
mychar.style.color="red"; // 设置文本的颜色
mychar.style.backgroundColor="blue"; //设置元素的背景颜色
mychar.style.width="300px"; //设置元素的宽度
mychar.style.height="50px"; //设置元素的高度
mychar.style.font= normal; //设置字体的属性
mychar.style.fontFamily= "楷体" //设置元素的字体系列
mychar.style.fontSize="20"; //设置字体的大小
4)显示和隐藏(display属性)
mychar1.style.display="none";//隐藏,此元素不会被显示
mychar1.style.display="block";//显示
5)控制类名(className属性)
object.className=className