JavaScript基础(一)
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(" "); } 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(" "); } 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基础(一)的更多相关文章
- JavaScript基础
JavaScript基础 JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编写相应代码之,浏览器可以解释并做出相应的处 ...
- 一步步学习javascript基础篇(0):开篇索引
索引: 一步步学习javascript基础篇(1):基本概念 一步步学习javascript基础篇(2):作用域和作用域链 一步步学习javascript基础篇(3):Object.Function等 ...
- 前端之JavaScript基础
前端之JavaScript基础 本节内容 JS概述 JS基础语法 JS循环控制 ECMA对象 BOM对象 DOM对象 1. JS概述 1.1. javascript历史 1992年Nombas开发出C ...
- 一步步学习javascript基础篇(3):Object、Function等引用类型
我们在<一步步学习javascript基础篇(1):基本概念>中简单的介绍了五种基本数据类型Undefined.Null.Boolean.Number和String.今天我们主要介绍下复杂 ...
- Javascript基础回顾 之(三) 面向对象
本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Javascript的一些基本原理普遍存在这里或者 ...
- Javascript基础回顾 之(二) 作用域
本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Javascript的一些基本原理普遍存在这里或者 ...
- Javascript基础回顾 之(一) 类型
本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Javascript的一些基本原理普遍存在这里或者 ...
- JavaScript 基础回顾——对象
JavaScript是基于对象的解释性语言,全部数据都是对象.在 JavaScript 中并没有 class 的概念,但是可以通过对象和类的模拟来实现面向对象编程. 1.对象 在JavaScript中 ...
- javascript基础01
javascript基础01 Javascript能做些什么? 给予页面灵魂,让页面可以动起来,包括动态的数据,动态的标签,动态的样式等等. 如实现到轮播图.拖拽.放大镜等,而动态的数据就好比不像没有 ...
- javascript基础02
javascript基础02 1.数据类型 数据类型的描述在上篇的扩展中有写到链接 由于ECMAScript数据类型具有动态性,因此的确没有再定义其他数据类型的必要.这句话很重要. 如果以后再数据类型 ...
随机推荐
- 142 Linked List Cycle II(如果链表有环,找到入口结点Medium)
题目意思:如果有环,返回入口结点 思路:先判断有没环,再计算环的结点数,然后p1指向头,p2往后移结点次数,p1.p2相遇为入口结点 ps:还是利用指针间距这个思路 /** * Definition ...
- mysql hash索引优化
创建表 CREATE TABLE `t1` ( `id` int(11) NOT NULL AUTO_INCREMENT, `msg` varchar(20) NOT NULL DEFAULT ' ...
- php cookie不刷新及时生效的实现代码
<?php /** * 不刷新 cookie及时生效 */ cookie("mycookie","cookievalue",time()+60); coo ...
- shell脚本中的括号和实例
1.单圆括号和双圆括号 “双圆括号”命令允许将高级的数学表达式放入比较中.格式如下: (( expression )) 除了 test命令(if-then [])使用的标准数学运算符外, 双圆括号还支 ...
- 探究Android SQLite3多线程
最近做项目时在多线程读写数据库时抛出了异常,这自然是我对SQlite3有理解不到位的地方,所以事后仔细探究了一番. 关于getWriteableDataBase()和getReadableDataba ...
- C程序设计语言练习题1-23
练习1-23 编写一个删除C语言程序中所有的注释语句.要正确处理带引号的字符串与字符常量.在C语言中,注释不能嵌套. 代码如下: #include <stdio.h> // 包含标准库的信 ...
- Codeforces Round #313 A Currency System in Geraldion
A Currency System in Geraldion Time Limit:2000MS Memory Limit:262144KB 64bit IO Format:%I64 ...
- USB方向
Because the host is always the bus master, it is easy to remember USB direction: OUT means from the ...
- 尽历磨难,搞定OPEN VSWITCH安装
参考贴: http://sudomakeinstall.com/linux-systems/installing-openvswitch-on-centos-6-6-5 yum install ker ...
- 【HDOJ】1438 钥匙计数之一
状态压缩.分最后一个槽的值以及当前的配置方案是否可以进行DP. /* 1438 */ #include <cstdio> #include <cstring> #include ...