JavaScript 的历史故事
1.JavaScript语言与名称的由来（Netscape，Sun Java）
2.微软的Explorer和JScript
JavaScript 概述
JavaScript是基于对象和事件驱动的脚本语言，主要应用在客户端。
特点：
1.交互性（它可以做的就是信息的动态交互）
2.安全性（不允许直接访问本地硬盘）
3.跨平台性（只要是可以解释Js的浏览器都可以执行，和平台无关）
JavaScript与Java不同
1.JS是Netscape公司的产品，前身是LiveScript;Java是Sun公司的产品，现在是Oracle公司的产品。
2.JS是基于对象，Java是面向对象。
3.JS只需解释就可以执行，Java需要先编译成字节码文件，再执行。
4.JS是弱类型，Java是强类型。
JS与HTMl相结合的方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>演示 JS与HTMl相结合的方式</title>
</head>
<!-- JS与HTMl 相结合的方式 1 -->
<script type="text/javascript">
alert("Hello world");
</script>
<!-- JS与HTMl 相结合的方式 2 -->
<script type="text/javascript" src="js/1.js">
</script>
<!-- 反模式 ： JS与HTMl 相结合 -->
<script type="text/javascript" src="js/1.js">
/*如果js代码块是通过 src 引入 ，这里面的代码是无法执行的*/
alert("反模式");
</script>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>演示 js 基本数据类型</title>
<script type="text/javascript">
//1.关键字： var if else for while switch case break continue function synchronized undifined try catch 等待
//2.标识符：与 java 一样 字母、_或者$ 开头 剩下部分只能由 字母、_、数字或者$ 组成
//3.分隔符：与 java 一样 空格 回车 换行 制表符（Tab） {} 单引号（'） 双引号 (") 逗号(,) 分号(;) 冒号(:) 等
//4.注释：只有两种 // 和/* 注释 */
//5.代码书写风格：略(可以根据java风格书写)
//6.数据类型（全部都是小写）：number boolean string object undifined(当一个变量被声明但没有赋初值时，就是该类型)
//alert( typeof( 16 ) ); //number
//alert( typeof( 16.666666 ) ); //number -->number（包括整形和浮点型）可理解为就是数学中的数值
//alert( typeof( "16" ) ); //string(注意：string s 是小写)
//alert( typeof( 'a' ) ); //string --> js 中没有字符这一概念
//alert( typeof( true ) ); //boolean
// var arr = [ 1, 2.2, "abc" ];
// alert( typeof( arr ) ); // object
// var a;
// alert( typeof( a ) ); //undefined
</script>
<script type="text/javascript">
//7 变量 ---用关键字var来声明
//结合变量再次演示一下数据类型
// var str = "abc";
// alert( typeof( str ) == "string" ); //true
// alert( typeof( str ) == "String" ); //false
// var a = 10;
// alert( a/3 ); //3.3333333333333335 --- 与java不同
var b = false;
alert( b + 1 ); // 1 --> 与C语言相同 有非零 概念: false既是 0 true 既是 非0
alert( true + 1 ); // 2
alert( !0 ); // true
alert( !-1 ); //false
var b = "asdsada";//js中的变量，即使前面定义过，也可以重新定义且没有类型限制
alert( "b1=" + b ); // b1=asdsada
</script>
<script type="text/javascript">
//多个脚本段之间的变量是同一作用域的，可共用数据---全局变量
alert("b2=" + b); // b2=asdsada
</script>
</head>
<body>
</body>
</html>
JS 语法1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>演示 js 语法1</title>
</head>
<script type="text/javascript">
var str="abc123";
//alert(str);
//alert( typeof(str) );//string
str = 'a'; //※ 也可以用单引号作为字符串的分界符---js中没有字符类型的概念，全是字符串
//alert( typeof(str) );//string
</script>
<script type="text/javascript">
//※※有关变量声明、赋值的小细节※※
//细节1 ：变量在声明但未赋值时，js把它初始化成"undefined"
var x;
alert( x );
//细节2： 一个变量没有声明，但可以赋值
y = 10; //ok的
alert( y ); // 10
//细节3：注意 --> 没有声明也没有赋值的变量，是不能使用的
alert( z ); //WA-->范反模式 ： 没有弹框弹出（语法错误）
</script>
<script type="text/javascript">
//上一段脚本挂了，这一段脚本不受影响，还是能够照样执行的
//因为 每一个 script 标签都处于一个独立的空间，但是它们之间 是共享全局变量 的
var a = 3
var b = 4
//上面的代码虽然写得不严谨，但浏览器还是能够解析执行(这也决定了js是非严谨性语言)---但我们平时还是要尽量写规范代码，不要去挑战它的极限
alert( a + b ); // 7
/*
var l = 3 m = 4
alert( l + m );
这块代码 是错误的 已经越过 js 的底线了
*/
</script>
<body>
</body>
</html>
JS语法2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>演示 js 语法2</title>
<script type="text/javascript">
//8.常量：js中只有直接常量（10 "abc" true ... ）, 没有符号常量(如java中 : int MAX = 100;)
//下面将运用到 函数 关于 函数的具体内容 后面会演示 这里 就简单使用下函数
//9 运算符
//9.1 算术运算符：+（正）、-（负）、++、--、+（加）、-（减）、*、/（除）、%（取余）
function t1(){
var d = 3.14;
d++;
alert( d ); //4.140000000000000001 与java 不同 java中浮点数是不能进行 ++ 的
var a = 0.3;
var b = 1.7;
alert( a + b ); //2 --> 与 java 不同 java运行结果是 2.0
var a = 2;
alert( a/100*100 ) // 2
//特殊 + -
alert( "12.3" + 3 ); // 12.33 --> 与java 一样 + 起到连接字符串作用
alert( "12.3" - 3 ); //9.3 --> java中是没有这种运算方法的
alert( 3 - "12.3"); //-9.3
alert(true+1); //2
alert(false+1); //1
alert( 100%-3 ); //1 %运算符和Java一样
}
//9.2 关系运算符：==、!=、>、<、>=、<=
//与java 一样
function t2(){
var a = 3, b = 4;
if( a < b ){
alert( "a<b" );
}
alert( 5 == a ); //false
alert( 5 != a ); //true
}
//9.3 逻辑运算符：!（非）、&&（条件与）、||（条件或） ----与Java相比，逻辑运算符中没有&,|,^
function t3(){
var a = 1;
alert( a > 0 && a < 2 ); //true
alert( !( a > 0 ) ); //false
//只要是“非0”，都是true。 只有“0”才是false
var b = -99;
if ( b ){
alert( "Ok!" ); //这里是有弹框的
}
alert( !b ); //false
var t = 2;
//有时由于疏忽少些了一个 = 符合 会出现下面这种类型的bug
//一定要小心的这个bug ---为避免这个bug，应该写成： if( -1 == t )
if( t = -1 ){//这个表达式永远是true
alert("22222");
}
}
//9.4 位运算符：~（非）、&（与）、|（或）、^（异或）、<<（左移位）、>>（右移位）、>>>（无符号右移位）
//位运算符的用法和Java完全一样
function t4(){
var a=6;
alert( a&10 ); // 0110 & 1010 ==> 0010 即是 2
alert( a<<2 ); // 0110 左移2位 ==> 011000 即是24
}
//9.5 赋值运算符：= 、+=、*= 、 /=、 %=
//赋值算符的用法和Java完全一样
function t5(){
var a=6;
a +=5;
alert( a ); // 11
a %= 3;
alert( a ); //2
}
//9.6 三目运算符: 表达式1 ? 表达式2 : 表达式3
function t6(){
var a=35, b=123; //函数内部声明的变量是局部变量
var max = a>b ? a: b;
alert("max="+max);
}
//9.7如何判断数据的类型
var a=3.14;//不在函数内部声明的变量都是全局变量
function t7(){
//var a=35;
//var a="w";
alert( typeof(a)=="number" );
alert( typeof(a)=="string" );
alert( typeof(a)=="boolean" );
alert( typeof(a)=="object" );
alert( typeof(a)=="undefined" );
}
</script>
</head>
<body>
<input type="button" value="演示 算术运算符" οnclick="t1();"/>
<input type="button" value="演示 关系运算符" οnclick="t2();"/>
<input type="button" value="演示 逻辑运算符" οnclick="t3();"/>
<input type="button" value="演示 位运算符" οnclick="t4();"/>
<input type="button" value="演示 赋值运算符" οnclick="t5();"/>
<input type="button" value="演示 三目运算符" οnclick="t6();"/>
<input type="button" value="演示 如何判断数据的类型" οnclick="t7();"/>
</body>
</html>
JS语言演示---流程控制语句
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS语言演示---流程控制语句2</title>
<script type="text/javascript">
function a1(){
var x = -1;
if ( x ) { //"非0即是true"
alert( "非0即是true" );
} else {
alert("...");
}
}
function a2() {
/*Java中switch语句只能用于选择byte、int等整数
类型,char类型和jdk7新增的String类型。而js支持所有类型 */
var x = 1;
// var x = "abc";
// var x = 3.14;
switch ( x ) {
case 1:
alert( "111" );
break; //当 x == 1 时，且这里的 没有break 的话 下面的语句也会执行，直到遇到break 才会终止
case "abc":
alert( "abc" );
break;
case 3.14:
alert( "π=3.14" );
break;
default:
alert( "..." );
break; //最后一个break 可省略
}
}
function a3() {
var i = 1;
var sum = 0;
while( i <= 100 ) {
sum += i;
i++;
}
alert( "sum=" + sum );
//do-while 与java一样 无论如何都会进来一次
i = 0;
do{
alert( "弹出第" + (i+1) + "次" );
i++;
}while( i < 0 );//注意 这里要有 ;
}
</script>
</head>
<body>
<input type="button" value="if-else演示" οnclick="a1();" />
<input type="button" value="switch-case演示" οnclick="a2();" />
<input type="button" value="while,do-while演示" οnclick="a3();" />
</body>
</html>
流程控制语句练习
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS语言演示---流程控制语句练习</title>
<style type="text/css">
table{
border-collapse: collapse;
}
td{
width: 70px;
border: 1px solid black;
padding-left: 5px ;
}
</style>
<script type="text/javascript">
var i = 0;
document.write( "i=" + i );
document.write( "<hr />" );
for ( ; i < 5; i++) {
document.write( "i=" + i +"<br />");
}
</script>
</head>
<body>
<hr />
<script type="text/javascript">
document.write("<table><caption>九九乘法表1</caption><tr>");
var i = 1;
for (; i < 10 ; i++) {
var j = 1;
for(; j < 10; j++){
if ( j <= i){
document.write("<td>" + j + "*" + i + "=" + i*j + "</td>")
}
}
document.write("</tr><tr>");
}
document.write("</tr></table>");
document.write("<br/><hr />");
document.write("<table><caption>九九乘法表2</caption><tr>");
var i = 1;
for (; i < 10 ; i++) {
var j = 1;
for(; j < 10; j++){
if ( j >= i ){
document.write("<td>" + i + "*" + j + "=" + i*j + "</td>")
}
}
document.write("</tr><tr>");
}
document.write("</tr></table>");
</script>
</body>
</html>
1250
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
