JavaScript
一、什么是JavaScript？
脚本描述语言，网页交互特效，说白了，就是实现HTML实现不了的效果。(JavaScript是一种基于对象、事件驱动的简单脚本语言，嵌入在HTML文档中，由浏览器负责解释和执行，在网页上产生动态的显示效果并实现与用户交互功能。)

HTML:
超文本标记语言
CSS：
网页样式
JavaScript：
网页交互特效

二、为什么要使用JavaScript？
解决我们现在技术解决不了的问题，例如，表单及时验证，图片轮播...

三、语法：
<script type="text/javascript">

</script>

1、document.write("Hello!!");
在网页上输出Hello!!，其实这个相当于是：System.out.print();

2、在java中的流程控制，在javaScript中一样使用。

3、三种弹窗
a、alert(); ----用的比较多，测试
警告弹窗，只有内容和确定按钮

b、confirm();
提示窗口，有内容，确定和取消按钮，点击确定，返回true，点击取消
返回false；

c、prompt();
用户输入窗口，有提示，输入框，确定和取消按钮，点击确定，返回
文本框中的内容，点击取消，返回null

四、代码演示案例：

　　1、在页面中输出一千遍好好学习天天向上

 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>第二题</title>
 <script type="text/javascript">
 for(var i=1;i<=1000;i++){
 document.write("第"+i+"遍"+"好好学习，天天上当！！！<br/>");
 }
 </script>
 </head>

 <body>
 </body>
 </html>

 在页面中输出一千遍好好学习天天向上

　　2、实现计算器效果

 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>无标题文档</title>
 <script type="text/javascript">
 var num1 =window.prompt("1,加法；2、减法；3、乘法；4、除法；");
 var num2 =window.prompt("请输入第一个数字");
 var num3 =window.prompt("请输入第二个数字");
 var a =parseInt(num1);
 var b =parseInt(num2);
 var c =parseInt(num3);
 var d = 0;
 switch(a){
     case 1:
         d = b+c;
     break;
     case 2:
         d = b-c;
     break;
     case 3:
         d = b*c;
     break;
     case 4:
         d = b/c;
     break;
 }
 document.write("结果为："+d);
 </script>
 </head>

 <body>
 </body>
 </html>

 实现计算器效果

　　3、弹窗演示案例

 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>无标题文档</title>
 </head>
 <script type="text/javascript">
     //alert("123");//警告弹窗
     //window.alert("321");
     //var q = window.confirm("456");//带确定和取消的弹窗，点击确定，返回true，点击取消，返回false
     //document.write(q);
     //var a = window.prompt("请输入姓名：","小黑");//可以实现用户输入的弹窗，点击确定，返回输入框中的内容，点击取消，返回null
     //document.write(a);
     //var t = "";
     //while(t!="小黑"){
     //    t = window.prompt("请输入姓名：");
     //}
     var num = window.prompt("请输入数值1-9");
     if(num>1&&num<=9){
         for(var i = 1;i<=num;i++){
             for(var j = 1;j<=i;j++){
                 document.write("*");
             }
             document.write("<br/>");
         }
     }else{
         alert("请正确输入");
     }
 </script>
 <body>
 </body>
 </html>

 弹窗演示案例

4、综合演示案例

 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>无标题文档</title>

 </head>
 <script type="text/javascript">
     for(var i =1;i<=4;i++){
         for(var k = 3;k>=i;k--){
             document.write("&nbsp;&nbsp;");
         }
         for(var j = 1;j<=2*i-1;j++){
             document.write("*");
         }
         document.write("<br/>");
     }
     for(var i = 1;i<=3;i++){
         for(var k = 0;k<i;k++){
             document.write("&nbsp;&nbsp;");
         }
         for(var k = 3;k>=i;k--){
             document.write("*");
         }
         for(var k = 3;k>i;k--){
             document.write("*");
         }
         document.write("<br/>");
     }
     document.write("-----------------------我是分割线--输出1-100的累加值，跳过个位数为3的数字--------------<br/>");
     var sum = 0;
     for(var i = 1;i<=100;i++){
         if(i%10!=3){
             sum = sum + i;
         }
     }
     document.write("sum="+sum);
     document.write("<br/>-----------------------我是分割线--鸡兔同笼--------------<br/>");
     for(var ji = 0;ji<=24;ji++){
         var tu = 24-ji;
         if(ji*2+tu*4==60){
             document.write("鸡有"+ji+"只，兔有"+tu);
         }
     }
     document.write("<br/>-----------------------我是分割线--古典问题--------------<br/>");
     var start=1;
     var next=1;
     for(var i=3;i<13;i++){
         var temp=start+next;
         start=next;
         next=temp;

         document.writeln(next);
         }
 </script>
 <body>
 </body>

 综合演示案例

JavaScript基础（一）的更多相关文章

  1. JavaScript基础

    JavaScript基础 JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编写相应代码之,浏览器可以解释并做出相应的处 ...

  2. 一步步学习javascript基础篇（0）:开篇索引

    索引: 一步步学习javascript基础篇(1):基本概念 一步步学习javascript基础篇(2):作用域和作用域链 一步步学习javascript基础篇(3):Object.Function等 ...

  3. 前端之JavaScript基础

    前端之JavaScript基础 本节内容 JS概述 JS基础语法 JS循环控制 ECMA对象 BOM对象 DOM对象 1. JS概述 1.1. javascript历史 1992年Nombas开发出C ...

  4. 一步步学习javascript基础篇（3）：Object、Function等引用类型

    我们在<一步步学习javascript基础篇(1):基本概念>中简单的介绍了五种基本数据类型Undefined.Null.Boolean.Number和String.今天我们主要介绍下复杂 ...

  5. Javascript基础回顾 之(三) 面向对象

    本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Javascript的一些基本原理普遍存在这里或者 ...

  6. Javascript基础回顾 之(二) 作用域

    本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Javascript的一些基本原理普遍存在这里或者 ...

  7. Javascript基础回顾 之(一) 类型

    本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Javascript的一些基本原理普遍存在这里或者 ...

  8. JavaScript 基础回顾——对象

    JavaScript是基于对象的解释性语言,全部数据都是对象.在 JavaScript 中并没有 class 的概念,但是可以通过对象和类的模拟来实现面向对象编程. 1.对象 在JavaScript中 ...

  9. javascript基础01

    javascript基础01 Javascript能做些什么? 给予页面灵魂,让页面可以动起来,包括动态的数据,动态的标签,动态的样式等等. 如实现到轮播图.拖拽.放大镜等,而动态的数据就好比不像没有 ...

  10. javascript基础02

    javascript基础02 1.数据类型 数据类型的描述在上篇的扩展中有写到链接 由于ECMAScript数据类型具有动态性,因此的确没有再定义其他数据类型的必要.这句话很重要. 如果以后再数据类型 ...

随机推荐

  1. TCP/IP-UDP

    We read the world wrong but say that it deceives us. "我们看错了世界,却说世界欺骗了我们" 参考资料:TCP/IP入门经典 ( ...

  2. 《asp.net mvc3 高级编程》第四章 模型

    一,建立简单的Model 在Models文件夹上右击鼠标,选择“添加”,“类”,如下图所示: 建立三类相关联的类代码如下: public class Album { public virtual in ...

  3. Thinkphp 零散知识点(caa/js路径，引入第三方类，ajax返回，session/cookie)

    一.关于JS和CSS路径问题 1.找路径是从入口文件index.php来找的,而不是从文件本身所在位置来找, 因为我们访问时是访问的入口文件 2.在存放JS和CSS的时候可以放到public文件夹下 ...

  4. Joomla安装图文教程 （送 Joomla 中文语言包）

    1.首先 下载 Joomla  源程序 首页: http://www.joomla.org/download.html 下载: download 2.为论坛 创建数据库.进入cPanel面板,选择my ...

  5. tornado项目

    tornado项目之基于领域驱动模型架构设计的京东用户管理后台 本博文将一步步揭秘京东等大型网站的领域驱动模型,致力于让读者完全掌握这种网络架构中的“高富帅”. 一.预备知识: 1.接口: pytho ...

  6. mongodb 教程一

    mongodb是nosql(not only sql)的一种方式 .是对不同于传统的关系型数据库的数据库管理系统的统称. NoSQL - 代表着不仅仅是SQL- 没有声明性查询语言- 没有预定义的模式 ...

  7. OSSEC集合

    http://dcid.me/blog/2010/01/using-ossec-for-the-forensic-analysis-of-log-files/

  8. PYTHON--定期监测服务器端口，并将结果写入MYSQL

    定时监测服务器端口,然后将结果入写数据库. 监测用NC命令,入库就用PYTHON的MYSQL模块 再调一个基于函数的多线程... 妥妥的.. 是网上两个功能的合成.. 俺不生产代码,俺只是BAIDU的 ...

  9. CENTOS纯手工安装LAMP+PHPMYADMIN

    现在,安装这些确实越来越方便了. Installing Apache2 With PHP5 And MySQL Support On CentOS 6.4 (LAMP) 参考URL: http://w ...

  10. 官网的许多Mobile开发教程，Blog和示例代码

    http://docwiki.embarcadero.com/RADStudio/Seattle/en/Mobile_Tutorials:_Mobile_Application_Development ...