JavaScript 是脚本语言

JavaScript 是一种轻量级的编程语言。

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

JavaScript 用法

HTML 中的脚本必须位于 <script> 与 </script> 标签之间。

脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。

<script> 标签

如需在 HTML 页面中插入 JavaScript，请使用 <script> 标签。

<script> 和 </script> 会告诉 JavaScript 在何处开始和结束。

<script> 和 </script> 之间的代码行包含了 JavaScript

JavaScript 操作 HTML 元素

如需从 JavaScript 访问某个 HTML 元素，您可以使用 document.getElementById(id) 方法。

请使用 "id" 属性来标识 HTML 元素

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4.  
  5. <h1>我的第一个 Web 页面</h1>
  6.  
  7. <p id="demo">我的第一个段落</p>
  8.  
  9. <script>
  10. document.getElementById("demo").innerHTML="我的第一个JavaScript";  // .innerHTML 可以插入信息到HTML文档中
  11. </script>
  12.  
  13. </body>
  14. </html>

下面介绍一种document.write()， 可以向文档输出内容。

但是需要注意的是：如果在HTML文档已完成加载后再执行document.write(), 整个HTML页面都将被覆盖。就是说document.write()用于在整个HTML文档，输出内容将覆盖之前加载好的HTML页面。

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4.  
  5. <h1>我的第一个 Web 页面</h1>
  6.  
  7. <p>我的第一个段落。</p>
  8.  
  9. <button onclick="myFunction()">尝试一下</button>
  10.  
  11. <script>
  12. function myFunction()
  13. {
  14. document.write("噢！文档消失了。");
  15. }
  16. </script>
  17.  
  18. </body>
  19. </html>

下面这种情况除外，因为document.write()是与其他标签一起被加载到HTML页面的。而上面的document.write()是在HTML文档加载之后被调用，document.write()覆盖掉了原来HTML页面

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4.  
  5. <h1>我的第一个 Web 页面</h1>
  6.  
  7. <script>
  8. document.write("<p>我的第一个 JavaScript</p>");
  9. </script>
  10.  
  11. </body>
  12. </html>

JavaScript 变量

与代数一样，JavaScript 变量可用于存放值（比如 x=5）和表达式（比如 z=x+y）。

变量可以使用短名称（比如 x 和 y），也可以使用描述性更好的名称（比如 age, sum, totalvolume）。

  • 变量必须以字母开头
  • 变量也能以 $ 和 _ 符号开头（不过不推荐这么做）
  • 变量名称对大小写敏感（y 和 Y 是不同的变量）

声明（创建） JavaScript 变量

  1. var carname;   // 声明变量
  2. var carname="Volvo"; // 声明变量 且 赋值

一个好的编程习惯是，在代码开始处，统一对需要的变量进行声明。

JavaScript 数据类型

字符串（String）、数字(Number)、布尔(Boolean)、数组(Array)、对象(Object)、空（Null）、未定义（Undefined）。

  1. <script>
  2.  
  3. // JavaScript 字符串
  4.  
  5. var answer="It's alright";
  6. var answer="He is called 'Johnny'";
  7. var answer='He is called "Johnny"';
  8.  
  9. // JavaScript 数字
  10.  
  11. var x1=34.00;
  12. var x2=34;
  13. var y=123e5;
  14. var z=123e-5;
  15.  
  16. // JavaScript 布尔
  17.  
  18. var x=true;
  19. var y=false;
  20.  
  21. // JavaScript 数组
  22.  
  23. var cars=new Array();
  24. cars[0]="Saab";
  25. cars[1]="Volvo";
  26. cars[2]="BMW";
  27. // 或者声明和赋值一起
  28. var cars=new Array("Saab","Volvo","BMW");
  29. // 或者
  30. var cars=["Saab","Volvo","BMW"];
  31.  
  32. // JavaScript 对象
  33. var person={
  34.     firstname : "John",
  35.     lastname  : "Doe",
  36.     id        :  5566
  37.     };
  38. // 访问对象
  39. document.write(person.lastname + "<br>");    // 输出 Doe
  40. document.write(person["lastname"] + "<br>");  // 输出 Doe
  41.  
  42. // Undefined 和 Null
  43. var person;
  44. var car="Volvo";
  45. document.write(person + "<br>");   // 输出 undefined
  46. document.write(car + "<br>");       // 输出 Volvo
  47. var car=null
  48. document.write(car + "<br>");      // 输出 null
  49.  
  50. </script>

JavaScript 对象

创建 JavaScript 对象

  1. <script>
  2. var person=new Object();
  3. person.firstname="John";
  4. person.lastname="Doe";
  5. person.age=50;
  6. person.eyecolor="blue";
  7. </script>

访问对象的属性

  1. objectName.propertyName
  2.  
  3. var message="Hello World!";  // 创建一个字符串对象
  4. var x=message.length;      // 访问字符串对象属性

访问对象的方法

  1. objectName.methodName()
  2.  
  3. var message="Hello world!";
  4. var x=message.toUpperCase();

JavaScript 函数

JavaScript 函数语法

  1. function functionname()
  2. {
  3. 执行代码
  4. }

调用带参数的函数

  1. // 格式 myFunction(argument1,argument2)
  2.  
  3. function myFunction(var1,var2)
  4. {
  5. 代码
  6. }

带有返回值的函数

  1. function myFunction()
  2. {
  3. var x=5;
  4. return x;
  5. }

JavaScript 表单验证

JavaScript 表单验证

JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。

表单数据经常需要使用Javascript来验证其正确性：

  • 验证表单数据是否为空?
  • 验证输入是否是一个正确的email地址?
  • 验证日期是否输入正确?
  • 验证表单输入内容是否为数字型?

必填（或必选）项目

  1. <html>
  2. <head>
  3. <script>
  4. function validateForm()
  5. {
  6. var x=document.forms["myForm"]["fname"].value;   // 根据form name 找到表单，得到表单的值
  7. if (x==null || x=="")
  8.   {
  9.   alert("姓必须填写");
  10.   return false;
  11.   }
  12. }
  13. </script>
  14. </head>
  15. <body>
  16. <form name="myForm" action="demo-form.php" onsubmit="return validateForm()" method="post">
  17. 姓: <input type="text" name="fname">
  18. <input type="submit" value="提交">
  19. </form>
  20. </body>
  21. </html>

JavaScript 初学备忘录的更多相关文章

  1. Javascript初学篇章_5(对象)

    对象 Javascript是一种面向对象的语言,因此可以使用面向对象的思想来进行javascript程序设计对象就是由一些彼此相关的属性和方法集合在一起而构成的一个数据实体.举个例子,一只猫是个对象, ...

  2. Javascript初学篇章_4(循环与函数)

    七.循环语句 1.While 语法: while (exp){ //statements; } 说明: while (变量<=结束值){ 需执行的代码 } 例: var i=0; while(i ...

  3. Javascript初学篇章_3(注释/if/switch)

    五.javascript的注释 // 单行注释 /* …*/ 多行注释 注:多行注释不能互相嵌套 六.程序流程控制 一.条件语句 if 语法: if(condition) statements1 el ...

  4. Javascript初学篇章_1（概念/数据类型）

    Javascript是一门脚本语言,主要由浏览器来执行.它可以说是页面的灵魂,让页面活过来.与之前学的HTML5+CSS样式的不同之处就在于,JS能让静态网页成为一个动态网页,实现与用户的互动. Ja ...

  5. javascript设计模式--备忘录模式（Memento）

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. JavaScript初学

    今天学习了js的基础知识,自我归纳如下: 第一部分:js变量的声明和引入 js声明1-直接声明js代码块,使用<script></script>  2-引入外部声明,即创建一个 ...

  7. javascript初学笔记

    基本语句 赋值条件循环语句 javascript异常处理语句 trycatchfinally语句 Error对象 throw语句 函数 定义 调用 嵌套函数 函数的嵌套定义 内置函数 匿名函数和Fun ...

  8. 19 01 08 javascript 初学

    变量 JavaScript 是一种弱类型语言,javascript的变量类型由它的值来决定. 定义变量需要用关键字 'var' 变量类型 5种基本数据类型:1.number 数字类型2.string ...

  9. Javascript初学篇章_8（事件）

    事件 HTML 事件是发生在 HTML 元素上的事情.例如用户点击按钮时,点击也是一个事件.事件可以用于处理表单验证,用户输入,用户行为及浏览器动作,如: 页面加载时触发事件 页面关闭时触发事件 用户 ...

随机推荐

  1. Javascript的构造函数和constructor属性

    原型链 function Foo() { this.value = 42;}Foo.prototype = { method: function() {}}; function Bar() {} // ...

  2. 很小的一个函数执行时间调试器Timer

    对于函数的执行性能(这里主要考虑执行时间,所耗内存暂不考虑),这里写了一个简单的类Timer,用于量化函数执行所耗时间. 整体思路很简单,就是new Date()的时间差值.我仅仅了做了一层简单的封装 ...

  3. mybatis mapper调用mysql存储过程

    mybatis版本:3.4.4 存储过程 1.mapper.xml文件中配置相关的sql语句. <select id="callTest" statementType=&qu ...

  4. JavaMail 邮件发送

    jar包部署 /** * 通过SMTP进行邮件集成 */ public class CmpSendMail { // 邮件发送服务器主机 private final static String HOS ...

  5. springboot项目作为war包运行

    一.首先是pom文件中设置打成war包 < packaging>war< /packaging> 二.然后是修改依赖: <dependency> <group ...

  6. 初学者需要IPython 与 Jupyter Notebook 吗?

    ipython 是 jupyter notebook的前身并拥有ipython的全部功能         jupyter拥有 cell, markdown 整合的功能, 能同时运行代码, 而且是多组的 ...

  7. 关于输入框在谷歌浏览器 ie 浏览器中 黄色背景的去除

    谷歌有自己对input 的填充色 加上下面的css 就可以了 input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white ins ...

  8. MySQL基于mysqldump快速搭建从库

    MySQL主从搭建总的来说大致分为3个步骤: 1. 为主从实例添加复制所需参数以及创建复制用的账户 2. 需要 […]

  9. [转载]hive中order by,sort by, distribute by, cluster by作用以及用法

    1. order by     Hive中的order by跟传统的sql语言中的order by作用是一样的,会对查询的结果做一次全局排序,所以说,只有hive的sql中制定了order by所有的 ...

  10. Jquery ajax动态更新下拉列表的内容

    $("#book_id").change(function(){ $book_id=$(this).children('option:selected').val(); //ale ...