5.javascript中的注释
5.1 单行注释
//注释
5.2 多行注释
/*
多行注释
多行注释
*/
6.中的标示符(变量名):
大小写敏感
不能以数字开头
可以由字母、数字、下划线、$符号组成
不能是javascript中的关键字
7.javascript中声明变量:
任何类型的变量都可以用var关键字来声明.
var a = "";
var b = 10;
var c = 10.9;
var d = new Date();
var e = true;
8.javascript中的null和undefined
//弹出null
var age = null;
alert(age);
//弹出undefined (根据浏览器来定)
var age;
alert(age);
9.javascript中的三种弹框:
alert confirm prompt
alert 提示框/警告框
confirm 确认框
prompt 输入对话框
这三个方法都是window这个对象的方法.window是
JS中的一个内置对象,只有window对象的方法,调用的时候才
可以省去对象的名字,直接用方法名字来调用
window.alert("hello")和alert("hello")是一样的效果.
这三种弹框都有一个共同的特点,当浏览器运行一个弹框代
码的时候,用户如果不点击弹框中的确定或者取消按钮的话,
浏览器就会卡这个弹框处,下面的页面代码就不会被执行.
alert弹出一个警告框/提示框,用户点击确定按钮之后就可以
继续访问。
confirm弹出一个确认框,用户可以点击确定或者取消,
这个confirm方法会相应的返回true或者false.
prompt弹出一个可以让用户输入的框口,用户输入后点击
确定,这个方法会把用户输入的内容返回.
prompt("请输入你的性别:");
同时还可以在输入框设置一个默认值.
prompt("请输入你的性别:","男");
10.javascript中的输出
10.1 写到 HTML 某个元素中
使用 document.getElementById(id) 方法获得要操作的html页面元素
再使用并 innerHTML 来获取或插入元素内容
例如:
<div id="demo">hello</div>
<span id="s1"></span>
//获得id=demo的元素中的文本内容
var v = document.getElementById("demo").innerHTML;
//把变量v的内容插入到id=s1的元素中
document.getElementById("s1").innerHTML=v;
10.2 写到 HTML 文档
document.write(....);
类似于java中的System.out.println(.....);
参数可以是字符串或者数字或者其他的一个对象
注意:document.write(....)是直接写给浏览器的,让浏览器解析显示的
10.3 写到控制台
使用 console.log() 方法在浏览器中显示 JavaScript 值。
浏览器中使用 F12 来启用调试模式, 在调试窗口中点击 "Console" 菜单进行查看。
注意:有些浏览器可能需要安装相应的插件才能开启调试模式
例如:
var name = "tom";
console.log(name);
另外:console.info(...);
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//提示用户输入内容,用户输入内容
//确定得到参数,取消获得null值
//注意:加第二个参数表示默认值
/* var name=prompt("请输入用户名","jake");
console.log(name); */
/* var name=prompt("请输入用户名");
console.log(name); */
//判断用的返回值boolean类型
//confirm参数是表示提示信息
/* var b=confirm("确定否");
//if判断的参数boolean表达式
if(b){
alert(1111);
}else{
alert(222);
} */
//bom对象代表的是浏览器对象
//浏览器对象维护的函数(方法)
//可以省略window
/* alert(111);
window.alert(2222); */
/* var n=null;
console.log(n);//null
var nn;
console.log(nn); *///undefined申明了没有赋值
//js中所有的变量声明都是var
/* var a="";
var b='';
var c=10;
var d=11.88;
var bb=true;
console.log(bb);
var date=new Date();
//将js的结果输出到浏览器的
//开发工具上(IE不支持)
console.log(date); */
//输出内容到浏览器的开发工具控制台
/* console.log("test1");
console.info("test2");
console.error("test4"); */
//将内容输出到浏览器
//等价与System.out.println();
/* document.write(new Date()+"<br>");
document.write(1+1+"<br>");
document.write(true+"<br>");
document.write("test.....ok<br>"); */
</script>
</head>
<body>
<input type="text" id="inp" name="name"
value="hello"/>
<div id="div" >test</div>
<script type="text/javascript">
//document表示浏览器解析html得到的
//文档对象,名字固定的
var div=document.getElementById("div");
//标签中没有默认value属性的
//取值innerHTML
/* console.log(div.innerHTML); */
//给含有id=“div”的属性标签赋值
div.innerHTML="briup";
var inp=document.getElementById("inp");
//标签中自带value属性取值用value
console.log(inp.value);
//给自带value属性的标签赋值
inp.value="jd1812";
</script>
</body>
</html>
11.javascript中的数据类型
字符串(String)、数字(Number)、布尔(Boolean)
数组(Array)、对象(Object)、空(Null)、未定义(Undefined)。
注意:可以使用全局函数typeof()来判断一个变量的数据类型,
只能判断基础数据类型。对于使用内置构造函数创建的对象
,均返回object
11.1 JavaScript 拥有动态类型的特点。
这意味着相同的变量可用作不同的类型:
例子:
var x; // x 为 undefined
var x = 5; // 现在 x 为数字
var x = "John"; // 现在 x 为字符串
11.2 字符串 String
字符串可以是引号中的任意文本。可以使用单引号或双引号:
var name="tom";
var name='tom';
可以在字符串中使用引号,只要不匹配包围字符串的引号即可:
var v="He is called 'tom'";
var v='He is called "tom"';
字符串对象的常用方法:
var s = "hello world";
document.write("<h1>字符串对象</h1>")
//获得字符串的长度
document.write(s.length+"<br>");
//从下标为3的位置开始,截取4个字符,包括下标为3的位置的字符
document.write(s.substr(3,4)+"<br>");
//从下标为6的位置开始截取,截取到下标为8的位置,但是不包括下标为8的字符[6,8)
document.write(s.substring(6,8)+"<br>");
//trim()去掉字符串俩边的空格,但是这个方法有可能浏览器不支持.
document.write(s.trim().length+"<br>");
//字符串转换为大写
document.write(s.toUpperCase()+"<br>");
//字符串转换为小写
document.write(s.toLowerCase()+"<br>");
//分割字符串 返回一个数组
document.write(s.split(" ")+"<br>");
document.write(s.split(" ").length+"<br>");
document.write(s.split(" ")[0]+"<br>");
document.write(s.split(" ")[1]+"<br>");
注意:javascript中的转义符和java的一样也是\
11.3 数字 Number
JavaScript 只有一种数字类型。数字可以带小数点,也可以不带
var x1=34.00; //使用小数点来写
var x2=34; //不使用小数点来写
极大或极小的数字可以通过科学(指数)计数法来书写:
var y=123e5; // 12300000
var z=123e-5; // 0.00123
11.4 布尔
布尔(逻辑)只能有两个值:true 或 false。
var x=true;
var y=false;
11.5 数组 Array
javascript中数组的特点:
1.数组的长度是可变的
2.数组里面放的数据类型也可以不同
3.数组的长度是和你所使用到的数组中最大下标相关联的.
//创建数组的时候,可以指定长度也可以不指定
//var a = new Array(4);
//var a = [1,3,4,"tom"];
var a = new Array();
a[0] = "tom0";
a[1] = "tom1";
a[2] = "tom2";
a[6] = "tom6";
document.write(a.length+"<br>");
/*
正常情况的循环
这个循环的输出结果为:
tom0
tom1
tom2
undefined
undefined
undefined
tom6
*/
for(var i=0;i<a.length;i++){
document.write(a[i]+"<br>");
}
/*
for-in循环
这个循环的输出结果为:
tom0
tom1
tom2
tom6
*/
//for-in除了变量数组外还能变量一个对象,这时变量i拿的就不是下标了,而是对象中的属性.
//这里的这个变量i每次拿到的是数组下标,而且是已经存在值的位置的下标,对于那些值是undefined的位置下标是不会拿的.
for(i in a){
document.write(a[i]+"<br>");
}
11.6 空(Null)、未定义(Undefined)
//null
var name = null;
//Undefined
var age;
11.7 对象 Object
javascript中{}可以代表对象
11.7.1 javascript已经存在的类型的对象
var v = new Date();
var obj1 = new Object(), obj2 = {};//Object 对象
var arr1 = new Array(), arr2 = [];//Array 对象
var boo1 = new Boolean(true), boo2 = true;//Boolean 对象
var num1 = new Number(123), num2 = 123.45;//Number 对象
var str1 = new String("abc"), str2 = 'abc';//String 对象
11.7.2 自定义的对象1:
var person={firstname:"John", lastname:"Doe", id:5566};
alert(person.firstname);
alert(person.lastname);
alert(person.id);
11.7.3 自定义的对象2:
var p =
{
grade:1,
name : "tom",
age:27,
sex:"男",
speak:function(words)
{
alert(this.name+"说:"+words+"!");
}
}
p.speak("hello");
11.7.4 自定义的对象3:
function Person(name){
this.name = name;
this.age = 20;
this.say=say;
}
function say(){
document.write(this.name+":大家好,我今年"+this.age+"岁了");
}
var p = new Person("张三");
p.say();
-----------------------------
function Person(name){
this.id = 1;
this.name = name;
this.age = 20;
this.say=function(msg){
document.write(this.name+" 说:"+msg);
};
}
var p = new Person("张三");
p.say();
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//对象的构建
//获取系统的时间
var date=new Date();
//console.log(date);
//document.write(date);
//构建一个js空对象 等价于{}
/* var obj=new Object();
document.write(obj); */
/* var arr=new Array();
document.write(typeof(arr)); *///object
/* var b=new Boolean(true);
document.write(typeof(b)+"<br>");//object
document.write(b+"<br>");//true */
/* var num=new Number(23);
var nu=34;//number
document.write(typeof(nu)+"<br>");
document.write(nu+"<br>");
document.write(typeof(num)+"<br>");//object
document.write(num+"<br>"); */
/* var str=new String("test");
document.write(str+"<br>");
document.write(typeof(str)+"<br>");//object */
//1自定义js对象
//{key:value,key:value....}
//key表示对象中的属性名,value表示
//对象中的属性值
/* var person=
{name:"lisi",age:30,gender:true,email:"14@qq.com"};
//给js构建的对象赋值
person.name="wangwu";
//从js构建的对象中取值
document.write(person.name+"<br>");
document.write(person.age+"<br>");
document.write(person.email+"<br>");
document.write(person.gender+"<br>"); */
//2自定义对象的构建(加函数(java方法))
var per1={
name:"lisi",
age:30,
gender:true,
//对象中函数(方法)的声明
//js中函数声明不需要类型限制
//可以接受任意类型
say:function(msg){
document.write("test....."+msg+"<br>");
}
};
//调用js中自定义对象的方法
//per1.say("test");
//per1.say(345);
per1.say(true);
document.write(per1.name+"<br>");
document.write(per1.age+"<br>");
document.write(per1.gender+"<br>");
//数组的使用
//特点:1js中的数组可以存储任意类型
//2. js中的长度可变,长度和使用的
//长度有关
//数字也可以声明的时候赋予值
var arr=["test",true,33,new Date()];
arr[100]="briup";
//for循环和java一样
//单前循环不能忽略undefined
/* for(var i=0;i<arr.length;i++){
//console.log(arr[i]);
document.write(arr[i]+"<br>");
} */
/* for(i=0;i<arr.length;i++){
//console.log(arr[i]);
document.write(arr[i]+"<br>");
} */
//js增强循环
//i表示的角标,自动把数组中
//undefined修饰的数组位置忽略掉
//只显示有具体值的位置
/* for(i in arr){
document.write(arr[i]+"<br>");
} */
/* for(var i in arr){
document.write(arr[i]+"<br>");
} */
/* console.log(arr.length);
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
console.log(arr[3]); */
//数组的声明
//var arr=new Array(4);
//申明数组的过程不指明长度
/* var arr=new Array();
//给数组赋值,中间没有赋予值的
//操作书undefine修饰的
arr[0]="tets";
arr[1]=true;
arr[2]=34;
arr[10]=new Date();
//从数组中取值,
console.log("0:"+arr[0]);
console.log("1:"+arr[1]);
console.log("2:"+arr[2]);
console.log("3:"+arr[3]);
console.log("4:"+arr[4]);
console.log("10:"+arr[10]);
console.log(arr.length); */
//boolean类型的申明
/* var b=true;
var b1=false;
console.log(typeof(b));//boolean
console.log(typeof(b1));//boolean
console.log(b);//true
console.log(b1);//false */
//数字类型
var num=23;
var num1=23.44;
/* console.log(typeof(num));//number
console.log(typeof(num1));//number
console.log(num);
console.log(num1); */
//科学技术表示数字
//var n=123e5;//123*10^5次方
//console.log(n);//12300000
//var n1=123e-5;//123除以10的5次方
//console.log(n1);//0.00123
/* var ss="test ... 'test'";
console.log(ss);//test ... 'test'
var ss1='test ... "test"';
console.log(ss1);//test ... "test"
var str="hello";
console.log(typeof(str)); */
var str1='test briup';
/* console.log(typeof(str1)); */
//字符串的长度
//console.log(str1.length);//10
//substr截取字符串
//第一个参数表示从那个位置开始截取
//第二个参数表示截取的位数是多少
//console.log(str1.substr(2,2));//st
//console.log(str1.substr(2,5));//st br
//第一个参数表示开始的位置
//第二个参数表示结束位置 [2,4)
//console.log(str1.substring(2,4));//st
//console.log(str1.substring(2,8));//st bri
//表示去掉字符串前面和后面的空格
//console.log(str1.trim());
//将字符串转化为大写
//console.log(str1.toUpperCase());
//将字符串转化为小写
//console.log(str1.toLowerCase());
//拆分字符串,得到的是数组
//注意:如果拆分的字符串有特殊含义
//使用转义\
/* var arr=str1.split(" ");
console.log(arr[0]);//test
console.log(arr[1]);//briup
console.log(arr[2]); *///undefined
//同一个变量在js中可以表示多种类型
/* //boolean类型
var n=true;
//typeof判断变量是什么类型
console.log(typeof(n));
//数字类型
n=33;
console.log(typeof(n));
//字符串类型
n="test";
console.log(typeof(n)); */
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//3自定义js对象
/* function Person(name,age){
//对象属性的定义
this.name=name;
this.age=age;
this.gender=true;
//对象行为(方法)的定义
this.say=say;
}
function say(msg){
console.log("test....."+msg);
}
//对象构建
var p=new Person("tom",33);
//打印到控制台
console.log(p.name);
console.log(p.age);
console.log(p.gender);
p.say();
p.say(1);
p.say(true);
p.say("byebye"); */
//4.js对象的构建
function Person(name,age,gender){
this.name=name;
this.age=age;
this.gender=gender;
//对象行为(方法)的定义
this.say=function(a){
console.log("test...ok"+a);
}
}
var p=new Person("jake",30,true);
console.log(p.name);
console.log(p.age);
console.log(p.gender);
p.say();
p.say(1);
p.say(new Date());
</script>
</head>
<body>
</body>
</html>