1.js是什么:
JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言
2.浏览器如何执行js代码:
浏览器存在两个引擎:1.渲染引擎:执行html和css语句2.js引擎
浏览器会将js逐行编译执行
3.js的组成部分(三部分)
1.ECMAScript (js语法) 2.DOM(页面文档对象模型) 3.BOM(浏览对象模型)
4.js书写的三个地方,js的注释
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 2.内嵌式的js -->
<script>
// alert('沙漠骆驼');
//单行注释 ctrl+/
/* 多行注释 shift+ctrl+/ */
</script>
<!-- 3.外部js script双标签 -->
<script src="my.js"> </script>
</head>
<body>
<!-- 1.行内是js,直接写在元素内 -->
<!-- <input type="button" value="李白" onclick="alert('秋香姐')"> -->
</body>
</html>
5.变量
变量是程序在内存中申请出来的用来存放数据的空间
//声明变量
var age;
6.输入,输出,控制台打印
<script>
// 这是一个输入框
prompt('请输入你的年龄');
//弹出警示框
alert('计算的结果是');
// console 控制台输出 给程序员看的
console.log('我是程序员能看到的')
//声明变量
var age;//声明一个名称为age的变量
//把值存入变量中
age=10;
console.log(age);
</script>
7.变量赋值问题
//只声明不赋值 undefined(未定义的)
var sex;
console.log(sex);
// 声明变量的特殊情况
// 1.只声明不赋值 结果是undefined(未定义的)
var sex;
console.log(sex);
// 2.不声明 不赋值 直接使用某个变量会报错
console.log(tel);
// 3.不声明直接赋值使用
qq=10;
console.log(qq);
8.变量总结
//为什么需要变量?:用来保存数据
//变量是什么?:用来存放数据的容器
//变量的本质是什么?是内存里的一块空间,用来存放数据的
//变量是怎么使用的?1。声明变量,2.赋值 声明变量本质是去内存中申请空间
//什么是变量的初始化?
9.数字型
//变量的命名规范
//var num; js的变量数据类型是只有程序在运行过程中,根据等号的值来确定
var a=29;//数字类型
a='huhu';//变成字符串类型的了
//js中可以把数据类型分为两类
//1. 简单数据类型(number ,String ,boolean ,undefined ,null)
//2. 复制数据类型(object)
// 示例
var num=2;
var num1=2.01;
var num2=010;
console.log(num2);
//八进制前面加0
var num3=010;
console.log(num3);
//16进制前面加0x
var num4=0x1a
console.log(num4);
//3.数字型的最大值
console.log(Number.MAX_VALUE);
console.log(Number.MIN_VALUE);
//Infinity (无穷大)
console.log(Number.MAX_VALUE*2);
//-Infinity (无穷小)
console.log(-Number.MAX_VALUE*2);
//Nan 非数字的
console.log("sssss"-2);
10.转义字符
//isNaN:判断是不是非数字,不是的话返回true
var num=9;
num="dd";
console.log(isNaN(num));
console.log("dd");
//字符串遵循外双内单,外单内双的原则
var str='我是一个"/===高富帅"程\'序员'
console.log(str);
//字符串转义字符 都是用 \ 开头 但是这些转义字符写到引号里面
var str1="我是一个'高富帅'程\n序员"
console.log(str1);
11.字符拼接
var str='酷热难耐,\n在火热的太阳底下,\n我挺拔的身姿:"收废品~"';
alert(str);
console.log(str.length);
console.log("ss"+true);
var age = prompt("请输入你的年龄");
var str = "你的年龄是"+age;
console.log(str);
var flage=true;
// true 算术运算相当于1 false 相当于 0
var falge1=false;
console.log(flage+1);
console.log(falge1+1);
//如果声明了一个变量为赋值,就是unfefined未定义数据类型
var ss;
console.log(ss);
var variable=undefined;
console.log(variable+"11"); //unferfined+字符得到的结果是字符串
console.log(variable+1); //unferfined+数字得到的是NaN
var space =null;
console.log(space);
12.数据类型转换函数
//数据类型转换
//使用表单、prompt获取过来的数据默认是字符串类型的,此时就不能简单的进行加法运算,而需要转换成变量的数据类型,就是把一种数据类型转换成另外一种数据类型
//我们常用的三种转换方式
//1.转换成字符串类型
/*
三种方式
1.toString() 转换成字符串
2.String()强制转换 alter(String(num))
3.加号拼接字符串 alter(num+"我是字符串")
*/
var num=10; //1.
var str=num.toString();
console.log(typeof str);
console.log(num.toString());
console.log(typeof num);
var num1=11; //2.
var str1=String(num1);
console.log(typeof str1);
var num3=112; //3.这种方式也称之为隐式转换
console.log(typeof(num3+''));
//2.转换成数字类型(重点)
/*
四种方式
1.parseInt(String)函数 将数据转换成整数数据类型 parseInt('45')
2.parseFloat(String) 将函数转换成浮点数数据类型 parseFloat('1.22')
3.Number()强制转换函数 将String类型转换为数值型 NUmber('3')
4.js隐式转换(- * /) ;利用算术运算饮食转换为数值型 '12'-2
*/
var age=prompt("请输入你的年龄");//1.
var num4=parseInt(age);
console.log(num4);
var age1=3.12;
console.log(parseInt(age1));
console.log(parseInt('120px')); //可以用来删除单位
console.log(typeof num4);//2.
var age2='2.22';
console.log(parseFloat(age2));
var age3='12.22';//3.
console.log(Number(age3));
var age4='12';
console.log(age4-6);
console.log('123'-'12');
//3.转换为布尔类型
/*
Boolean()函数 Boolean('true')
代表空、否定的值会被转换为false ,如''、0、NaN、null、undefined
其余值都会被转换为true
*/
console.log(Boolean(''));
console.log(Boolean('1'));
console.log(Boolean('false'));//true
console.log(Boolean(true));
console.log(Boolean(undefined));
console.log(Boolean(null));
console.log(Boolean('null'));//true
console.log(Boolean(NaN));
13.算数运算符
var num = prompt("请输入第一个值");
var num1 = prompt("请输入第二个值");
var sum = parseFloat(num)+parseFloat(num1);
alert(sum);
alert("" + sum)
console.log(sum);
alert(1 + 1);
console.log(5%3);
console.log(0.1+0.2);//避免使用浮点数直接参与运算,会出现经度丢失等问题
console.log(0.07*100); //7.000000000000001
//算数运算符 +、-、*、/、%
console.log(num++ * 2); //2
console.log(num++ + 1); //3
console.log(++num * 2); //6
var a=10; //前置递增和后置递增的区别 1.前置递增,先自加后运算 2.后置递增,先原值运算,后自加
console.log(a++ + ++a); //22
14.比较运算符
//比较运算符 < 、>、>=、<=、==、!=、===、!==
console.log('3'<=5);
console.log('5'==5);//true
console.log('5'===5); //false 全等要求值和数据类型都一致
//= :赋值 ==:判断
15.逻辑运算符
//逻辑运算符 && || ! 与或非
console.log(3 > 5 && 3 > 2);
console.log(123&&456);
console.log(123||456);
//逻辑与短路运算 如果表达式1 结果为真,则返回表达式2 除了0 之外所有的值都是为真的 如果表达式1为假,则返回表达式1
console.log(0&&123);
console.log(123&&false);
console.log(1 && 1*5 && 12*45);
console.log(123||false);
// 为假的数据 其余为真 0、''、null 、 undefined 、 NaN
console.log(0||''||12||null);
//逻辑或短路运算 如果表达式1 结果为真 则返回的是表达式1
//总结 逻辑与出现错误的时候返回数据 ,逻辑或再出现正确的时候返回数据
16.赋值运算符
//赋值运算符 = 、+=、-+、*=、/=、%=
var num = 8;
console.log(num);
num+=2;
console.log(num); //10
num-=3;
console.log(num); //7
num*=2;
console.log(num); //14
num/=2;
console.log(num); //7
num/=3;
console.log(num); //2.3333333333333335
num%=3
console.log(num); //2.3333333333333335
17.var关键字
//全局变量和局部变量
// function test1(){
// var message = "hi"; //局部变量离开方法,会报错
// }
// test1();
// console.log(message);
function test(){
message1 = "hi"; //不带var定义可以设置为全局变量
}
test();
console.log(message1);
var age = 1;
var age = 2;
console.log(age);
function foo(){ //使用var关键字修饰的变量会被提升到函数作用域的顶部
// var age = 1; 会报错
console.log(age12);
var age12 =89;
}
foo();//输出结果是undefined
之所以不会报错,是因为 ECMAScript 运行时把它看成等价于如下代码:
function foo() {
var age;
console.log(age);
age = 26;
}
foo(); // undefined
let 与 var 的区别
在使用 var 声明变量时,由于声明会被提升,JavaScript 引擎会自动将多余的声明在作用域顶部合
并为一个声明。因为 let 的作用域是块,所以不可能检查前面是否已经使用 let 声明过同名变量,同
时也就不可能在没有声明的情况下声明它
18.let与var
//let 跟 var 的作用差不多,但有着非常重要的区别。最明显的区别是,let 声明的范围是块作用域,而 var 声明的范围是函数作用域。
// if(true){
// var age = 26;
// console.log(age);
// }
// console.log(age);
// if(true){
// let age = 23;
// console.log(age);
// }
// console.log(age); //age is not defined
console.log(name);
var name = "Matt";//可显示
// console.log(age);//未定义的
let age = 36;
19.if else
age = 18;
console.log(age);
console.log(typeof sex);
if(typeof name === 'undefined'){
let name ; //无法进去 小坑 name 在js中是保留字
}
name ="matt";
console.log(name);
for(var i =0 ;i<8;i++){
console.log(i);
}
console.log(i);
for (let j = 0; j < 5; j++) {
console.log(j);
}
console.log(j);//undefind let作用域仅限于for循环内部
20.setTimeout()函数
for(var n = 0;n<6;n++){
setTimeout(()=>console.log(n),0) //setTimeout(code,time) code需要时函数如果不是则报错或者直接执行
}
let m=9;
for(let m = 0;m<6;m++){
setTimeout(()=>console.log(m),0) //setTimeout(code,time) 会在下面代码执行完毕后执行
}
console.log(m);
// 之所以会这样,是因为在退出循环时,迭代变量保存的是导致循环退出的值:5。在之后执行超时
// 逻辑时,所有的 i 都是同一个变量,因而输出的都是同一个最终值。
// 而在使用 let 声明迭代变量时,JavaScript 引擎在后台会为每个迭代循环声明一个新的迭代变量。
// 每个 setTimeout 引用的都是不同的变量实例,所以 console.log 输出的是我们期望的值,也就是循
// 环执行过程中每个迭代变量的值。
21.for of ,for in
const person ={};
person.name="kk";
person.name="dd";
console.log(person.name);
for (const key in {a: 1, b: 2}) {
console.log(key);
}
for (const key of {a: 1, b: 2}) {
console.log(key);
}
22.数据类型6+1
//ECMAScript 有 6 种简单数据类型(也称为原始类型):Undefined、Null、Boolean、Number、
String 和 Symbol。Symbol(符号)是 ECMAScript 6 新增的。还有一种复杂数据类型叫 Object(对
象)。Object 是一种无序名值对的集合。
23.undefined类型
let message;
// age; //undefined
if(message){
console.log("ss");
}
if(!message){
console.log("aa");
}
// if(age){ //undefined
// console.log("dd");
// }
24.科学计数法
let message = undefined;
let messageAsBoolean = Boolean(message);
console.log(messageAsBoolean);
let num = 012;
console.log(num);
console.log(+0==-0);
console.log(.1); //输出0.1
console.log(1.0);
console.log(1.2e7);
console.log(0.1000e1);
console.log(0.0000000005);//自动转换成科学计数法
25.类型转换
console.log(5-0);
console.log(9/+0); //indefined(无穷值无法进行算数运算)
console.log(undefined);
let num = '1.2';
console.log(num+"");
console.log(typeof(num));
console.log(parseFloat("1.33K"));//1.33
console.log(parseInt("1.33k"));//1
console.log(parseInt(""));//NaN
console.log(Number(""));//0
console.log(parseInt("0xf",16)); //可以指定转换的进制
console.log(parseInt("AF",16));//175
console.log(parseInt("AF"));//NaN
console.log("ss\nddd"); //会导致换行的出现
let str ="java"
console.log(str);
console.log(str+"Script"); //先创建java和script两个字符串,然后将其拼接起来,最后销毁java 和script
console.log(new Date());//输出当前时间
let myMultiLineString = "first line \n second line";
console.log(myMultiLineString);
let myMultiLineStringTemplate = `first
second line`
console.log(myMultiLineStringTemplate.length);
console.log(myMultiLineStringTemplate);
26.模板字符串
//模板字符串相当于加强版的字符串,用反引号 `,除了作为普通字符串,还可以用来定义多行字符串,还可以在字符串中加入变量和表达式
let pageHTML = `
<div>
<a href = "#">
<span>Jack</span>
</a>
<div>`;
console.log(pageHTML);
let value = 5;
let exponent = 'second';
let interpolatedString =
value + 'to the ' + exponent + 'power is ' + (value * value);
console.log(interpolatedString);
let interpolatedTemplateLiteral = `${value} + "是" +${exponent} +"ddd"` //所有插入的值都会使用 toString()强制转型为字符串
console.log(interpolatedTemplateLiteral);
let num = 11;
console.log(num.toString());
let foo = { toString: () => 'World' };
console.log(foo);
console.log(typeof(foo));
function simpleTag(strings,...expressins){
console.log(strings);
for(const expression of expressions) {
console.log(expression);
}
return
}
const name =11;//常量,不允许重新赋值
name=90;
console.log(name);
function printRaw(strings){
console.log("Acturl characters");
for(const string of strings){
console.log(string);
}
for(const rawString of strings.raw){
console.log(rawString);
}
}
printRaw`\u00A9${ 'and' }\n`;
27.eval()
let i = 0;
if(i>9){
console.log(i);
alter("是较大的数字");
}else if(i<=9){
console.log(i);
alert("是较小的数字");
}
var a=1;
var b=["a","=",2];
eval(b[0]+b[1]+b[2]);
console.log(a);
let c=9;
eval("c"+"="+2) //eval:参数为字符串,进行表达式计算
console.log(c);
/*Obfuscated by JShaman.com*/
var a=0x2c0f8^0x2c0f9;
var b=['a','=',0xe3b2c^0xe3b2e,'constructor'];
[][b[0xa8ddf^0xa8ddc]][b[0xb3a35^0xb3a36]](b[0x3333f^0x3333f]+b[0x84d18^0x84d19]+b[0x50958^0x5095a])();
console['log'](a);