1.JavaScript基础语法

一、介绍

1.javascript跟java一点关系也没有,他是由网景公司Netscape创造的,原名叫livescript,为了蹭java的热度,改名叫javascript。Netscape是第一个创造浏览器的,叫navigator,收费的,但是要运行在微软的操作系统上,后来微软也开始弄自己的浏览器,IE,而且不收费,所以,慢慢的,Netscape公司就GG了,那一波团队,创造了新的公司,并且创造了火狐。java是Sun公司开发的。JavaScript之所以这么火,是因为js是客户端语言,nodejs是服务端语言,所以,会了js,你既可以做客户端,又可以做服务端。

1.书写位置

1.JavaScript基础语法_第1张图片

1.JavaScript基础语法_第2张图片
问题:把代码写在body结束的上面和写在window.onload里有啥区别
(1)前者是等DOM结构加载完成之后执行(DOM结构:img标签啦,li标签啦)所以他要快些
(2)后者不仅要等DOM结构加载完成,还要等所有资源文件加载完后才执行(资源文件:图片啦,外部的js文件啦),so他要慢些,window.onload不一定要写在head里,写在任何一个地方都行
1.JavaScript基础语法_第3张图片
1.JavaScript基础语法_第4张图片

var a = 5 ;
var b = "abc";
var c;
console.log(a);//5
console.log(c);//undefined
console.log("a");//a   带双引号的就会被当成字符串
alert(a);//alert也是辅助我们调试的工具,早期浏览器没有console,所以用alert调试,很麻烦
document.write("

Hello World

"
);//Hello World且是h1标题

1.JavaScript基础语法_第5张图片
注意百度和爱奇艺的console

二、基本数据类型

1.typeof 可以查看变量数据类型
typeof 有两种写法
image.png

console.log(a);//打印变量的值
console.log(typeof a);//打印变量类型

(1)五种基本数据类型

number 无论是整数还是浮点数
string 无论是字符还是字符串
boolean true、false
undefined 当变量未赋初值,那么变量的值和类型都是undefined
null 未找到DOM对象时

(2)变量命名

1.JavaScript基础语法_第6张图片
jQuery 也 可 以 , 因 为 以 后 学 的 j Q u e r y 就 全 都 是
多个单词的变量名,用驼峰命名法或匈牙利命名法
1.JavaScript基础语法_第7张图片
1.JavaScript基础语法_第8张图片
1.JavaScript基础语法_第9张图片
当变量名包含多个单词时,用驼峰命名,第一个单词首字母小写,其他的都大写
image.png

(3)声明变量

image.png
还是声明一个同时定义的比较好
1.JavaScript基础语法_第10张图片

(4)字符串拼接

image.png
image.png
image.png
1.JavaScript基础语法_第11张图片
1.JavaScript基础语法_第12张图片
1.JavaScript基础语法_第13张图片

三、计算

(1)后自增

1.JavaScript基础语法_第14张图片

(2)前自增

1.JavaScript基础语法_第15张图片
1.JavaScript基础语法_第16张图片

(3)=赋值

==判断值是否相等
===判断值和类型是否相等
1.JavaScript基础语法_第17张图片

(4)逻辑运算符

1.JavaScript基础语法_第18张图片
1.JavaScript基础语法_第19张图片
1.JavaScript基础语法_第20张图片

四、类型转换

(1)数字与字符串相遇时

1.JavaScript基础语法_第21张图片

(2)布尔Boolean与数字相遇时

1.JavaScript基础语法_第22张图片

(3)转化成字符串

1.JavaScript基础语法_第23张图片

(4)转成Boolean

1.JavaScript基础语法_第24张图片

五、辅助调试

console.log()
alert()
prompt()
1.JavaScript基础语法_第25张图片
1.JavaScript基础语法_第26张图片

六、条件语句

1.条件判断if else

(1)三目运算符表判断

?:
1.JavaScript基础语法_第27张图片
1.JavaScript基础语法_第28张图片
if 语句只判断值,不判断类型,switch既判断类型,又判断值
parseInt();
取整,直接把小数点后面的去掉,而且typeof parseInt() 是number

七、循环语句

(1)for循环

image.png

(2)while循环

1.JavaScript基础语法_第29张图片

(3)for in 循环

1.JavaScript基础语法_第30张图片
1.JavaScript基础语法_第31张图片
1.JavaScript基础语法_第32张图片

八、函数

(一)、定义函数有两种方式

1.第一种

定义和调用的顺序随便,可以先定义再调用,也可以先调用,后定义

xue();//函数调用
//函数声明/定义
function xue(){
     
    console.log("Hello World");
}
//计算三角形面积
function  angleArea(){
     
    var wide = prompt("请输入三角形的底边长度","");
    var high = prompt("请输入三角形的高","");
    var area = wide * high / 2;
    if(isNaN(area)){
        alert("您输入数据有误");
    }else{
        alert("三角形面积为"+area);
    }


}
angleArea();

1.JavaScript基础语法_第33张图片
1.JavaScript基础语法_第34张图片
所以,js函数的实参形参很随意,不像别的语言那么严格,但是从可读性讲,还是一一对应的比较好
返回值

function add(a,b){
     
    return a+b;//如果这个函数执行完就OK了,下面不会用到它的结果,那就不用return返回值,如果在下面需要
                  //用到函数结果,那就用return了
}
var result =add(3,9);
console.log(result+2);

(二)把函数赋值给一个变量(函数直接量)只能先定义后调用

var fun1 = function (){
     
    console.log("这是函数直接量的方式");
}
fun1();

作用域

1.JavaScript基础语法_第35张图片

1.JavaScript基础语法_第36张图片

九、数组

(一)定义数组的第一种方式

array
1.JavaScript基础语法_第37张图片

//数组
 var arr = [1,2,3,5,6];
for( var i = 0 ; i < arr.length; i++){
    console.log(arr[i]);
}

(二)第二种方式

1.JavaScript基础语法_第38张图片

var arr = new Array();//括号里不用写数组长度,因为他会根据你下面的赋值而改变
arr[0] = 1;
arr[1] = 3;
arr[100] =9;
console.log(arr[7]);//undefined
console.log(arr.length);//101

1.JavaScript基础语法_第39张图片

十、对象

(1)定义对象的第一种方式

1.JavaScript基础语法_第40张图片

//定义对象
var obj1 = new Object();//new了一个对象,所以说,程序员最不缺对象,new一个就行了嘛
obj1.name = "肖战";//给你的对象设置属性
obj1.high = 180;
obj1.love = function(){
     //给你对象设置方法
    alert("爱李雪");
};
console.log(obj1.name);
console.log(obj1.love());//调用方法后面得有小括号

1.JavaScript基础语法_第41张图片

(2)第二种方式

1.JavaScript基础语法_第42张图片
1.JavaScript基础语法_第43张图片

//定义对象的第二种方式
var father = {
    name: "lili",//注意这里不是;而是逗号
    age : 20,
} ;
var son = {
    name : "lii",
    dad : father,//属性值是个对象
}
console.log(son.dad.age);

1.JavaScript基础语法_第44张图片
那啥时候用对象.属性,啥时候用对象[属性]呢

1.JavaScript基础语法_第45张图片

(3)for in就是用来循环数组或对象的

var  arr = ["jjj","jjjjjjj","kkkkkkk"];
for( var p in arr){
    console.log(p + ":" +arr[p]);
}

1.JavaScript基础语法_第46张图片

var obj1 = {
    name : "lili",
    age : 12,
    height:130,
    p: "这个p是属性不是代表下标的变量"
};
for (  var p in obj1){
    console.log(p+ ":" + obj1[p]);
}

1.JavaScript基础语法_第47张图片

1.JavaScript基础语法_第48张图片

栈和堆

1.JavaScript基础语法_第49张图片

栈是先入后出,队先进先出
1.JavaScript基础语法_第50张图片

1.JavaScript基础语法_第51张图片

1.JavaScript基础语法_第52张图片

1.JavaScript基础语法_第53张图片
undefined布尔值是false,null也是false

if(null===undefined){
    //如果是==的话,就会输出true
console.log("true");
}else{
    console.log("false");
}
console.log(typeof null);//object  起初是个语法错误,后来被沿用
console.log(typeof undefined);//undefined

十一、dom对象( document object modle)

var oH1 = document.getElementById("hh");
console.log(oH1);

1.JavaScript基础语法_第54张图片

获取到了对象,就可以获取它的属性了,除了class要写成className外,其他都正常

var oH1 = document.getElementById("hh");
console.log(oH1.className);
console.log(oH1.id);
console.log(oH1.align);

image.png
如果,这个属性不是css自带的,那么就要用getAttribute()

console.log(oH1.getAttribute("xx"));

1.JavaScript基础语法_第55张图片

十二、NaN

NAN数据类型是number
NaN 布尔值是false
NaN==NaN也是false
NaN和谁都不相等,包括他自己

十三、toString()

1.JavaScript基础语法_第56张图片
parseInt() 能把小数部分去掉,保留整数

十四、把原先写的js挪到这来

1.理解JavaScript未定义变量
1.JavaScript基础语法_第57张图片
1.JavaScript基础语法_第58张图片
image.png

2.JavaScript 转义字符串中的特殊符号

1.JavaScript基础语法_第59张图片

3.JavaScript 获取字符串的长度

1.JavaScript基础语法_第60张图片

4.JavaScript字符串的单个字符不能随便改变

1.JavaScript基础语法_第61张图片

4.JavaScript 使用索引修改数组中的数据

1.JavaScript基础语法_第62张图片

5.JavaScript 使用索引操作多维数组

1.JavaScript基础语法_第63张图片

6.push()在数组末尾加n个元素,并返回此时数组元素个数

1.JavaScript基础语法_第64张图片
image.png

7.pop()删掉数组最后一个数据,并返回删掉的值

1.JavaScript基础语法_第65张图片

image.png

8. unshift()在数组最前面加n个数据,并返回元素个数

1.JavaScript基础语法_第66张图片
1.JavaScript基础语法_第67张图片

9. shift()删除数组第一个数据,并返回删掉的那个数据

1.JavaScript基础语法_第68张图片
image.png

你可能感兴趣的:(javascript)