一、准备阶段:
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）:
1. 文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。
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>
转载请注明原文地址: https://ju.6miu.com/read-900006.html
