我的前端学习之JavaScript笔记--基础语法

JS-尚硅谷

JS基础

JS编写位置

• 可以写在onclick属性中

<button onclick ="alert('点击');">点击一下</button>

• 可以写在超链接href属性中

<a href="javascript:alert('点击');">点我一下</a>

添加js的方式

• 内部添加,一般添加在body中，head中也可以

<script>
//code
</script>

• 外部的js,可以在不同的页面中同时引用（推荐使用），但一旦引入外部文件，不能编写文件，浏览器自动忽略，可以创建一个新的script标签继续编写。

  <script src="script.js" > </script>
  

• 内联(不推荐)

<button onclick="createParagraph()">
click me
</button>

• 类型
• 对象
• 变量
• 数组
• 运算符
• 函数
• 控制结构
• 闭包

基本语法

1. 注释// /*
2. 严格区分大小写
3. 语句以；结尾，不写的话会自动添加，但会消耗系统资源
4. 空格和换行会被忽略，可以利用空格、换行对代码进行格式化

字面量 不可改变的值，比如1，2，3，可以直接使用，但一般不直接使用。

变量 var 可以用来保存字面量，可以任意改变，更方便使用。

六种数据类型

基本数据类型： String 字符串 Number 数值 Boolean 布尔值 Null 空值 Udefined 未定义

引用数据类型： Object 对象

强制类型转换

将其他数据类型转换成String类型

1. 调用被转换数据类型的toString（）方法，不会影响原变量，会将转换的结果返回；null 和undefined没有toString方法

var a=123;
a=a.toString();
console.log(typeof a);
console.log(a);

2. 调用String函数，会将null转换为“null”，undefined转换为“undefined”

var a=123;
a = String(a);
console.log(typeof a);
console.log(a);

将其他数据类型转换为Number

1.纯数字的字符串，则直接转换为数字

2.有非数字内容，则转化为NaN

3.如果字符串是一个空串货全是空格，则转换为0

4.布尔转数字true转1，false转0，null转0，undefined转NaN

5.parseInt（）把字符串转换为一个整数 ; parseFloat（）把一个字符串转换为一个浮点数

var a="12";
a=Number(a);
console.log(typeof a);
console.log(a);

其他进制的数字

0x开头表示16进制；

0开头表示8进制，有些会当成10进制；

var a=070;
a=parseInt(a，10);//10指定了进制
console.log(typeof a);//number
console.log(a);//70

0b开头表示2进制，但不是所有的浏览器都支持。

其他数据类型转换为Boolean

除了0、空字符串、空格、null、undefined、NaN，都是true，对象也会转换为true

var a=123;
a=Boolean(a);
console.log(typeof a);//boolean
console.log(a);//true

运算符

typeof返回值的类型

算术运算符

• • 可以将两个字符串拼接，多个字符串换行拼接
  • 可以对两个值Number进行加法计算，并返回结果
  • 123+“1” 任何的值和字符串做加法，或被转换成字符串
• -*/运算，会被转换成Number

result =2*undefined;//NaN
result =2*null;//NaN

• % 取模（取余数)

• 一元运算符

  • +正号 不会对数字产生影响
  • -负号 会对数字产生影响，取反

• 自增++

  • a++是表达式，是原值；a是变量；++a是自增后的值

  • 例如：

    var d =20;
    var result = d++ + ++d +d；//20+22+22
    

• 自减–

  • 变量a自身减一；a-- 返回a的原值； --a返回自减后的值

逻辑运算符

• ！非运算

  • 对布尔值进行取反操作，true变false；
  • ！！a，任意数据类型可以转为布尔值，不被改变；
  • 对非布尔值进行运算，会转换类型为布尔值，和Boolean（）函数一样

• && 与

  • 对符号两侧的值进行与运算并返回结果，两个均为true结果返回true；第一个为false则直接返回false；
  • 非布尔值的情况，进行与运算，现将其转换为布尔值再进行运算，并返回原值，两个均为true，返回后边的原值；两个都为false，返回靠前的false
  • 如果第一个值为true，则必然返回第二个值
  • 如果第一个值为false，则必然返回第一个值

• || 或

  • 只要有一个true，就返回true

赋值运算

a+=5；相当于a=a+5

+= -= *= /= %=

关系运算符

>  <   >=   <=  

任何和NaN比较，结果返回false

相等运算符

• = 赋值

• == 相等 会使类型转换为相同类型在进行比较；NaN不和任何值相等包括它本身，可以通过isNaN()函数判断是否为NaN

  • ！=相等返回false，不等返回true，会做自动类型转换

• === 全等，判断两个值是否全等，不做类型转换

条件运算符

先判断条件，true则执行第一个语句；false则执行第二个语句

• prompt()可以弹出一个提示框，用户可以在文本框中输入一段内容，该函数需要一个字符串作为参数，该字符串将作为提示框的提示文字
• 用户输入的内容将作为函数的返回值返回，可以定义一个变量来接收该内容

var score = prompt("输入小明的期末成绩：")；
alert(score);

循环语句

创建while循环的步骤：

1. 创初始化一个变量
2. 在循环中设置一个循环条件
3. 定义一个更新表达式，每次更新初始化变量

var i=0;//初始化变量
//条件表达式
while(i<=10){
	alert(i);
	i++;   //更新初始化变量
}

do … while循环：先执行循环体，再判断条件

do{

//循环语句

}while(i<10)

for 循环

for （初始化；条件表达式；更新表达式）{

}

for（var i=0；i<10;i++）{

}