栗子1:弹框

来实现点击一张图片，弹出一个弹框
在这里插入图片描述
在assets文件夹下，放一张易烊千玺的图片yyqx.jpg，然后新建index.html

<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
	 <script type="text/javascript">
	 	//函数相当于java中的方法
		 function showInfo(){
		 	window.alert("hello");
		 }
	 </script>
 </head>
 <body>
	<img onclick="showInfo()" src="yyqx.jpg"/>
 </body>
</html>

Activity中

public class MainActivity extends AppCompatActivity {
    private WebView webView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        webView = findViewById(R.id.webView);
        webView.loadUrl("file:///android_asset/index.html");
        WebSettings webSettings = webView.getSettings();
        // 设置与Js交互的权限
        webSettings.setJavaScriptEnabled(true);
        webView.setWebChromeClient(new WebChromeClient() {
            @Override
            public boolean onJsAlert(WebView view, String url, String message, final JsResult result) {
                return super.onJsAlert(view, url, message, result);
            }
        });
    }
}

为了规范，我们新建一个main.js，内容就是之前写的函数
在这里插入图片描述
index.html中的script标签内容改为

<script src="main.js" type="text/javascript"></script>

栗子2:函数

修改刚才的main.js

//js中的变量不分类型，函数也没有返回值类型
function add(n1,n2){
    return n1+n2;
}
var sum1 = add(8,8);
console.log(sum1);
var sum2 = add(8,8,8);
console.log(sum2);
var sum3 = add("a","k");
console.log(sum3);

在chrome中运行index.html，f12，按Esc，打开Console，查看输出
在这里插入图片描述
通过程序发现，我们的add方法有2个参数，但是可以传3个参数，现在我们可以增加异常处理

//js中的变量不分类型，函数也没有返回值类型
function add(n1,n2){
    if(arguments.length != 2){
        throw new Error("参数个数必须是2");
    }
    return n1+n2;
}
var sum1 = add(8,8);
console.log(sum1);
try{
    var sum2 = add(8,8,8);
    console.log(sum2);
}catch(e){
    console.log(e.message);
}
var sum3 = add("a","k");
console.log(sum3);

在这里插入图片描述

正则表达式

var exp = /^\d\w{1,10}\d$/;
console.log(exp.test("a2"));
console.log(exp.test("1a2"));
console.log(exp.test("1aaaaaaaaaaaaaaaaa2"));
console.log(exp.test("1aa2"));

在这里插入图片描述

var exp = /^1[345678]\d{9}$/;
console.log(exp.test("13333333333"));

在这里插入图片描述

验证用户名密码

<html lang="en">
 <head>
 ......
  <title>Document</title>
     <script src="main.js" type="text/javascript"></script>
 </head>
 <body>
 <form onsubmit="return checkForm()" action="login.jsp" method="GET">
  用户名<input name="username" id="uname"><br/>
  <span id="username_error"></span><br/>
  密码<input name="password" id="upsd"><br/>
  <span id="password_error"></span><br/>
  <input type="submit" value="登录">
 </form>
 </body>
</html>

function checkForm(){
    var usernameInput = document.getElementById("uname");
    var passwordInput = document.getElementById("upsd");
    var username = usernameInput.value;
    var password = passwordInput.value;
    console.log(username);
    console.log(password);

     var isSuccess1 = true;
     var exp = /\w{1,20}/;
     isSuccess1 = exp.test(username);
     if(isSuccess1 == false){
        var span = document.getElementById("username_error");
        span.innerHTML = "用户名不能为空";
      }

    var isSuccess2 = true;
    isSuccess2 = exp.test(password);
    if(isSuccess2 == false){
        var span = document.getElementById("password_error");
        span.innerHTML = "密码不能为空";
    }
    //表单验证失败，表单不提交
    return (isSuccess1 && isSuccess2);
}

在这里插入图片描述

城市联动

在这里插入图片描述
main.js

var provinceArray = new Array();
provinceArray[0] = new Array("北京市","东城|西城|崇文|宣武");
provinceArray[1] = new Array("上海市","黄埔|徐汇|长宁|静安");
provinceArray[2] = new Array("河北省","保定市|石家庄市|秦皇岛市|衡水市");
function load(){
    var provinceSelect = document.getElementById("provinceSelect");

    for(var i=0;i<provinceArray.length;i++){
        var option = document.createElement("option");
        option.innerHTML = provinceArray[i][0];
        provinceSelect.appendChild(option);
    }
}
function change(){
    var provinceSelect = document.getElementById("provinceSelect");
    var citySelect = document.getElementById("citySelect");
    //选中的index
    var selectedIndex = provinceSelect.selectedIndex;
    console.log(selectedIndex);

    //从选中的省份得到所有城市数据
    var allCity = provinceArray[selectedIndex][1];
    //切割成array
    var cityArray = allCity.split("|");
    citySelect.innerHTML = "<option>请选择城市</option>";
    //遍历
    for(var i=0;i<cityArray.length;i++){
        //创建option
        var option = document.createElement("option");
        //设置option内容
        option.innerHTML = cityArray[i];
        //把option放到citySelect上
        citySelect.appendChild(option);
    }
}

html

<html lang="en">
 <head>
  ......
  <title>Document</title>
     <script src="main.js" type="text/javascript"></script>
 </head>
 <body onload="load()">
  <select id="provinceSelect" onchange="change()">
  </select>
  <select id="citySelect">
  </select>
 </body>
</html>