首先在学习之前,我们要了解web前端三层架构:(重点)
1:HTML:结构层:从语义的角度,去描述页面的结构
2:CSS:样式层:从审美的角度,去美化页面
3:JS:行为层:从交互的角度,去提升用户体验
注意:Java和JavaScript没有关系
1:JS代码写在哪里?
1:所有的Js代码写在Script标签中
2:可以放在HTML中的任意位置,一般放在Head或者Body中
3:可以将js代码单独存在 .js文件中,然后通过<script src = “”> </script>引入
4:对于空格,换行不敏感
5:每一条语句后最好加一个分号
2:注释
a:作用
1:对代码解释
2:调试代码
b:分类
1:单行注释 ctrl+/
2:多行注释 ctrl+shift+/
3:字面量(直接量)
1:数值,可以不加引号,直接输出
2:字符串:必须加引号
4:控制台输出
浏览器可以按下F12 显示控制台界面
5:变量
a:定义 var a = 100;
b:变量名的定义
组成:字母,数字,下划线,$
注意点:数字不能开头,不能有空格,不能和关键字重名
大写字母是可以使用的,并且大小写敏感
6:数据类型
数值(number):包含整数和小数 3, 3.14
字符串(string):Helloworld,需要引号
布尔类型(boolean):只有true和false两种取值
undefined:未定义或者是不存在
null:该处有一个值,但是目前为空
对象:各种值的集合
通常我们把数值,字符串,布尔类型称为基本类型
复杂类型:对象,数组,函数
7:数值型(number)
测试类型:typeof()
JS中,只要是一个数,不管是整浮,大小,正负,都是number类型
var a = 100; //定义了一个变量a,并且赋值100
console.log(typeof a); //输出a变量的类型
typeof表示 “某某的类型” 用法 typeof 变量
13:字符串(string)
var str = "快要放假了";
console.log(typeof (str));
8:+运算符
1) 连字符
2) 加
console.log("么" + "么" + "哒");
console.log("么+么+哒");
console.log(1+2+3);
如果加号两边都是数值,此时是加。否则,就是连字符。9:强制类型转换(Number())
1:通过Number(内容)可以将内容变成对应的数值
2:parseInt可以进行转换
10:强制类型转换(String(内容))
console.log(typeof (String(345)));
toString() 转换为字符串 var a=10; alert(typeof(age.toString()));
11:强制类型转换 (Boolean(内容))
它的转换规则相对简单:除了以下六个值的转换结果为false,其他的值全部为true。
ndefined
null
-0
0或+0
NaN
''(空字符串)
NaN: Not a Number 的缩写,JavaScript 的一种特殊数值,其类型是 Number
可以通过 isNaN(param) 来判断一个值是否是 NaN:
console.log(isNaN(NaN));//true
console.log(isNaN(23));//false
12:隐式转换
字符串与数字结合是会变成字符串
除了加法其他运算符会把字符串转换为数值进行运算
1:JS的基本知识
2:变量 var
3:数据类型 number string boolean undefined null 对象...
4:类型转换
强制类型转换 Number() String() Boolean()
隐式转换
13:运算符和表达式
世界上表示气温有两种方法:摄氏度和华氏度。两者的关系是:
编写程序,让用户输入摄氏度,向用户提示出对应的华氏温度。
思路:1:获取用户的输入
2:需要类型转换(可以隐式转换)
3:弹出提示框
//得到用户输入的摄氏温度,用c变量来接收
//接收的东西是“字符串”,通过parseFloat进行转换
var c = parseFloat(prompt("请输入摄氏温度啊"));
//计算华氏温度,我们用变量f来表示
var f = 9 / 5 * c + 32;
//显示结果
alert("我帮你算出了华氏温度" + f);
小练习:
用户输入一个三位数,用程序计算每一位的和
如
输入155,就显示11
输入316,就显示10
思路:1:获取用户输入
2:计算每一位上的值
3:每一位相加求和显示
//第一步,用户输入数字
var num = parseInt(prompt("请输入数字"));
//第二步,得到每一位。是我们自己研究的算法
var baiwei = parseInt(num / 100);
var shiwei = parseInt(num % 100 / 10);
var gewei = parseInt(num % 10);
//第三步,计算和并显示
var sum = baiwei + shiwei + gewei;
//显示
alert(sum);
14:关系运算符
1:关系运算符的结果只能是true或者false
2:>= 中间不能有空格
3:要注意== 和 ===的区别
4:关系运算符可以比较其他类型的值
== 等等,用来比较两个数甚至字符串是否相同,但是不严谨,会将不同类型的东西,转换为相同类型进行比较,隐式转换
console.log("5" == 5); //true
console.log(56 == "56"); //true
==== 全等于,表示全等于,会有类型判断
console.log("56" === 56); //false
console.log(56 === "56"); //false
console.log("56" === "56"); //true
console.log(56 === 56); //true
NaN和任何值都不相等,包括自己 +0和-0相等
15:自增自减运算符
++x ,x++,都会使x进行+1的操作
++在前,先运算,再赋值
++在后,先赋值,后运算
var a=10, b=20 , c=30;
++a;
a++; e=++a+(++b)+(c++)+a++;
alert(e); //77
16:逻辑运算符(重点)
逻辑运算符有三个
&& 与(且) 2 < x < 15
|| 或
! 非
x>2 && x<15;
1:&& 与
且运算符的运算规则是:如果第一个运算子的布尔值为true,则返回第二个运算子的值(注意是值,不是布尔值);如果第一个运算子的布尔值为false,则直接返回第一个运算子的值,且不再对第二个运算子求值。上面代码的最后一部分表示,由于且运算符的第一个运算子的布尔值为false,则直接返回它的值0,而不再对第二个运算子求值,所以变量x的值没变。
这种跳过第二个运算子的机制,被称为“短路”。
2:|| 或运算符
或运算符(||)的运算规则是:如果第一个运算子的布尔值为true,则返回第一个运算子的值,且不再对第二个运算子求值;如果第一个运算子的布尔值为false,则返回第二个运算子的值。
小练习:
console.log("0 || 1 = "+(0 ||1));
console.log("1 || 2 = "+(1 ||2));
console.log("0 && 1 ="+(0 && 1));
console.log("1 && 2 ="+(1 && 2));
17:三目运算符
元条件运算符用问号(?)和冒号(:),分隔三个表达式。如果第一个表达式的布尔值为true,则返回第二个表达式的值,否则返回第三个表达式的值。
var age=16; age>18?alert("成年"):alert("未成年");
用三目运算符判断两个数,三个数中的最大值
var num1 = 23, num2 = 78, num3 = 32;
var max =0;
var temp= num1>num2?num1:num2;
var max =num1 > num2 ? num1 > num3 ? num1 : num3 : num2 > num3 ? num2 : num3;