一、准备阶段:
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>
311
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
