zoukankan      html  css  js  c++  java
  • JavaScript学习笔记--基础知识

    1. javaScript能做什么?
    (1)写入HTML输出
    document.write("<h1>This is a heading</h1>");
    注意:只能在HTML输出中使用document.write。如果在文档加载后使用该方法,会覆盖整个文档。
    (2)对事件作出反应
    <button type="button" onclick="alert('welcome!')">点击这里</button>
    (3)改变HTML内容
    x=document.getElementById("demo");
    x.innerHTML="Hello JavaScript";
    (4)改变HTML元素的属性(HTML图像)
    function changeImage()
    {
    element=document.getElementById('myimage')
    if (element.src.match("bulbon"))
    {
    element.src="/i/eg_bulboff.gif";
    }
    else
    {
    element.src="/i/eg_bulbon.gif";
    }
    }
    (5)改变HTML样式
    x=document.getElementById("demo");
    x.style.color="#ff0000"
    (6)验证输入
     
    2. javaScript脚本加载的位置
    (1)HTML页面的<body>和<head>部分中
    注意,HTML中的脚本必须位于<script>与</script>之间
    (2)将脚本保存到外部文件中
    如需使用外部文件,请在<script>标签的“src”属性中设置该.js文件
    外部脚本不能包含<script>标签。
     
    3. javaScript语句的注意点
    (1)对大小写敏感
    (2)自动忽略多余的空格
    (3)在文本字符串中使用反斜杠对代码行进行换行
    (4)单行注释(//)多行注释(/* */)
     
    4. javaScript变量的注意点
    (1)对大小写敏感
    (2)必须以字母开头,但是也可以以$和_开头
    (3)通过“var”来申明变量
     
    5. javaScript数据类型
    (1)javaScript拥有动态类型
    (2)字符串:单引号或者双引号
    (3)数字:带小数点和不带小数点,科学计数法
    (4)布尔类型:ture false
    (5)数组:var cars=new Array();
    (6)对象:由花括号分隔,。在括号内部,对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔
    对象属性有两种寻址方式:
    name=person.lastname;
    name=person["lastname"];
     
    6. javaScript对象
    属性是与对象相关的值。
    方法是能够在对象上执行的动作。
    (1)创建 javaScript对象
    JavaScript 中的几乎所有事务都是对象:字符串、数字、数组、日期、函数,等等。
    你也可以创建自己的对象。
    person=new Object(); person.firstname="Bill"; person.lastname="Gates"; person.age=56; person.eyecolor="blue";
    (2)访问对象的属性
    objectNamepropertyName
    var message="Hello World!"; var x=message.length;
    (3)访问对象的方法
    objectNamemethodNamevar message="Hello world!"; var x=message.toUpperCase();
     
    7. javaScript函数

    (1)函数语法
    function functionname()
    {
    这里是要执行的代码
    }
    (2)带参数的函数
    function myFunction(var1,var2)
    {
    这里是要执行的代码
    }
    (3)带有返回值的函数
    function myFunction()
    {
    var x=5;
    return x;
    }
    若仅仅希望退出函数时 ,也可使用 return 语句
    function myFunction(a,b)
    {
    if (a>b)
    {
    return;
    }
    x=a+b
    }

     
    8. javaScript运算符
    (1)算术运算符:+ - * / % ++ --
    (2)赋值运算符:= += -= *= /= %=
    (3)比较运算符:
    (4)逻辑运算符
    (5)条件运算符:
     
    9. javaScript判断语句
    • if 语句 - 只有当指定条件为 true 时,使用该语句来执行代码
    • if...else 语句 - 当条件为 true 时执行代码,当条件为 false 时执行其他代码
    • if...else if....else 语句 - 使用该语句来选择多个代码块之一来执行
    • switch 语句 - 使用该语句来选择多个代码块之一来执行

    for/in - 循环遍历对象的属性

    var person={fname:"John",lname:"Doe",age:25};
    for (x in person)
    {
    txt=txt + person[x];
    }
    运行结果:JohnDoe25

    10. javaScript错误-Throw、Try和Catch

    try 语句测试代码块的错误。
    catch 语句处理错误。
    throw 语句创建自定义错误。

    (1)JavaScript 测试和捕捉
    try 语句允许我们定义在执行时进行错误测试的代码块。
    catch 语句允许我们定义当 try 代码块发生错误时,所执行的代码块。
    JavaScript 语句 try 和 catch 是成对出现的。
    (2)Throw 语句
    throw 语句允许我们创建自定义错误。
    正确的技术术语是:创建或抛出异常(exception)。
    如果把 throw 与 try 和 catch 一起使用,那么您能够控制程序流,并生成自定义的错误消息。
    <script>
    function myFunction()
    {
    try
    {
    var x=document.getElementById("demo").value;
    if(x=="") throw "empty";
    if(isNaN(x)) throw "not a number";
    if(x>10) throw "too high";
    if(x<5) throw "too low";
    }
    catch(err)
    {
    var y=document.getElementById("mess");
    y.innerHTML="Error: " + err + ".";
    }
    }
    </script>

    11. javaScript表单验证
    JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。
    JavaScript 表单验证
    JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。
    被 JavaScript 验证的这些典型的表单数据有:
    ● 用户是否已填写表单中的必填项目?
    ● 用户输入的邮件地址是否合法?
    ● 用户是否已输入合法的日期?
    ● 用户是否在数据域 (numeric field) 中输入了文本?

    (1)必填(或必选)项目
    <html>
    <head>
    <script type="text/javascript">
    function validate_required(field,alerttxt)
    {
    with (field)
    {
    if (value==null||value=="")
    {alert(alerttxt);return false}
    else {return true}
    }
    }

    function validate_form(thisform)
    {
    with (thisform)
    {
    if (validate_required(email,"Email must be filled out!")==false)
    {email.focus();return false}
    }
    }
    </script>
    </head>
    <body>
    <form action="submitpage.htm" onsubmit="return validate_form(this)" method="post">
    Email: <input type="text" name="email" size="30">
    <input type="submit" value="Submit">
    </form>
    </body>
    </html>

    (2)E-mail验证
    意思就是说,输入的数据必须包含 @ 符号和点号(.)。同时,@ 不可以是邮件地址的首字符,并且 @ 之后需有至少一个点
    <html>
    <head>
    <script type="text/javascript">
    function validate_email(field,alerttxt)
    {
    with (field)
    {
    apos=value.indexOf("@")
    dotpos=value.lastIndexOf(".")
    if (apos<1||dotpos-apos<2)
    {alert(alerttxt);return false}
    else {return true}
    }
    }
    function validate_form(thisform)
    {
    with (thisform)
    {
    if (validate_email(email,"Not a valid e-mail address!")==false)
    {email.focus();return false}
    }
    }
    </script>
    </head>
    <body>
    <form action="submitpage.htm"onsubmit="return validate_form(this);" method="post">
    Email: <input type="text" name="email" size="30">
    <input type="submit" value="Submit">
    </form>
    </body>
    </html>

    说明:
    with(field){};设定作用域
    focus() 方法用于给予该元素焦点。这样用户不必点击它,就能编辑显示的文本了。

    【学习网站】W3school

  • 相关阅读:
    media query 开发总结
    整屏滚动
    移动端reset样式
    中国天气网 城市代码 sql语句
    php文章tag标签的增删
    oracle的分号和斜杠/
    php 操作 oracle lob 数据2
    php 操作 oracle lob 数据
    oracle创建用户
    php进度条
  • 原文地址:https://www.cnblogs.com/mmmaolj/p/5976721.html
Copyright © 2011-2022 走看看