前端第六次讨论班——javascript基础-CSDN博客

本文链接：https://blog.csdn.net/Jamam/article/details/116953930

文章目录

JS与html、css

html相当于页面的骨架，css相当于外表，js为其添加动作

js简述

js全称是javascript，是web的脚本语言。它最初由Netscape(网景公司)的Brendan Each（布兰登·艾奇，javascript之父）发明，刚开始的命名是Livescript，后来Netscape公司与Sun公司合作，为了让它看起来像Java，才改名为Javascript。因此JS与Java在语法、名称和命名规范上都有许多相似之处。

浏览器只支持这一种语言（当然java等其他的也支持，但是要安装插件，浏览器本身就支持的只有js）

js主要功能

嵌入动态文本于html页面
对浏览器的事件作出响应
读写html元素
在数据被提交到服务器之前验证数据
检测方可的浏览器信息，控制cookies
基于Node.js进行服务端编程

js基础语法

1.js引用方法

内部引入 在head或body中,用script标签包裹
外部引入 <script src="main.js"></script>

2.js语句

var 姓名 = "某某";
alert('我是'+姓名);

严格区分大小写
每个语句都应以分号结尾（不加时编译器会自动加上，单行代码会执行正常，但是多行代码容易出错误）
单行注释// ，多行注释/* */
注意标识符和关键字（关键字会自动高亮）
忽略空白符（空格换行 tab）

JS数据类型

基本数据类型
- Number 数字
  - int
  - float
  - NaN （程序出现错误时出现，不是一个数，但本身是一个Number类型）
  - Infinity （无穷）
- String 字符串
  - 引号嵌套① js '我说：“你好”'；②'he\‘s Bob’'
  - 字符串断行①'a'+'b';②模板字符串，反引号
- Boolean 布尔
  - true或false
- Array 数组
  - [ ]包裹，每一项可以是字符串、数字、对象等任何数字类型
- Object 对象

var user = {
    name:'黄哈哈';
    gender:'女';
    clazz:'一班';
}

对象取值举例：user.name获取名字

0,’’,NaN,null,undefined都默认为false

JS变量

语法：var 名称 = 值;

var a = 1;//先声明再定义
a = 2; //定义值可以覆盖
a = true;//Boolean
a = {}; //Object
a = []; //数组，也是Object
console.log(typeof a);//打印数据类型

js控制流/条件语句

//js条件语句
if(条件){
//条件为true的代码
} else {
   if（）{
   //...
   }
   else{
   ...
   }
}

if(){
}else if{
}else if{
}

var day = 1;
switch(day) {
  case 1:
    console.log("星期"+day+"：火锅");
    break;
  case 2:
    console.log("星期"+day+":烤肉");
    break;
  //...
  default:
    console.log("今天减肥”);
}

JS运算符

+，-，*，/，%

++，--

>，>=，<，<=

=，==，===，!=

1 == '1',true 不同类型先做类型转换，再判断
1 === '1',false 不做任何转换，直接判断

+=，-=，*=，/=

&&，||，！

"true && false",false
"true || false",true

循环语句

for(var i=0;i<=3;i++){
  console.log(i);
}

while(i<4){
  console.log(i);
  i++;
}

js函数

函数的作用

用于封装代码，提高代码重用性
可以控制数据流
作用域

定义function 函数名(){//代码}
使用 函数名()；

function buy(money){
  if(money){
     alert("欢迎下次光临");
  }
  else {
     alert("没钱还想买东西？");
  }
}
buy();
buy(a);
buy(money);

全局变量：在函数外定义的变量，可以全局使用，使用不甚容易污染window的其他属性
局部变量：在函数内部定义的变量，只能在函数内部使用

window是js最大、最底层的对象

window对象

提示类对象

alert("危险警告！");//纯提示情况，只起提示作用
var a = comfirm('确认删除吗？');//返回用户的操作，true或false
var b = prompt("您的姓名是？");//返回用户的回答
console.log(b);//用户输入回答后才会打印

出现提示类窗口时，程序的执行都会暂停，等待用户动作后再继续执行

时间类

定时器：window.setTimeout(方法，延时)

window.setTimeout(function(){
   console.log("延时2秒后执行");
},2000);

计时器：window.setInterval(方法，时间间隔);

var count = ;
window.setInterval(function(){
   console.log(“第”+count+"次执行");
   count++;
},2000);

清除计时器：clearInterval(所要清除的计数器名字)；

var count = 0;
var timer = setInterval(function(){
   count ++;
   if(count > 3){
      clearInterval(timer);
   }
   console.log(count);
},2000);

setTimeout 和 setInterval 都会把function先放到一个队列里，依然在窗口外头

setTimeout(function(){
   console.log('时间到了');
},0);
console.log("我虽然排在后面，但是我先打印");//没出过窗口

预编译阶段和代码执行阶段

js代码执行分成两个阶段：先进行预编译，再按顺序逐行执行代码

预编译：把加var的变量提升带代码段的最前面，变量声明会提升，变量赋值不会提升；把function声明的整个函数提升