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. Eclipse代码注释模板修改

    /** * @ClassName: ${type_name} * @author: <font color="red"><b>ZF</b>< ...

  2. Oracle Pl/SQL编程基础

    Pl/SQL简介 提高应用程序的运行性能, 提供模块化的程序设计, 自定义标示符, 具有过程语言控制结构, 良好的兼容性, 处理运行错误. Pl/SQL语言基础 sql是关系数据库的基本操作语言. s ...

  3. JQUERY1.9学习笔记 之基本过滤器(八) 最后元素选择器

    最后元素选择器 jQuery( ":last" ) 描述:选择与之匹配的最后元素. 例:选择表格的最后一行. <!DOCTYPE html><html lang= ...

  4. 蟠桃记 AC 杭电

    蟠桃记 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submis ...

  5. UVA 572 Oil Deposits油田（DFS求连通块）

    UVA 572     DFS(floodfill)  用DFS求连通块 Time Limit:1000MS     Memory Limit:65536KB     64bit IO Format: ...

  6. Python 可变对象和不可变对象

    具体可以看这里:http://thomaschen2011.iteye.com/blog/1441254 不可变对象:int,string,float,tuple 可变对象   :list,dicti ...

  7. 编写优美的GTest测试案例

    http://www.cnblogs.com/coderzh/archive/2010/01/09/beautiful-testcase.html 使用gtest也有很长一段时间了,这期间也积累了一些 ...

  8. 生成MyEclipse6.5&7.5&8.0注册码的java源码

    //运行后即可得到注册码 import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamRe ...

  9. php通过curl实现bigpipe

    BigPipe是facebook发明的一种页面加载技术.其实也不是什么新技术了,也有很多文章进行说明.但是在网上,具体讲如何使用php实现bigpipe的文章很少,并且有些文章还不很准确.bigpip ...

  10. 最近国外很拉风的,,基于.net 的一个手表

    site:http://agentwatches.com/ 这个项目是一个国外工作室,筹集资金 创立的. 直接用c# 代码编译显示在手机上.能和智能手机通信等. 并且是开源的. 很酷 其次.它提供了. ...