文章目录
一、JavaScript 初识
JavaScript 是一种基于对象和事件驱动的客户端脚本语言,最初的设计是为了检验 HTML表单输入的正确性。
-
组成
JavaScript 是由 ECMAScript(语法)、**Browser Objects(DOM,BOM)(特性)**组成。
- HTML中 在 head 或 body 标签中使用 <script> 标签嵌入javaScript脚本。
二、语法规则
1、js 输出
-
window.alert() 警告框
alert 是警告框,只有一个按钮 “确定” 无返回值,警告框经常用于确保用户可以得到某些信息。当警告框出现后,用户需要点击确定按钮才能继续进行操作。
window.alert('helloworld');
// window. 可以省略
alert('helloworld');
-
confirm() 确认框
confirm是确认框,两个按钮,确定或者取消,返回 true 或 false,确认框用于使用户可以验证或者接受某些信息。当确认框出现后,用户需要点击确定或者取消按钮才能继续进行操作。
<script type="text/javascript">
firm();
function firm() {
if (confirm("确定提交吗?")) {
alert("确定");
} else {
alert("取消");
}
}
</script>
-
prompt() 提示框
prompt 是提示框,返回输入的消息,或者其默认值提示框经常用于提示用户在进入页面前输入某个值。当提示框出现后,用户需要输入某个值,然后点击确认或取消按钮才能继续操纵。如果用户点击确认,那么返回值为输入的值。如果用户点击取消,那么返回值为null,语法:prompt(“文本”,“默认值”)。
<script type="text/javascript">
var name = prompt("请输入您的名字", "默认值");
if (name) {
alert("您好," + name);
}
</script>
- console.log() 写到浏览器的控制台
console.log(123)
2、js 语句与注释
<script type="text/javascript">
// 语句标识符 var、if、for等等
var a = 1;
// 单行注释
function b(){
// 代码块
var c = 1;
var d = 2;
}
/*
1. 多行注释
2. 多行注释
*/
</script>
3、js 变量
- 变量以字母、 $ 和 _ 符号开头
- 变量名称对大小写敏感
- 不能使用关键字、保留字
<script type="text/javascript">
var a1 = 4;
var $a = 5;
var _a = 6;
var A1 = 66;
// 可在一行定义多个变量
var a2 = 4, $a2 = 5, _a2 = 6;
</script>
- 说明
- 省略 var 声明的变量是全局变量。
- 不推荐省略 var操作符来定义全局变量
三、数据类型
ECMAScript 中有5种简单数据类型(也称为基本数据类型):Undefined,Null,Boolean,**Number **、String 和 一种复杂数据类型: Object 。
0、typeof
检测变量类型,语法:typeof 变量 或 typeof(变量)
1、空 undefined 和 null
-
undefined
undefined 这个值表示变量不含有值,只是定义过,没有被使用过。
-
null
- null 值表示一个空对象指针;
- 如果定义的变量准备在将来用于保存对象,最好将该变量定义为 null。
**注:undefined 值是派生自 null值的,所以undefined == null 结果为 true **.
<script type="text/javascript">
var x; // x 为 undefined
var car="Volvo";
car=null // 通过将变量的值设置为 null,来清空变量
</script>
2、数字 number
可以是小数也可以是整数。
-
NaN
非数值(Not a Number)是一个特殊的数字。
- 任何涉及NaN 的操作(例如NaN/10)都会返回 NaN.
- NaN与任何值都不相等,包括NaN本身。
-
isNaN()
检测n是否是**“非数字"**,返回boolean值,说明:isNaN() 在接收到一个值之后,如果不是数字,会尝试将这个值转数字。
-
Number()
把参数转换为数字返回,如果不能转化为数字返回 NaN.
-
parselnt()
用于把字符串转换成整数数字,会忽略字符串前面的空格,直至找到第一个非空格字符。
说明:
- 转换空字符串返回NaN;
- 如果有第二个参数表示多少进制。
-
parseFloat()
用于把字符串转换成浮点数数字,从第一个字符开始解析每个字符,直至遇见一个无效的浮点数字符为止。
说明:
- 它始终都会忽略前导的零;
- 仅第一个小数点有效。
<script type="text/javascript">
var x1=34.50;
var name="Tom";
var age=18;
console.log(typeof(x1)); // number
console.log(typeof(age-"abc")) // number (NaN)
console.log(isNaN(name)); // true
console.log(isNaN(age)); // false
var topval=parseInt("28px");
console.log(parseInt("0xf",16));
var d=parseFloat("12.34.56px");
</script>
3、string
String类型用于表示由零或多个16位Unicode字符组的字符序列,即字符串。字符串可以由双引号(")或单引号(’’)表示。
-
toString()
语法: str.toString()
作用:将str转换为字符串,str是要转换的内容,可以是数值、布尔值、对象和字符串。
-
String()
能够将任何类型的值转换为字符串,包括null 和 undefined。
<script type="text/javascript">
var ids=78965;
var idstr=ids.toString();
var m;
var isChild=false;
console.log(String(m)); // undefined
console.log(String(isChild)); // false
</script>
4、boolean
用于表示真假的类型,即true表示真,false表示假。
注意:
- 除0之外的所有数字,转换为布尔型都为 true;
- 除""之外的所有字符,转换为布尔型都为 true;
- null 和 undefined 转换为布尔型为 false。
<script type="text/javascript">
var m;
var str1="";
var str2=" ";
var n=null;
console.log(Boolean(m)); // false
console.log(Boolean(str1)); // false
console.log(Boolean(str2)); // true
console.log(Boolean(n)); // false
</script>
四、操作符
1、算术操作符
加(+)、减(-)、乘()、除(/)、取余(%*)。
注: “+” 运算符还能用于把变量或字符串连接起来,线程一个新的字符串。
var a1 = 'hello';
var a2 = 'world';
console.log(a1 + a2) // helloworld
var b1 = true;
var b2 = "Hi";
console.log(b1 + b2) // trueHi
var c1 = 123;
var c2 = "数字"; // 123数字
console.log(c1 + c2)
2、赋值运算符
赋值: =
复合赋值: += 、-= 、= 、/=* 、%=
自增自减:++ 、–
用法与 java、c++中的一致。
3、比较运算符
小于(< ) 大于(> ) 小于等于(<=) 大于等于(>=)
== 等于 === 绝对等于(值和类型均相等)
!== 不等于 !== 绝对不等于(值和类型均不相等)
console.log(5 == '5'); // true
console.log(5 === '5'); // false
4、三元操作符
条件?执行代码1:执行代码2
var soce=55;
var result=(soce>=60)?"及格":"不及格";
console.log(result);
5、逻辑运算符
- 逻辑与 &&
- 具有短路逻辑,只要有一个条件不成立,立即返回;
- 当有操作数不是布尔值,遵循下面的规则;
- 如果第一个操作数隐式类型转换后为 true,则返回第二个操作数;
- 如果第一个操作数隐式类型转换后为 false,则返回第一个操作数;
- 如果有一个操作数是 null,则返回 null;
- 如果有一个操作数是 NaN,则返回 NaN;
- 如果有一个操作数是 undefined,则返回 undefined 。
var num1=10,
num2=20,
num3=30,
str="welcome",
bool=true,
n=null,
m;
console.log(num1<num2 && num2<num3); // true
console.log(str && num3); // 30
console.log(80 && 55); // 55
console.log("hello" && 65 && "abc"); // abc
console.log("" && 0 && 30>20 && NaN); //
console.log(n && num3); // null
console.log(m && true); // undefined
console.log(55 && true && 33*"abc"); // NaN
- 逻辑或 ||
- 具有短路逻辑,只要有一个条件成立,立即返回;
- 当有操作数不是布尔值,遵循下面的规则;
- 如果第一个操作数隐式类型转换后为 true,则返回第一个操作数;
- 如果第一个操作数隐式类型转换后为 false,则返回第二个操作数;
- 如果两个操作数是 null,则返回 null;
- 如果两个操作数是 NaN,则返回 NaN;
- 如果两个操作数是 undefined,则返回 undefined 。
var m;
console.log(55>88 || 33<66); // true
console.log(55!="55" || 88==="88"); // false
console.log("hello" || 0); // hello
console.log(99 || 0 || "abc"); // 99
console.log("" || 88 || true); // 88
console.log("" || 0 || "abc"); // abc
console.log(0 || "" || null); // null
console.log(0 || "" || null || "hello"); // hello
console.log(m || NaN || 99); // 99
console.log("" || m); // undefined
console.log(30*"abc" || 55-"def"); // NaN
逻辑非 !
- 无论操作数是什么数据类型,逻辑非都会返回一个布尔值;
- !! 同时使用两个逻辑非操作符。
console.log(!false); // true
console.log(!88); // false
console.log(!0); // true
console.log(!"red"); // false
console.log(!NaN); // true
console.log(!null); // true
console.log(!!""); // false
console.log(!!"blue"); //true
五、流程控制
1、if 语句
- if 语句
if (condition) {
statement;
}
- if … else … 语句
if (condition) {
statement1;
} else {
statement2;
}
- if … else if … else 语句
if (condition) {
statement1;
} else if {
statement2;
} else {
statement3;
}
var str="abc123";
var num=parseInt(str);
if(num==NaN) {
alert(NaN);
} else if(num==123) {
alert(123);
} else if (typeof num=="number") { // 该条件成立
alert("num");
} else {
alert("str");
}
2、常见方法
-
string.length
string 字符串获取长度,返回 number 。
-
new Date(). getDay()
获取今天星期几,返回 number (0 - 6,0 代表周日)
-
document.write(“内容”)
向浏览器输出内容。
3、switch 语句
switch (expression) {
case value1: statement1;
break;
case value2: statement2;
break;
…
default: statement
}
var week = new Date().getDay();
var weekstr = "";
console.log(week); // 0-6
switch(week){
case 0:
weekstr="日"; break;
case 1:
weekstr="一"; break;
case 2:
weekstr="二"; break;
case 3:
weekstr="三"; break;
case 4:
weekstr="四"; break;
case 5:
weekstr="五"; break;
default:
weekstr="六";
}
document.write("今天是星期"+weekstr);
4、for 语句
用法和 C/C++ 或 java 中的一致。
for ( 语句1; 语句2; 语句3 ) {
被执行的代码块;
}
for( var i = 0; i < 10 ; i++ ){
console.log('i:'+ i);
}
5、for-in 语句
用于遍历对象的属性,也可以遍历数组(不推荐)。
for (var each : object) {
statement;
}
var person = {
name: 'json',
age: 25,
sg: 170
}
for( key in person ){
console.log(person[key]);
}
6、while 与 do… while 语句
var count = 1;
while( count < 10 ){
count++ ;
console.log(count);
}
do {
count-- ;
console.log(count);
} while(count > 1);
7、break 和 continue
break 语句可用于跳出循环;
continue 语句跳出本次循环,继续执行。