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. jQuery 如何创建基本插件（翻译）

    有时候,你希望有一块功能在整个代码当中都可以使用.例如,你可能想要有一个单一的方法可以在jQuery选择器上进行调用,用于处理该选择器上的一系列操作.又或许你编写了一个十分有用的工具函数,并希望能够简 ...

  2. JQuery验证input

    jsp中表单如下: <form method="post" action="AddPlayer"> <div class = "on ...

  3. laravel观察者模式

    laravel观察者模式: 事件

  4. php 带cookie采集某页面

    <?php error_reporting(0); define("temp_dir", dirname(__FILE__)."/Public/"); d ...

  5. python学习第十六天 --继承进阶篇

    这一章节主要讲解面向对象高级编程->继承进阶篇,包括类多继承介绍和继承经典类和新式类属性的查找顺序不同之处. 多继承 上一章节我们讲到继承,子类继承父类,可以拥有父类的属性和方法,也可以进行扩展 ...

  6. 死亡的协议--- Pieter Hintjens （ZeroMQ作者）

    过去几年中用zeromq写过几个系统系统.对ZeroMQ强大和灵活印象非常深刻.在阅读zeromq guide文档时候.发现作者整理各种通信模式非常经典和实用,可以作为分布式通信的教科书来看.第一次见 ...

  7. .net FrameWork4.0安装未成功

    安装了一上午的.net framework 4.0,各种失败,查了好多答案,各种不靠谱,最后终于找到答案了 和Windows Update有关系,给目录名重命名一下再次安装,即安装成功了! 下载地址: ...

  8. elasticsearch常用的插件

    deb 安装/usr/share/elasticsearch/   https://github.com/hangxin1940/elasticsearch-cn-out-of-box 包可以参考   ...

  9. 个人.net学习规划路线

  10. hdu 4407 Sum

    http://acm.hdu.edu.cn/showproblem.php?pid=4407 题意:给定初始n个数1..n,两个操作,①1 x y p  询问第x个数到第y个数中与p互质的数的和; ② ...