JS基本知识点

 弹出警告框 alert("这是我的第一行js代码")

在网页中显示内容 document.write("   ")

向控制台发送内容

console.log("   ")

编写代码一般在外部样式js中   样式 script

多行注释/* */ 单行注释 //

字面量(常量),都是一些不可改变的值

 比如 :1 2 3 4 5 "hello"

alert('123456')

var a ;//声明定义一个变量  默认是undefined

a =898989 ;//给变量赋值

console.log(a)//通过控制台输出变量的值

标识符 - 在JS中所有的可以由我们自主命名的都可以称为是标识符

  标识符中可以含有数字、字母、_、$

  标识符不能以数字开头

  标识符不能是es中的关键字或保留字

  标识符一般采用驼峰命名法

数据类型指的就是字面量的类型

  在JS中一共有六种数据类型

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

  引用数据类型      Object 对象

  其中String Number Boolean Null Undefined属于基本数据类型

  而Object属于引用数据类型

  用\'' 表示''

  \'  表示'

  \n 换行  \t 制表  \\ 表示 \

在JS中所有的数值都是Number类型,

  包括整数和浮点数(小数)  Number.MAX_VALUE 数值型最大值  Number.MIN_VALUE 数值型最小值-Number.MAX_VALUE

  Infinity  无穷大

parseFloat 转化为小数

parseInt 转化为整数

parseFloat(f)*100  保留两位小数

Boolean 布尔值

  布尔值只有两个,主要用来做逻辑判断true

      - 表示真false

      - 表示假

  使用typeof检查一个布尔值时,会返回boolean    除了0 和 空字符 会显示False 其余为True

Null(空值)类型的值只有一个,就是null

  null这个值专门用来表示一个为空的对象

  使用typeof检查一个null值时,会返回object

Undefined(未定义)类型的值只有一个,就undefind

  当声明一个变量,但是并不给变量赋值时,它的值就是undefined

  使用typeof检查一个undefined时也会返回undefined

强制类型转换

 - 指将一个数据类型强制转换为其他的数据类型

 - 类型转换主要指,将其他的数据类型,转换为 String Number Boolean

将其他的数据类型转换为String

undefind 相当于python中的none

将其他的数据类型转换为Number

转换方式一:

  使用Number()函数

  转空字符串NaN

  转布尔类型true  1    false  0

  转数字和字符组合NaN

转换方式二:  - 这种方式专门用来对付字符串  - parseInt() 把一个字符串转换为一个整数  - parseFloat() 把一个字符串转换为一个浮点数

在js中,如果需要表示16进制的数字,则需要以0x开头

  如果需要表示8进制的数字,则需要以0开头

  如果要要表示2进制的数字,则需要以0b开头,但是不是所有的浏览器都支持

将其他的数据类型转换为Boolean

  使用Boolean()函数      - 数字 ---> 布尔        - 除了0和NaN,其余的都是true

      - 字符串 ---> 布尔        - 除了空串,其余的都是true

      - null和undefined都会转换为false

      - 对象也会转换为true

运算符

也叫操作符

  通过运算符可以对一个或多个值进行运算,并获取运算结果

  比如:typeof就是运算符,可以来获得一个值的类型,它会将该值的类型以字符串的形式返回"number" "string" "boolean" "undefined" "object"

算数运算符

  当对非Number类型的值进行运算时,会将这些值转换为Number然后在运算

  任何值和NaN做运算都得NaN

+

      +可以对两个值进行加法运算,并将结果返回

如果对两个字符串进行加法运算,则会做拼串,会将两个字符串拼接为一个字符串,并返回

      任何的值和字符串做加法运算,都会先转换为字符串,然后再和字符串做拼串的操作-

      - 可以对两个值进行减法运算,并将结果返回*

      * 可以对两个值进行乘法运算/

      / 可以对两个值进行除法运算%

      % 取模运算(取余数)

一元运算符

只需要一个操作数

 + 正号 - 正号不会对数字产生任何影响

 - 负号 - 负号可以对数字进行符号的取反 

 - 对于非Number类型的值,它会将先转换为Number,然后再运算

 - 可以对一个其他的数据类型使用+,来将其转换为number,它的原理和Number()函数一样

自增++

  - 通过自增可以使变量在自身的基础上增加1

  - 对于一个变量自增以后,原变量的值会立即自增1

  - 自增分成两种:后++(a++) 和 前++(++a)

      无论是a++还是++a,都会立即使原变量的值自增1

      不同的是a++和++a的值不同      a++的值等于原变量的值(自增前的值)      ++a的值等于新值 (自增后的值)

自减--

  - 通过自减可以使变量在自身的基础上减1

  - 自减分成两种:后--(a--) 和 前--(--a)

      无论是a--还是--a都会立即使原变量的值自减1

      不同的是a-- 和 --a的值不同        a-- 是变量的原值 (自减前的值)        --a 是变量的新值 (自减以后的值)

对于自增和自减的练习:

var n1=10;

var n2=20;

var n =n1++; //

console.log('n=' +n);  // 10

console.log('n1=' +n1); // 11

n = ++n1; //

console.log('n=' +n); // 12

console.log('n1=' +n1); // 12

n =n2--;//

console.log('n=' +n); // 20

console.log('n2=' +n2); // 19

n = --n2; //

console.log('n=' +n); // 18

console.log('n2=' +n2); // 18

JS中为我们提供了三种逻辑运算符!

非 - !可以用来对一个值进行非运算 - 所谓非运算就是值对一个布尔值进行取反操作, true变false,false变true

  - 如果对一个值进行两次取反,它不会变化  - 如果对非布尔值进行元素,则会将其转换为布尔值,然后再取反

所以我们可以利用该特点,来将一个其他的数据类型转换为布尔值

      可以为一个任意数据类型取两次反,来将其转换为布尔值,原理和Boolean()函数一样&& 与  - &&可以对符号两侧的值进行与运算并返回结果  - 运算规则      - 两个值中只要有一个值为false就返回false,

        只有两个值都为true时,才会返回true

      - JS中的“与”属于短路的与,

        如果第一个值为false,则不会看第二个值|| 或  - ||可以对符号两侧的值进行或运算并返回结果  - 运算规则:      - 两个值中只要有一个true,就返回true

        如果两个值都为false,才返回false

      - JS中的“或”属于短路的或

        如果第一个值为true,则不会检查第二个值

&& || 非布尔值的情况 - 对于非布尔值进行与或运算时,会先将其转换为布尔值,然后再运算,并且返回原值 - 与运算: - 如果第一个值为true,则必然返回第二个值 - 如果第一个值为false,则直接返回第一个值 - 或运算 - 如果第一个值为true,则直接返回第一个值 - 如果第一个值为false,则返回第二个值

=

  可以将符号右侧的值赋值给符号左侧的变量+=

  a += 5 等价于a = a + 5

-=

  a -= 5 等价于a = a - 5

*=

  a *= 5 等价于a = a5

/=

  a /= 5 等价于a = a / 5

%=

  a %= 5 等价于 a = a % 5

通过关系运算符可以比较两个值之间的大小关系,

  如果关系成立它会返回true,如果关系不成立则返回false

> 大于号  - 判断符号左侧的值是否大于右侧的值  - 如果关系成立,返回true,如果关系不成立则返回false

>= 大于等于  - 判断符号左侧的值是否大于或等于右侧的值< 小于号<= 小于等于

非数值的情况  - 对于非数值进行比较时,会将其转换为数字然后再比较  - 如果符号两侧的值都是字符串时,不会将其转换为数字进行比较,而会分别比较字符串中字符的Unicode编码

  任何值与NaN作比较时都是false

在网页中使用Unicode编码: &#编码;

相等运算符用来比较两个值是否相等,

  如果相等会返回true,否则返回false

使用 == 来做相等运算  - 当使用==来比较两个值时,如果值的类型不同,则会自动进行类型转换,将其转换为相同的类型,然后再比较

不相等

  不相等用来判断两个值是否不相等,如果不相等返回true,否则返回false

      - 使用 != 来做不相等运算      - 不相等也会对变量进行自动的类型转换,如果转换后相等它也会返回false

===

  全等  - 用来判断两个值是否全等,它和相等类似,不同的是它不会做自动的类型转换

      如果两个值的类型不同,直接返回false

!==

  不全等  - 用来判断两个值是否不全等,和不等类似,不同的是它不会做自动的类型转换

      如果两个值的类型不同,直接返回true

条件运算符也叫三元运算符

语法:

      条件表达式?语句1:语句2;

  - 执行的流程:

条件运算符在执行时,首先对条件表达式进行求值,

        如果该值为true,则执行语句1,并返回执行结果

        如果该值为false,则执行语句2,并返回执行结果

      如果条件的表达式的求值结果是一个非布尔值,会将其转换为布尔值然后在运算

, 运算符

  使用,可以分割多个语句,一般可以在声明多个变量时使用

  括号的优先级比较高

我们的程序是由一条一条语句构成的

语句是按照自上向下的顺序一条一条执行的

  在JS中可以使用{}来为语句进行分组,

      同一个{}中的语句我们称为是一组语句,

它们要么都执行,要么都不执行,

      一个{}中的语句我们也称为叫一个代码块

      在代码块的后边就不用再编写;了  JS中的代码块,只具有分组的的作用,没有其他的用途

      代码块内容的内容,在外部是完全可见的

DOM是为了操作文档(网页)的API,document是它的一个对象BOM是为了操作浏览器的API,window是它的一个对象

常用BOM对象还有:alert、定时器等

window.onload =function () {

document.getElementById('div').title='我看到了'

};

  var link1=document.getElementById('link1');

  link1.href ='http://www.baidu.com';

  link1.title ='去百度网页';

console.log(link1.title);

console.log(link1.id);

通过js对网页进行换肤:

window.onload=function () {

var link1 =document.getElementById('link1');

  link1.href='css.css';

  console.log(link1.id)

}

通过创建点击事件来进行指定的换肤:

window.onload=function () {

var btn01 =document.getElementById('btn01');

  var btn02 =document.getElementById('btn02');

  btn01.onclick=skin01;

          btn02.onclick=skin02;

};

function skin01() {

var link1 =document.getElementById('link1');

          link1.href='css.css'

      }

function skin02() {

var link1 =document.getElementById('link1');

          link1.href='css1.css'

    }

通过js设置style属性:

window.onload=function () {

var div1 =document.getElementById('div1');

  div1.style.color ='red';

  div1.style.background='pink';

  div1.style.fontSize ='30px';

}

通过js操作类属性:

window.onload=function () {

var div =document.getElementById('div');

  div1.className ='box02'

}

在js中用中括号表示变量,如果HTML中的代码也在中括号里需要加上引号标注否则就会把它当成一个变量来处理

document.innerHTML可以读取网页的内容

document.write和innerHTML的区别

document.write只能重绘整个页面

innerHTML可以重绘页面的一部分

js创建函数:

function aa(){

alert('hello!');

  }

// 在js中用function定义一个函数

// 调用函数通过函数名直接调用

// aa();

js中的变量是直接调用如果变量上面没有对变量进行赋值则变量就会返回一个默认值,而函数可以完成预解析,只要代码中有对函数的描述,就会返回描述的内容

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,716评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,558评论 1 294
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,431评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,127评论 0 209
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,511评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,692评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,915评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,664评论 0 202
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,412评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,616评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,105评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,424评论 2 254
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,098评论 3 238
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,096评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,869评论 0 197
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,748评论 2 276
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,641评论 2 271

推荐阅读更多精彩内容