day25 js基础

1.js是javaScript的缩写,是一门脚本语言,专门用来负责网页上的行为(可以直接写到网页中)

2.在哪儿写js代码

a.可以写在script标签中(理论上script标签可以放到html文件中的任何位置,实际开发的时候一般放在head或者body中)
b.写到标签的事件属性中(例如:onlick)
c.写到外部的js文件中(.js)

3.js在网页中能做什么事情

a.在网页的不同位置插入html代码
b.修改某个标签内容
c.修改标签的样式

4.怎么写

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <!--导入外部的js文件-->
        <!--<script src="js/index.js"></script>-->
        <script src="js/07-数据类型.js" ></script>
        <!--一个html中可以在多个位置插入script标签-->
        <script type="text/javascript">
            //在这儿写js代码
            function insertP(){
                document.write('<p>python</p>') 
            }
        </script>
    </head>
    <body>
        <h1>千锋的所有学科</h1>
        
        <button onclick="window.alert('按钮被点击')">按钮</button>
        
        <!--<button onclick="document.getElementById('hh').innerHTMl.'千锋的所有老师'">修改标签</button>
        
        <button onclick="document.getElementById('hh').style.color = 'red'>修改样式</button>-->
        <!--往html中插入内容-->
        <script type="text/javascript">
            for(var i=0;i<10;i++){
                document.write("<p>施工队</p>")
            }
        </script>
    </body>
</html>

01js基础语法

  • 1.js中的注释
//这是单行注释

/*
 * 这是多行注释
 */
  • 2.语句

一条语句结束需要加分号
一行写多条语句必须使用分号隔开

  • 3.js没有缩进问题,用{}表示一个块

  • 4.基本数据类型

Number(数字),String(字符串)
Boolean(布尔类型) Array(数组)---列表,Object(对象)---字典
null,undefined
//在控制台打印括号中的内容,功能和python中的print
console.log('hello world');
console.log('你好,python!')
  • 5.字面量
//数字字面量
89;
100;
10.34;
3e8;

//字符串字面量
'abc';
"abc";

//布尔字面量
true;
false;

//数组字面量
[1,2,'ban',4,true];
[];

//对象的字面量(对象的key值又是属性,不用加引号)
//{a:20,b:"abc"}
var dict = {a:'abc',b:'hh'}
console.log(dict.a,dict['b'])
  • 6.标识符
//使用标识符来命名
//a.有字母,数字,下划线_和$组成,数字不能开头
var huhu9_$;

//b.不能关键字
//var for

//c.大小写敏感,y和Y不一样

//d.规范:1.见名知意

02变量的声明

// 在js中可以通过声明变量来保存数据
/*
 * 1.语法
 * var 变量名;
 * var 变量名=初值;
 * 说明 :var是关键字;
 *      变量名:标识符,不能随意使用_或者$开头;驼峰式命名规则(第一个单词首字母小写,后面每个单词首字母大写)
 */
//声明变量
var userName;
//给变量赋值
userName = 'wang';
console.log(userName)

var score = 100
console.log(score)
//同时声明多个变量
var name,age,sex;
var name1='abc',age1=18,sex;
//一个变量可以存储任意类型的值,声明变量的时候,变量没有赋值,默认是
undefined
var a = 'abc';
a = 100;

a = score

03运算符

1.数学运算符:+,-,*,/,%,++,--

//a._,-,*和数学中的求和,求差以及求成绩是一样的
var a = 10+20;
var b = 20-10;
var c = 10*20;
var d = 7%2;


//b.除/和数学中的除一样
var e = 5/2;
console.log(a,e);

//++,--(单目运算符)
/*
 * 语法:变量++/变量--    ++变量/--变量
 * ++:自加1
 * --:自减1
 */

var a1 = 10;
var b1 = 10;

a1++;
++b1;

console.log(a1,b1); //11,11

a1--;
--b1;

console.log(a1,b1) //10,10


var c1 = a1++   //   ++,-- 写到后面的时候,先赋值,再自加、自减
var c2 = ++b1   //   ++,--写到前面的时候,先自加/自减,再赋值
console.log(c1,c2)

2.比较运算符:>,<,==(相等),!=,<=,>=,===(完全等号),!==,>==,<== 结果是布尔值

console.log(10>20)
console.log(10<20)

// ==:判断值是否相等
console.log(5==5)
console.log(5=='5')

// ===:判断值和类型是否相等
console.log(5===5)   // true
console.log(5==='5') // false

console.log(5!=5,'5'!=5) //false,false
console.log(5!==5,'5'!==5)

console.log('==============')

3.逻辑运算符:&&:(与运算),||:(或),!:(非)

console.log('与:',true&&true,true&&false)
console.log('或:',true&&false,false||false)

4.赋值运算符:=,+=,-=,*=,/=,%=

  • 赋值运算符的左边必须是变量
  • 和python的语法一样
var a = 100;
a += 10; // a = a +10
console.log(a)

5.三目运算符 ?:

/*
 * a.格式:
 * 条件语句?值1:值2;
 * 判断条件语句的结果是否是true,如果是true,name表达式的结果就是值1,否则是值2
 */
var b = 10>20:?10:20;
console.log(b)

//求两个数之间的最大值
var a1 =80
var a2 =100
console.log(a1>a2?a1:a2)

6.运算符的优先级和python基本一样。可以通过括号来改变运算顺序

04分支结构

//js的分支结构有两种:if语句,switch语句
/*if语句
 * if(条件语句){满足条件要执行的代码块}
 */

var age = 18
if (age>=18){
    console.log('成年')
}

//b.if(条件){语句块1}else{语句块2}
if(age>=18){
    console.log('成年')
}else{
    console.log('未成年')
}

//c.if-else if -else(相当于python中的if-elif-else)
if(age<18){
    console.log('未成年')
}else if(age<40){
    console.log('青年')
}else{
    console.log('老年')
}

2.switch语句

/*
switch(变量){
    case 值:
        语句1;
        break;
    case 值2:
        语句2;
        break;
    ...
    default:
        语句3;
        break;
}
执行过程:使用变量的值依次和后边每个case后面的值进行判断,看是否相等(是否完全相等)。
如果相等就执行那个case后面对应的语句。
如果前面每个case后面的值都和变量的值不相等,就执行default后面的语句。
*/

var score = 10;
switch (score){
    case 1:
        console.log('素质极差')
        break;
    case 2:
        console.log('素质一般')
        break
    case 10:
        console.log('素质极好')
        break;
    default:
        console.log('没有素质')
        break;
}
console.log('+++++++')
//10分制分数:0-5:不及格,6-7:及格 8-9:良好  10:优秀
score = 9
switch(score){
    case 0:
    case 1:
    case 2:
    case 3:
    case 4:
    case 5:
        console.log('不及格');
        break;
    case 6:
    case 7:
        console.log('良好');
    case 8:
    case 9:
        console.log('良好');
        break;
    case 10:
        console.log('优秀');
        break;
}

05循环结构

js中的循环分为for循环和while循环

1.for循环

a.for-in(和python中的for循环一样)
var arr1 = [1,2,'abc'] 
//x取的是下标
for(var x in arr1){
    console.log(arr1[x])
}

var obj1 = {name:'张三',age:30}
//key 拿到的是属性名
for (var key in obj1){
    console.log(key,obj1[key])
}

var str1='asdfgasasdf'
for (var x in str1){
    console.log(x,str1[x])
}

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

执行过程:先执行表达式1,然后判断表达式2的结果是否是true,如果是true就执行循环体;执行完循环体,在执行表达式3
执行完表达式3,再判断表达式2的结果是否是true,如果是true有执行循环体;执行完循环体,再执行表达式3,以此类推
直到表达式2的结果是false,循环就结束

//计算 1+2+3+。。。+100
var sum = 0
for (var i=1;i<101;i++){
    sum += i
}
console.log(sum)

2.while循环

a.while(条件语句){循环体} 和python一样
var sum1 = 0
var i = 1
while (i<101){
    sum += i;
    i++;
}
console.log(sum1)
b. do-while循环:do{循环体}while(条件语句);

执行过程,先执行循环体,然后判断条件是否成立。如果成立再执行循环体。。。
依次类推,直到条件不成立,循环结束

var sum2 = 0
var i = 1
do{
    sum += i;
    i++;
}while (i<101);
console.log(sum2)

3.break和continue(和python一样)

06函数

1.函数的声明

function 函数名(参数列表){函数体}

a.function - 关键字
b.函数体 - 驼峰式:见名知义
c.参数:参数可以有默认值,有默认值的参数要写在后面。调用函数传参的时候,是按实参的位置来传参。

function sum1(num2,num1=1){
    console.log('求两个数的和')
    return num1+num2
}

console.log(sum1(10,20))
console.log(sum1(20))
  • 函数没有return的时候,函数的返回值是undefined
function func1(){
    console.log('我是函数1')
}
console.log(func1())

2.函数的调用

函数名(实参列表)
调用过程和python一样

3.作用域

全局变量:声明在函数外面的变量(从变量声明到文件结束)
局部变量:声明在函数里面的变量(从变量声明到函数结束;函数的参数也是局部变量)

//aaa就是全局变量
var aaa =10
function func2(){
    
    //bbb就是局部变量
    var bbb = 20
    console.log(bbb,aaa)
    
    //函数中可以修改全局变量的值
    aaa = 100

    
    //函数中可以声明函数
    function func22(){
        bbb = 111
        console.log(bbb)
    }
}

func2()
console.log(aaa)

//可以将函数作为变量
var a = func2
a()

07数据类型

数字,字符串,布尔,列表,对象

1.数字:包含整数和小数(支持科学计数法)

var num1 = 10
var num2 = new Number()
console.log(num2+10)

2.字符串

//a.""和''括起来的字符集
//b.
var str1 = 'abc'
var str2 = "abc"
var str3 = '\n'
var str4 = '\\'

//e.获取字符串的长度:字符串.length
console.log(str1.length)

//f.获取单个字符:字符串[下标]
//下标:1.范围是0~长度-1
//2.如果越界,不报错,但是结果是undefined
//js中的字符串不能切片
console.log(str1[10])

//g.运算符
//js中字符串只支持+,不支持*
//字符串1+字符串2 -- 拼接两个字符串
//js中字符串可以和其他任何数据进行加操作,其效果都是字符串链接(会将其他数据转换成字符串)
console.log(100+'abc')
console.log('123'+'abc')

//h.字符串相关方法(查)
var strstr= 'abc123'
var re = strstr.replace(/\d+/i,'ooo')
console.log(re)

3.对象,构造方法(类)

var obj = {name:'hcy',age=18}
console.log(obj1.name,obj1['name'])

//声明构造方法
function Person(){
    this.name = 'abc'
    this.age = 18
    this.sex = '男'
}

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

推荐阅读更多精彩内容