一、准备阶段:
1. 为什么JavaScript非常值得我们学习吗?所有主流浏览器都支持JavaScript。
目前,全世界大部分网页都使用JavaScript。
它可以让网页呈现各种动态效果。
做为一个Web开发师,如果你想提供漂亮的网页、令用户满意的上网体验,JavaScript是必不可少的工具。
2. 从哪开始学习呢?
学习JavaScript的起点就是处理网页,所以我们先学习基础语法和如何使用DOM进行简单操作。
3. 在哪里插入javascript?
<script type="text/javascript">
document.write("开启JS之旅!");
</script>
注:既可以写在<head>里面,也可以写在<body>里面。
4. 引入javascript文件:<script src="script.js"></script>。
5. 定义变量: var 变量名;
变量必须使用字母、下划线(_)或者美元符($)开始。
然后可以使用任意多个英文字母、数字、下划线(_)或者美元符($)组成。
不能使用JavaScript关键词与JavaScript保留字。
6. 定义函数:
function 函数名
{
函数代码;
}
调用函数:<input type="button" value="按钮" οnclick="函数名()">
二、常用的互动方法(三种弹窗方式):
1. document.write("字符串"); 直接在网页中输出内容。
换行:document.write("字符串" + "<br/>");
2. alert() : 弹出对话框(注意:android里面需要重写WebChromeClient),如下:
webView_test.setWebChromeClient(new WebChromeClient(){
@Override
public boolean onJsAlert(WebView view, String url, String message, final JsResult result) {
AlertDialog.Builder b = new AlertDialog.Builder(MainActivityBZZB.this);
b.setTitle("Alert");
b.setMessage(message);
b.setPositiveButton(android.R.string.ok, new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
result.confirm();
}
});
b.setCancelable(false);
b.create().show();
return true;
}
});
3. confirm(str); 参数说明:
str:在消息对话框中要显示的文本
返回值: Boolean值
当用户点击"确定"按钮时,返回true
当用户点击"取消"按钮时,返回false
注意:android里面需要重写WebChromeClient),如下:
@Override
public boolean onJsConfirm(WebView view, String url, String message,
JsResult result) {
Log.d(LOG_TAG, "onJsConfirm:"+message);
mReusultText.setText("Confirm:"+message);
result.confirm();
return super.onJsConfirm(view, url, message, result);
}
4. prompt(str1 , str2) : 参数说明:
str1: 要显示在消息对话框中的文本,不可修改
str2:文本框中的内容,可以修改
返回值:
点击确定按钮,文本框中的内容将作为函数返回值
点击取消按钮,将返回null
注意:android里面需要重写WebChromeClient),如下:
@Override
public boolean onJsPrompt(WebView view, String url, String message,
String defaultValue, JsPromptResult result) {
Log.d(LOG_TAG,"onJsPrompt:"+message);
mReusultText.setText("Prompt input is :"+message);
result.confirm();
return super.onJsPrompt(view, url, message, message, result);
}
5. window.open([URL], [窗口名称], [参数字符串]) 可以查找一个已经存在或者新建的浏览器窗口。
参数说明:
URL:可选参数,在窗口中要显示网页的网址或路径。如果省略这个参数,或者它的值是空字符串,那么窗口就不显示任何文档。
窗口名称:可选参数,被打开窗口的名称。
该名称由字母、数字和下划线字符组成。
"_top"、"_blank"、"_self"具有特殊意义的名称。
_blank:在新窗口显示目标网页
_self:在当前窗口显示目标网页
_top:框架网页中在上部窗口中显示目标网页
相同 name 的窗口只能创建一个,要想创建多个窗口则 name 不能相同。
name 不能包含有空格。
参数字符串:可选参数,设置窗口参数,各参数用逗号隔开。
6. 关闭窗口:
window.close(); //关闭本窗口
或
<窗口对象>.close(); //关闭指定的窗口
三、认识DOM(认识元素id、className):
2. 获取元素的id: document.getElementById(“id”)
3. 通过元素id获取得到元素的内容:
var mychar= document.getElementById("con");
document.write("原标题:"+mychar.innerHTML+"<br>"); //输出原h2标签内容
mychar.innerHTML = "Hello World!";
document.write("修改后的标题:"+mychar.innerHTML); //输出修改后h2标签内容
4. 通过元素的id改变 HTML 样式:
var mychar = document.getElementById("pcon");
mychar.style.color="red";
mychar.style.fontSize="20";
mychar.style.backgroundColor ="blue";
5. 通过id显示和隐藏属性:
var div_p = document.getElementById("div_p");
div_p.style.display = "none"; //隐藏
div_p.style.display = "block"; //显示
6. 通过className改变标签样式:
var p2 = document.getElementById("p2");
p2.className = "two";
四、最后附带一个刚开始接触js的小例子:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>通过id和className改变样式</title> <style type="text/css"> body{font-size:14px;} #txt{ height:400px; width:600px; border:#333 solid 1px; padding:5px;} p{ line-height:18px; text-indent:2em;} </style> </head> <body> <h2 id="con">JavaScript课程</H2> <div id="txt"> <h5>JavaScript为网页添加动态效果并实现与用户交互的功能。</h5> <p>1. JavaScript入门篇,让不懂JS的你,快速了解JS。</p> <p>2. JavaScript进阶篇,让你掌握JS的基础语法、函数、数组、事件、内置对象、BOM浏览器、DOM操作。</p> <p>3. 学完以上两门基础课后,在深入学习JavaScript的变量作用域、事件、对象、运动、cookie、正则表达式、ajax等课程。</p> </div> <form> <!--当点击相应按钮,执行相应操作,为按钮添加相应事件--> <input type="button" value="改变颜色" οnclick="onclick_color()"> <input type="button" value="改变宽高" οnclick="onclick_width()"> <input type="button" value="隐藏内容" οnclick="onclick_hide()"> <input type="button" value="显示内容" οnclick="onclick_show()"> <input type="button" value="设置为红色" οnclick="onclick_cancle()"> </form> <script type="text/javascript" language="JavaScript"> function onclick_color(){ var change_corlor = document.getElementById("txt"); change_corlor.style.color = "greenyellow"; } function onclick_width(){ var change_wh = document.getElementById("txt"); change_wh.style.width = "200px"; change_wh.style.height = "300px"; } function onclick_hide(){ var change_wh = document.getElementById("txt"); change_wh.style.display = "none"; } function onclick_show(){ var change_wh = document.getElementById("txt"); change_wh.style.display = "block"; } function onclick_cancle(){ var is_confirm = confirm("是否设置成红色?"); if(is_confirm){ var change_wh = document.getElementById("txt"); change_wh.style.color = "red"; } } </script> </body> </html>