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. 完全用 GNU/Linux 工作(转）

    转自:http://www.chinaunix.net/old_jh/4/16102.html 看到一半,实在太长,但已觉得很好,转来分享一下. 完全用 GNU/Linux 工作 - 摈弃 Windo ...

  2. 原生JS 选项卡代码实现

    可实现同页面多个选项卡 效果图: 代码实现: HTML部分 <div class="main" id="tabs"> <div class=& ...

  3. JQUERY1.9学习笔记 之内容过滤器(四) parent选择器

    描述:选择至少包含一个子节点的元素(一个标签或是文本). 例:找出所有有子元素的td标签,包含文本. <!doctype html><html lang="en" ...

  4. 10个重要的Linux ps命令实战

    Linux作为Unix的衍生操作系统,Linux内建有查看当前进程的工具ps.这个工具能在命令行中使用. PS 命令是什么 查看它的man手册可以看到,ps命令能够给出当前系统中进程的快照.它能捕获系 ...

  5. [转] .NET 3.5中MSChart组件的ImageLocation属性含义

    在.NET程序/网站中如果要生成统计图表/图形,以前可以采用OWC(Office Web Components),如OfficeXP组件OWC10.Office2003组件OWC11.OWC采用COM ...

  6. sock_ntop等函数

    inet_ntop的一个基本问题是:它要求调用者传递一个指向某个二进制地址的指针, 而该地址通常包含在一个套接字地址结构中,这就要求调用者必须知道这个结构的格式和地址簇, 为了使用这个函数,我们必须为 ...

  7. js-ajax实现获取xmlHttp对象

    //获取xmlHttp对象 function createXMLHttp() { var xmlhttp; //对于大多数浏览器适用 if (window.XMLHttpRequest) { xmlh ...

  8. laravel框架——路由

    基本路由: Route::get('/', function () { return view('welcome'); }); Route::post('/', function () { retur ...

  9. Android调用Asp.net Web Service示例

    WebService代码: using System; using System.Collections.Generic; using System.Linq; using System.Web; u ...

  10. Keil C51中变量的使用

    引言 8051内核单片机是一种通用单片机,在国内占有较大的市场份额.在将C语言用于51内核单片机的研究方面,Keil公司做得最为成功.由于51内核单片机的存储结构的特殊性,Keil C51中变量的使用 ...