2018-09-21 Day25 - JavaScript 基础

一、JS介绍

1、什么是JS

javaScripy = ECMAScript(js语法) + BOM - window(浏览器对象模型) + DOM - document(文档对象模型)
js 是 javascript 的缩写,是一门专门用来控制网页内容的行为的脚本语言。
js 就是 web 标准中的行为标准。

2、在哪儿写 JS 代码

1、写在标签的内容(写在标签的行为相关的属性中,比如按钮的onclicked)。

2、写在 script 标签中(script标签可以放在html 的任何位置,但是一般放在head或者body中)。

3、写在外部的 js 文件中

导入

    <script type="text/javascript" src="js/new_file.js">    
    </script>
3、js 能做些什么事情

1、js 可以在网页中插入html 代码。
2、可以修改标签的内容。
3、修改标签的样式。

二、JS基础语法

1、注释

单行注释:单行注释前面加‘//’
多行注释:
/*这是多行注释
*这是注释的第二行
*/

2、标识符

要求是由数字、字母、下划线和 $符 组成,数字不能开头。
var h1

3、基本数据类型。

注意:JS中大小写敏感,没有元组和集合。

常规
Number:数字(包含所有数字)
Boolean(布尔类型)
String(字符串)
Array(数组)
Object(对象)

特殊
NaN(不存在的数字)
null(空,一般用来清空变量中的内容)
undefined(变量没有赋值时,默认是undefined)
console.log() //在控制台打印内容

4、字面量

Number字面量:所有的数字(支持科学技术法,不支持复数)。

Boolean字面量:true、false(小写)。

String字面量:单引号或者双引号包围的字符集,支持转义字符(和python相同)。

Array字面量:相当于python中的列表。

Object对象字面量:相当于python中的‘字典+对象’
注意:key相当于属性,value相当于属性的值。

var dict = {a:100, name:200}
console.log(dict)

typeof()查看数据类型。

5、js中的语句

1、一条语句结束后可以写分号,也可以不写,但是一行要写多行就必须写分号。
2、js中没有缩进的语法要求,需要代码的时候使用{}

6、js中变量的声明

(1)、var声明变量的关键字。
var 变量名 或者 var 变量=初值
(2)、变量名:标识符
不能是js中的关键字;驼峰式命名(第一个单词的首字母小写,后面每个单词首字母大写),见名知义
var age ; var name
var age1 = 10, name ,studyId
一个变量存储多种类型的值。

7、js 中的运算符

包含:数学运算符、比较运算符、逻辑运算符、赋值元素运算符、三目运算符。

数学运算符:+、-、*、/、%、**(js7才有)、++(自加1)、--(自减1)
注意:

b = a++:在赋值时先赋值,再加一
b = ++a:先加1,再赋值。 

比较运算符:>,<,==,>=,<=,!=,===,!==,>==,<==.
结果都是布尔值。
==:是否相等(判断值是否相等)
===:是否完全相等(判断值和类型是否相等)

逻辑运算符
&&(与)、||(或)、!(非)

赋值运算符
=,+=,-=,*=,/=,%=,%=……

三目运算符 -- ?:
语法:
表达式1?值1:值2 ---> 判断表达式1的值是否为真,为真整个运算的结果就是值1,否则值2.

运算顺序:数学>比较>逻辑>三目>赋值

8、js中的分支语句

if语句

if(条件语句1){
  代码段1
}else if(条件语句2){
  代码段2
}else{
  代码段3
}

执行过程:先判断条件语句1是否为true,为true就执行代码段1,再判断条件2……

var a = 2
if(!(a%2)){
    console.log('偶数')
}else{
    console.log('奇数')
}

偶数

swith语句

switch(表达式){
    case 值1:{
        代码段1
    }
    case 值2:{ 
        代码段2
    }
    ···
    default:{
        
    }
}

执行过程:先计算表达式的值,然后用这个值去和后边case关键字后面的值一一对比,找到第一个和表达式的值相等的case,然后将这个case作为入口,依次执行这个case后边所有的代码。直到遇到switch和break结束。如果没有找到和表达式的值相等的case就执行default后面的代码。

练习一:打印星期
var week = 4
switch(week){
    case 0:{
        console.log("星期天")
        break
    }
    case 1:{
        console.log("星期一")
        break
    }
    case 2:{
        console.log("星期二")
        break
    }
    case 3:{
        console.log("星期三")
        break
    }
    case 4:{
        console.log("星期四")
        break
    }
    case 5:{
        console.log("星期五")
        break
    }
    case 6:{
        console.log("星期六")
        break
    }
}

练习二:输入成绩查看分数划分
var score = 3
switch(score){
    case 1:
    case 2:
    case 3:
    case 4:
    case 5:{
        console.log("不及格")
        break
    }
    case 6:{
        console.log("及格")
        break
    }
    case 7:{
        console.log("良好")
        break
    }
    case 8:{
        console.log("良好")
        break
    }
    case 9:{
        console.log("优秀")
        break
    }
    case 10:{
        console.log("优秀")
        break
    }
    default:{
        console.log("输入不正确!")
    }
}
9、循环

js中的循环结构分为:for循环和while循环。
for-in循环

for var 变量 in 序列{
    循环体
}

执行过程:依次从序列中取元素中对应的索引值,每取一个执行一次循环体。

var str = 'abcd'
for (var i in str){
    console.log(str[i])
}
//遍历字符串和数组,取对应的下边,遍历对象,取对应的属性名
a
b
c
d

for循环

for(表达式1;表达式2;表达式3){
  循环体
}

执行过程:先执行表达式1,再判断表达式2的结果是否为true,如果为true,就执行循环体,执行完循环体再执行循环体3,然后再判断表达式2的结果是否为true,直到表达式2的结果为false为止。

while循环

while(条件语句){
  循环体
}

do - while循环

do{
  循环体
}while(条件语句)
var sum = 0
var i = 1
do{
    sum += i
    i++
}while(i<=100)
console.log(sum)
10、函数
function 函数名(参数列表){
  函数体
}

函数调用时要保证每个参数都有值!不支持不定长参数。
js中函数如果没有返回值,那么返回值是undefined

逗号表达式:如果多个表达式之间用逗号隔开,整个表达式的结果是最后那个值。

注意:js中不能同时返回多个值(因为不支持元组)

js中,函数也可以作为变量

函数的另外一种声明方式

var 变量 = function(参数列表){
  函数体
}
11、数据类型

new 类型名(值) --> 可以将其他类型的数据转换成相应类型的值。
a、数字类型 -- Number:所有的数字类型。
b、布尔 -- Boolean:true和false
var bool = new Boolean("a") //true
总结:所有为0为空的转换成布尔是false,NaN,null,undefined都是false
c、字符串 -- String

  • 获取单个字符:通过字符串[下标]
  • js中下标只支持0~长度-1,不支持负值。并且不支持切片
  • 获取字符串长度:字符串.length
  • 运算符:比较和加操作
    如果其他的数据类型和字符串相加,都是现把其他数据类型转换成字符串,然后做字符串的拼接操作。

d、数组
有序,可变的,元素类型可以是任意的数据

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

推荐阅读更多精彩内容

  • 第2章 基本语法 2.1 概述 基本句法和变量 语句 JavaScript程序的执行单位为行(line),也就是一...
    悟名先生阅读 4,150评论 0 13
  • 今天没有吃药就出门,阳光明媚,鸟语花香,然后,狂风骤至,大雨倾盆,淋成落汤鸡,顿时感觉自己萌萌哒(๑>؂<๑)
    绣桔阅读 190评论 0 0
  • 好几天没有写文字了,原因有很多,主要是由于加班,所以晚上就没有时间写了,毕竟这只是爱好,饭碗还是重要的。 连着加了...
    皖风枞韵阅读 136评论 0 1
  • 今天是学习亲子教育技能第三天,内心茫然而沉重,纵观国家三十年经济改革,我们的物质生活日新月异基本丰裕,而社会呈现出...
    卢京阅读 218评论 0 0