JavaScript基础
1.JavaScript引入方式
方式1
<script type="text/javascript">
js代码;;
</script>
方式二
格式：
<script src="1.js" type="text/javascript">
</script>
注意：
1.<script>是有开始标签与结束标签的，千万不要在一个标签中结束了。
2.如果<script>已经用于引入了js文件，那么该<script>标签体就不能再写js代码了，
2.常用函数
<script type="text/javascript">
alert("弹框");
confirm("确认删除吗?");//点击确定返回true否则返回false
prompt("请输入你的名字");//点击确定返回输入的内容否则返回null
document.write("今天学习js")//页面显示内容
</script>
3.声明变量
<script>
/*
javascript的变量声明：
格式：
var 变量名 = 数据;
声明变量要注意的事项：
1. 在javascript中声明变量是 使用var关键字声明的，javascript中的变量可以存储任意的数据类型数据.
2. javascript中变量数据类型是根据存储的值决定的，可以随时更改存储数据的类型。
3. 定义了多个同名的变量是，后定义的同名变量是覆盖前面定义的同名变量。
4. 声明变量的时候可以省略var关键字，但是不建议省略。
javascript的数据类型：
typeof 查看变量的数据类型。
使用格式：
typeof 变量名
javascript的数据类型：
number 小数与整数
string 字符串 注意： javascript中没有字符的概念，只有字符串，字符串可以写在单引号或双引号中。
boolean 布尔数据类型，
undefined undefined代表该变量没有定义。
*/
document.write("10数据类型是" + (typeof 10) + "<br/>");
document.write("3.14数据类型是" + (typeof 3.14) + "<br/>");
document.write("a数据类型是" + (typeof 'abc') + "<br/>");
document.write("abc数据类型是" + (typeof "abc") + "<br/>");
document.write("abc数据类型是" + (typeof true) + "<br/>");
document.write("a变量数据类型是" + (typeof a) + "<br/>");
</script>
4.字符串转换为数字
<script type="text/javascript">
/*
字符串转数字
parseInt() 可以把一个字符串转换成整数。
parseFloat() 可以把一个字符串转换成小数。
*/
var a = "12";
a = 12.64;
a = "123abc123";
var b = parseInt(a);
document.write("结果：" + b + "<br/>");
/* parseInt方法如果接收的字符串含有非数字的字符，那么parseInt方法会从字符串的首个字符开始寻找，一直找到非数字字符为止，然后就使用前面的数字字符转换成数字， */
var c = "3.14";
c = parseFloat(c);
document.write("结果：" + c + "<br/>");
/*
javascript提供一个IsNaN的方法让我们判断该字符串是否不是 一个数字。
is not a number 不是一个数字。
不是一个数字返回true，是一个数字返回false.
*/
document.write(isNaN(123) + "<br/>");
document.write(isNaN("abc123"));
</script>
5.运算符
<script type="text/javascript">
/* 用法与java大致相同 */
逻辑运算符:
//没有单与的。
document.write((true&&true)+"<br/>");
document.write((true&&false)+"<br/>");
document.write((false&&true)+"<br/>");
document.write((false&&false)+"<br/>");
document.write((true||true)+"<br/>");
document.write((true||false)+"<br/>");
document.write((false||true)+"<br/>");
document.write((false||false)+"<br/>");
三目运算符
布尔表达式?值1:值2;
*/
var age = 10;
document.write(age >= 18 ? "成年人" : "未成年人");
</script>
6.控制语句
<script type="text/javascript">
/*
控制流程语句
if语句
格式：
if(判断条件){
符合条件执行的代码
}
if语句的特殊之处：
1. 在javascript中的if语句条件不单止可以写布尔表达式，还可以写任何的数据。
number 非0为true, 0为false.
string 内容不为空是true， 内容为空的时候是false。
undefined：false
NaN: false
Null: false
var workAge = 0;
var str ="";
var b;
if(b){
document.write("明天过来面试！！");
}else{
document.write("不要在投我们公司了，不要你！");
}
选择语句：
switch语句
switch(变量){
case 值1:
break;
case 值2：
break;
case 值3:
break;
.....
default：
break;
}
特殊之处：
1. 在javascript中switch后面可以跟其他类型
*/
var option = "A";
switch (option) {
case "A":
document.write("java");
break;
case "B":
document.write("html");
case "C":
document.write("javascript");
break;
case "D":
document.write("css");
break;
}
</script>
7.循环语句
<script type="text/javascript">
/*
循环语句：
while
格式：
while(判断的条件){
循环体内容
}
var count = 0 ;
while(count<5){
document.write("hello world<br/>");
count++;
}
需求： 计算1~100的总和。
var num = 1;
var result = 0;
while(num<=100){
result +=num;
num++;
}
document.write("结果："+result);
do-while循环语句
do{
循环语句；
}while(判断条件);
需求；计算1~100奇数的总和。
var num = 1;
var result = 0;
do{
if(num%2!=0){
result +=num;
}
num++;
}while(num<=100);
document.write("结果："+result);
for循环语句:
格式：
for(初始化语句; 判断的条件 ; 循环后的语句){
循环体语句；
}
需求；计算1~100偶数的总和。
*/
var result = 0;
for (var i = 1; i <= 100; i++) {
if (i % 2 == 0) {
result += i;
}
}
document.write("结果：" + result);
</script>
8.函数的定义
<script type="text/javascript">
/*
函数:
函数的定义格式：
function add(a,b){
return a+b;
}
function 函数名(形参列表){
函数体 ;
}
javascript的函数要注意的细节：
1. 在 javascript中函数 定义形参时是不能使用var关键字声明变量 的。
2. 在javascript中 的函数是没有 返回值类型 的，如果函数需要返回数据给调用者，直接返回即可，如果不需要返回则不返回。
3. 在 javascript中是没有函数 重载 的概念 的，后定义的同名函数会直接覆盖前面定义同名函数。
需求：定义一个函数做两个参数的加法功能。
*/
function add(a, b) {
var sum = a + b;
document.write("两个参数的总和：" + sum);
//return sum;
}
//调用函数
add(11, 21, 13, 14);
</script>
9.String对象
<script type="text/javascript">
/*
var str1 = new String("hello");
var str2 = new String("hello");
document.write("两个字符串的对象一样吗？"+(str1.toString()==str2.toString()));
创建一个字符串的方式：
方式1：
new String("字符串的内容");
方式2：
var str = "字符串的内容";
字符串常用的方法：
anchor（） 生产 锚点
charAt() 返回指定索引位置处的字符。
fontcolor() 把带有 COLOR 属性的一个 HTML <FONT> 标记放置在 String 对象中的文本两端
indexOf() 返回 String 对象内第一次出现子字符串的字符位置
italics() 把 HTML <I> 标记放置在 String 对象中的文本两端。
link() 把一个有 HREF 属性的 HTML 锚点放置在 String 对象中的文本两端。
replace() 返回根据正则表达式进行文字替换后的字符串的复制
split() 切割
Substr(a,b) 截取子串，第一个参数表示下标，第二个参数表示长度
toUpperCase() 转大写
toLowerCase 转小写
*/
document.write("第五章".anchor("five") + "<br/>"); //给该字符串添加一个a标签，并且添加name属性，属性值为five
document.write("abc".charAt(1) + "<br/>");
//chatCodeAt返回的是索引值对应的字符的码值。
document.write("第六章".fontcolor("red") + "<br/>"); //fontcolor() 给字符串添加font标签，然后设置color的属性值。
document.write("abchellohehehello".indexOf("hello") + "<br/>"); //返回指定字符串第一次出现的索引值。
document.write("第五章".italics() + "<br/>"); //给文本添加一个i标签，把文本内容设置成斜体。
document.write("百度".link("http://www.baidu.com") + "<br/>"); // 给文本添加一个a标签，
document.write("明天讲html".replace("html", "DOM编程") + "<br/>"); // 给文本添加一个a标签，
//第一个参数表示下标，第二个参数表示长度
document.write("abcdefg".substr(1,3));
//第一个参数表示开始下标，第二个参数表示结束下标（包前不包后）
document.write("abcdefg".substring(1,3));
var str = "我们-大家-好";
var arr = str.split("-");
for (var index = 0; index < arr.length; index++) {
document.write(arr[index] + ",");
}
document.write("<br/>");
document.write("abc".toUpperCase() + "<br/>"); //转大写
document.write("ABC".toLowerCase() + "<br/>"); //转小写
</script>
10.Date对象
<script type="text/javascript">
/*
日期对象（Date）
*/
var date = new Date(); //获取到当前的系统时间
document.write("年：" + date.getFullYear() + "<br/>");
document.write("月：" + (date.getMonth() + 1) + "<br/>");
document.write("日：" + date.getDate() + "<br/>");
document.write("时：" + date.getHours() + "<br/>");
document.write("分：" + date.getMinutes() + "<br/>");
document.write("秒：" + date.getSeconds() + "<br/>");
//xxxx年yy月dd日 hh:mm:ss
//document.write("当前时间是："+date.toLocaleString());
document.write("当前时间是：" + date.getFullYear() + "年" + (date.getMonth() + 1) + "月" + date.getDate() + "日 " +date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds());
</script>
11.显示系统时间
<body>
当前系统时间：<span id="time"></span>
</body>
<script type="text/javascript">
function getCurrentTime() {
//获取到当前的系统时间
var date = new Date();
//把当前系统时间拼装成我指定的格式。
var timeInfo = date.getFullYear() + "年" + (date.getMonth() + 1) + "月" + date.getDate() + "日 " +
date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
//找span对象
var spanObj = document.getElementById("time");
//设置span标签体的内容
spanObj.innerHTML = timeInfo.fontcolor("red");
}
getCurrentTime();
//定时方法.
window.setInterval("getCurrentTime()", 1000); /* setInterval 定时方法，第一个参数要指定调用的代码，第二参数是每 隔指定的毫秒数调用指定的代码。*/
</script>
12.Math对象
<script type="text/javascript">
/*
Math对象常用的方法：
ceil 向上取整
floor（） 向下取整
random() 随机数方法 // 产生的伪随机数介于 0 和 1 之间（含 0，不含 1），
round 四舍五入
*/
document.write("向上取整：" + Math.ceil(3.14) + "<br/>");
document.write("向下取整：" + Math.floor(3.14) + "<br/>");
document.write("随机数：" + Math.random() + "<br/>");
document.write("四舍五入：" + Math.round(3.75) + "<br/>");
</script>
13.数组对象
<script type="text/javascript">
/*
Array数组对象:
创建数组的方式1：
var 变量名 = new Array(); 创建一个长度为0的数组。
方式2：
var 变量名= new Array(长度) 创建一个指定长度的数组对象。
式3：
var 变量名 = new Array("元素1","元素2"...); 给数组指定元素创建数组 的对象。
方式4：
var 变量名 = ["元素1","元素2"...];
数组要注意的细节：
1. 在javascript中数组的长度是可以发生变化的。
*/
var arr = new Array(3); //创建了一个长度为3的数组对象。
arr[100] = 10;
document.write("arr长度：" + arr.length + "<br/>");
var arr2 = new Array("狗娃", "狗剩", "铁蛋");
arr2 = ["狗娃", "狗剩", "铁蛋", "张三"];
document.write("arr2长度：" + arr2.length + "<br/>");
</script>
14.数组常用的方法
<script type="text/javascript">
var arr1 = ["狗娃", "狗剩", "铁蛋"];
//pop ：移除数组中的最后一个元素并返回该元素。
document.write("删除最后的一个元素并返回："+arr1.pop()+"<br/>");
document.write("<br />");
arr1.push("永康"); // 将新元素添加到一个数组中，并返回数组的新长度值。
arr1.reverse(); //翻转数组的元素
document.write("删除第一个元素并返回："+arr1.shift()+"<br/>"); //移除数组中第一个元素，并且返回。
</script>
15.自定义对象
<script type="text/javascript">
/*
自定义对象:
在javascript没有类的概念，只要有函数即可创建对象。
自定义对象的方式1： 使用无参的函数创建对象。
例子：
function Person(){}
var p = new Person(); //创建了一个Person对象了
p.id = 110;
p.name = "狗娃";
方式2：使用带参的函数创建对象。
function Person(id,name){
this.id = id;
this.name = name;
this.say = function(){
alert(name+"呵呵");
}
}
var p = new Person(110,"狗剩"); //创建对象
方式3： 使用Object函数创建对象
var p = new Object();
p.id = 110;
p.name = "铁蛋";
方式4：使用字面量的方式创建.
var p = {
id:110,
name:"狗娃",
say:function(){
alert(this.name+"呵呵");
}
}
*/
var p = {
id: 110,
name: "狗娃",
say: function() {
alert(this.name + "呵呵");
}
}
document.write("编号：" + p.id + " 姓名：" + p.name);
p.say();
</script>
16.js中!=，，!，===的用法和区别（面试题）
<script type="text/javascript">
var num = 1;
var str = '1';
var test = 1;
document.write(test == num); //true 相同类型 相同值
document.write(test === num);//true 相同类型 相同值
document.write(test !== num);//false test与num类型相同，其值也相同, 非运算肯定是false
document.write(num == str); //true 把str转换为数字，检查其是否相等。
document.write(num != str); //false == 的 非运算
document.write(num === str); //false 类型不同，直接返回false
document.write(num !== str); //true num 与 str类型不同 意味着其两者不等 非运算自然是true
//== 和 != 比较若类型不同，先偿试转换类型，再作值比较，最后返回值比较结果 。
//而=== 和 !== 只有在相同类型下,才会比较其值，类型不同，直接返回false
</script>
浙公网安备 33010602011771号