zoukankan      html  css  js  c++  java
  • Js菜鸟学习

    ()

    1

    代码如下:


    //页面中写入html内容
    document.write("<h1>Hello World!</h1>")


    2

    代码如下:


    //为了防止不支持 JavaScript 的浏览器把js当作为页面的内容来显示
    //注释行末尾的两个正斜杠是 JavaScript 的注释符号,它会阻止 JavaScript 编译器对这一行的编译。
    <script type="text/javascript">
    <!--
    document.write("Hello World!");
    //-->
    </script>


    3

    代码如下:


    //onload事件的多种写法
    //第一种通过body标签加入onload事件
    <script type="text/javascript">
    function message(){ alert("该提示框是通过 onload 事件调用的。");}
    </script>
    <body onload="message()">
    //第二种直接用window函数调用onload事件
    <script type="text/javascript" language="javascript">
    window.onload=message;
    function message(){ alert("该提示框是通过 onload 事件调用的。"); }
    </script>


    4
    //JavaScript 放置的位置
    当页面载入时,会执行位于 body 部分的 JavaScript。(直接执行)
    当被调用时,位于 head 部分的 JavaScript 才会被执行。
    head 部分
    包含函数的脚本位于文档的 head 部分。这样我们就可以确保在调用函数前,脚本已经载入了。

    5.
    //分号的作用
    //分号是可选的(根据 JavaScript 标准),浏览器把行末作为语句的结尾,通过使用分号,可以在一行中写多条语句。

    6。
    //JavaScript 变量名称的规则:
    变量对大小写敏感(y 和 Y 是两个不同的变量)
    变量必须以字母或下划线开始

    7。
    //变量的声明
    如果您所赋值的变量还未进行过声明,该变量会自动声明。
    例:
    x=5; carname="Volvo";
    与后面的这些语句的效果相同:var x=5; var carname="Volvo";

    8。
    //比较运算符
    运算符 描述 例子
    === 全等(值和类型) x===5 为 true; x==="5" 为 false

    9。
    //条件运算符(三目运算符)
    JavaScript 还包含了基于某些条件对变量进行赋值的条件运算符。
    name=("liuhuan"=="LH")?"刘欢":"歌星";


    10。
    //获得当前系统时间(小时数)
    var d = new Date()
    var time = d.getHours()

    11。
    //随机数
    var num=Math.random();
    产生的伪随机数介于 0 和 1 之间(含 0,不含 1),也就是,返回值可能为0,但总是小于1。在第一次加载 JScript 时随机数发

    生器自动产生 。

    12。
    //获取今天的星期数(星期日为0,星期1-6为1-6)
    var d = new Date()
    theDay=d.getDay()

    13。
    //按钮的触发事件
    <input type="button" onclick="disp_alert()" value="显示警告框" />

    14。
    //弹出框内容换行
    alert("再次向您问好!在这里,我们向您演示" + ' ' + "如何向警告框添加折行。")

    15.
    //确认框(删除方法)
    //confirm("文本")
    <script type="text/javascript">
    function show_confirm()
    {
    var r=confirm("确认删除?");
    if (r==true) {
    alert("删除成功!");
    }
    else{
    alert("删除失败!");
    }
    }
    </script>

    16.
    //于用户交互的弹出框(可输入文字的提示框)
    //prompt("文本","默认值")
    <script type="text/javascript">
    function disp_prompt()
    {
    var name=prompt("请输入您的名字","Bill Gates")
    if (name!=null && name!=""){
    document.write("你好!" + name + " 今天过得怎么样?")
    }
    }
    </script>

    17。
    //带有参数并返回值的函数
    <head>
    <script type="text/javascript">
    function product(a,b)
    {
    return a*b;
    }
    </script>
    </head>
    <body>
    <script type="text/javascript">
    document.write(product(6,5))
    </script>
    </body>

    18。
    //for循环 (本例中动态生成html中的h标签)
    <body>
    <script type="text/javascript">
    for (i = 1; i <= 6; i++){
    document.write("<h" + i + ">这是标题 " + i)
    document.write("</h" + i + ">")
    }
    </script>
    </body>

    19。
    //break跳出语句
    <script type="text/javascript">
    var i=0
    for (i=0;i<=10;i++){
    if (i==3){break}
    document.write("数字是 " + i)
    document.write("<br />")
    }
    </script>
    <p>解释:循环会在 i=3 时中断。</p>


    20。
    //continue跳出语句
    <script type="text/javascript">
    var i=0
    for (i=0;i<=10;i++){
    if (i==3){continue}
    document.write("数字是 " + i)
    document.write("<br />")
    }
    </script>
    <p>解释:当 i=3 时,会中断循环,并从下一个值开始继续循环。</p>
    值为:01245678910

    21。
    //for in循环(相当于.net中的foreach循环)
    <html>
    <body>
    <script type="text/javascript">
    var x
    var mycars = new Array()
    mycars[0] = "宝马"
    mycars[1] = "奔驰"
    mycars[2] = "宾利"

    for (x in mycars)
    {
    document.write("x的值为"+x+ "<br />");
    document.write(mycars[x] + "<br />")
    }
    </script>
    </body>
    </html>


    22。
    //javascript事件
    onload 某个页面或图像被完成加载 //页面加载
    onunload 用户退出页面

    onfocus 元素获得焦点
    onblur 元素失去焦点 //表单验证
    onchange 用户改变域的内容
    onreset 重置按钮被点击
    onsubmit 提交按钮被点击 //用于在提交表单之前验证所有的表单域。
    例如:
    (当用户单击表单中的确认按钮时,checkForm() 函数就会被调用。checkForm() 函数的返回值是 bool类型,如果返回值为true,则

    提交表单,反之取消提交。)
    <form method="post" action="xxx.htm" onsubmit="return checkForm()">

    onkeydown 某个键盘的键被按下
    onkeypress 某个键盘的键被按下或按住 //键盘操作
    onkeyup 某个键盘的键被松开

    onclick 鼠标点击某个对象
    ondblclick 鼠标双击某个对象
    onmousedown 某个鼠标按键被按下 //鼠标操作
    onmousemove 鼠标被移动
    onmouseout 鼠标从某元素移开
    onmouseover 鼠标被移到某元素之上
    onmouseup 某个鼠标按键被松开

    onabort 图像加载被中断
    onerror 当加载文档或图像时发生某个错误

    onresize 窗口或框架被调整尺寸
    onselect 文本被选定

    23。
    //js中的错误提示 err.description及其try...catch 语句
    例如:
    <script type="text/javascript">
    var txt=""
    function message(){
    try{
    adddlert("Welcome guest!")
    }
    catch(err){
    txt="本页中存在错误。 "
    txt+="错误描述:" + err.description + " "
    txt+="点击“确定”继续。 "
    alert(txt);
    }
    }
    </script>

    24。
    //带有确认框的 try...catch 语句
    <head>
    <script type="text/javascript">
    var txt=""
    function message(){
    try{
    adddlert("Welcome guest!")
    }
    catch(err){
    txt="本页中存在错误。 "
    txt+="点击“确定”继续查看本页, "
    txt+="点击“取消”返回首页。 "
    if(!confirm(txt))
    {
    document.location.href="../index.html"
    }
    }
    }
    </script>
    </head>
    <body>
    <input type="button" value="查看消息" onclick="message()" />
    </body>


    25。
    //创建 exception(异常或错误)。(配合try...catch语句使用)
    例如:
    <script type="text/javascript">
    var x=prompt("请输入 0 至 10 之间的数:","")
    try{
    if(x>10)
    throw "Err1"
    else if(x<0)
    throw "Err2"
    else if(isNaN(x))
    throw "Err3"
    }
    catch(er){
    if(er=="Err1")
    alert("错误!该值太大!")
    if(er == "Err2")
    alert("错误!该值太小!")
    if(er == "Err3")
    alert("错误!该值不是数字!")
    }
    </script>


    26。
    //return true和return true的用法
    (它可以返回一个bool型的参数,继续用于判断)
    function jiance(msg,url,l){
    alert("你确定吗?")
    return true
    }
    function jieguo(){
    if(jiance()){
    alert("是");
    }
    else{
    alert("否");
    }
    }

    27.
    //onerror 事件
    <html><head>
    <script type="text/javascript">
    //当出现错误时触发onerror事件
    onerror=handleErr;
    var txt=""
    function handleErr(msg,url,l){
    txt="本页中存在错误。 "
    txt+="错误:" + msg + " "
    txt+="URL: " + url + " "
    txt+="行:" + l + " "
    txt+="点击“确定”继续。 "
    alert(txt)
    return true
    }
    function message(){
    adddlert("确定吗?")
    }
    </script>
    </head><body>
    <input type="button" value="查看消息" onclick="message()" />
    </body></html>


    28。
    //JavaScript 中使用反斜杠来向文本字符串添加特殊字符。
    例如:
    var txt="We are the so-called "Vikings" from the north."
    document.write(txt)

    29。
    //javascript注意事项
    1。JavaScript 对大小写敏感
    2。JavaScript 会忽略多余的空格
    3。在编写代码时可以使用反斜杠进行换行
    例:
    document.write("Hello

    World!");

    (二)

    1.  
    //使用变量的属性
    <script type="text/javascript">
    var txt="Hello World!"
    document.write(txt.length)
    </script>


    2。
    //把字符串中的所有字母都被转化为大写字母。
    <script type="text/javascript">
    var str="Hello world!"
    document.write(str.toUpperCase())
    </script>


    3。
    //js中个变量添加超链接
    <script type="text/javascript">
    var txt="Hello World!"
    document.write("<p>超链接为: " + txt.link("http://www.w3school.com.cn") + "</p>")
    </script>

    4。
    //indexOf方法(定位字符串中某一个指定的字符首次出现的位置。如果没有查到返回-1,区分大小写)
    <script type="text/javascript">
    var str="Hello world!"
    document.write(str.indexOf("Hello") + "<br />") //1
    document.write(str.indexOf("World") + "<br />") //-1
    document.write(str.indexOf("world")) //6
    </script>

    5。
    //match() 方法
    //使用 match() 来查找字符串中特定的字符,并且如果找到的话,则返回这个字符。
    <script type="text/javascript">
    var str="Hello world!"
    document.write(str.match("world") + "<br />") //world
    document.write(str.match("World") + "<br />") //null
    document.write(str.match("worlld") + "<br />") //null
    document.write(str.match("world!")) //world!
    </script>


    6。
    //replace() 方法在字符串中用某些字符替换另一些字符。
    var str="Visit Microsoft!"
    document.write(str.replace("Microsoft","W3School"))


    7.
    //合并两个数组
    <script type="text/javascript">
    var arr = new Array(3)
    arr[0] = "George"
    arr[1] = "John"
    arr[2] = "Thomas"
    var arr2 = new Array(3)
    arr2[0] = "James"
    arr2[1] = "Adrew"
    arr2[2] = "Martin"
    document.write(arr.concat(arr2))
    </script>

    ()

    1.js正则表达式(RegExp对象)
    RegExp 对象有 3 个方法:test()、exec() 以及 compile()。
    ①test()方法
    //test() 方法检索字符串中的指定值。返回值是 true 或 false。
    var patt1=new RegExp("e");
    document.write(patt1.test("The best things in life are free"));
    ②exec()方法
    //exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配,则返回 null。
    var patt1=new RegExp("e");
    document.write(patt1.exec("The best things in life are free"));

  • 相关阅读:
    CODING x 百果园 _ 水果零售龙头迈出 DevOps 体系建设第一步
    Nocalhost 亮相 CD Foundation 国内首届 Meetup,Keith Chan 将出席致辞
    做云原生时代标准化工具,实现高效云上研发工作流
    打造数字化软件工厂 —— 一站式 DevOps 平台全景解读
    WePack —— 助力企业渐进式 DevOps 转型
    CODING Compass —— 打造行云流水般的软件工厂
    Nocalhost —— 让云原生开发回归原始而又简单
    CODING 代码资产安全系列之 —— 构建全链路安全能力,守护代码资产安全
    Nocalhost:云原生开发新体验
    使用 Nocalhost 开发 Kubernetes 中的 APISIX Ingress Controller
  • 原文地址:https://www.cnblogs.com/lgx5/p/5827941.html
Copyright © 2011-2022 走看看