zoukankan      html  css  js  c++  java
  • Js基础学习

    1,在head中时,所代表的functions只加载而不执行,执行是在某一事件触发后才开始。

    2,在body中时,直接加载并执行

                               典型的区别:  如果有不在函数中的执行语句,比如变量初始化,如果在head中就不会执行。

    代码如下:


    //页面中写入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"));

  • 相关阅读:
    ZKW费用流修正
    BZOJ 1060 [ZJOI2007]时态同步
    BZOJ 1059 [ZJOI2007]矩阵游戏
    腾讯WEB前端开发面试经历,一面二面HR面,面面不到!
    亲历腾讯WEB前端开发三轮面试经历及面试题
    2015大型互联网公司校招都开始了,薪资你准备好了嘛?
    10款最好的 Bootstrap 3.0 免费主题和模板
    python3之urllib基础
    python3下应用requests
    python心得二(编码问题)
  • 原文地址:https://www.cnblogs.com/klb561/p/10160339.html
Copyright © 2011-2022 走看看