JavaScript01: 基础_js firm-CSDN博客

本文链接：https://blog.csdn.net/qq_35976650/article/details/89341273

一、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）是一个特殊的数字。
1. 任何涉及NaN 的操作（例如NaN/10）都会返回 NaN.
2. NaN与任何值都不相等，包括NaN本身。
isNaN()

检测n是否是**“非数字"**，返回boolean值，说明：isNaN() 在接收到一个值之后，如果不是数字，会尝试将这个值转数字。
Number()

把参数转换为数字返回，如果不能转化为数字返回 NaN.
parselnt()

用于把字符串转换成整数数字，会忽略字符串前面的空格，直至找到第一个非空格字符。

说明：
1. 转换空字符串返回NaN；
2. 如果有第二个参数表示多少进制。
parseFloat()

用于把字符串转换成浮点数数字，从第一个字符开始解析每个字符，直至遇见一个无效的浮点数字符为止。

说明：
1. 它始终都会忽略前导的零；
2. 仅第一个小数点有效。

<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 语句跳出本次循环，继续执行。

JavaScript01: 基础

文章目录

一、JavaScript 初识

二、语法规则

1、js 输出

2、js 语句与注释

3、js 变量

三、数据类型

0、typeof

1、空 undefined 和 null

2、数字 number

3、string

4、boolean

四、操作符

1、算术操作符

2、赋值运算符

3、比较运算符

4、三元操作符

5、逻辑运算符

五、流程控制

1、if 语句

2、常见方法

3、switch 语句

4、for 语句

5、for-in 语句

6、while 与 do… while 语句

7、break 和 continue