初次接触JS

    xiaoxiao2021-12-12  8

        一、准备阶段:

        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

    最新回复(0)