js基础

js的基本作用和使用方法

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

2.在哪里去写JS代码
a.可以卸载script标签中(理论上script标签可以放到HTML文件中的任何位置,实际开发的时候一般放在head或者body里面)
b.写到标签的事件属性中(例如:onclick)
c.写到外部的JS文件中(.js)

3.JS在网页中能做什么事情
a.在网页的不同的位置插入HTML代码



    
        
        JS基础
        
         
        
        
        
         
        
    
    
        

千锋所有学科

1.js基础语法

1.JS中的注释
//这是单行注释
/*
这是多行注释
*/

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

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

4.基本的数据类型
Number(数字),String(字符串),Boolean(布尔类型),Array(数组)--列表,Object(对象)--字典 ,Function(函数),null

在控制台中打印括号里面的内容功能和python中的print一样

 console.log("hello world");
 console.log("hello js");

5.字面量
数字字面量

89;
100;
10.34;
3e8;

字符串字面量

'abc';
"abc";

布尔字面量

 true;
 false;

数组字面量

  [1,2,'ban','abc'];
  [];

对象的字面量(对象的key值又是属性,不用加引号)

 var dic = {q:'weuiq' ,b:'hh'}
 console.log(dic.q, dic['b'])

6.标识符
使用标识符来命名
a.由字母、数字、下划线和$组成,数字不能开头

  var huu9_$;

b.不能是关键字
var for

c.大小写敏感,大写和小写不一样
d.规范:1.见名知意

2.变量的声明

在js中可以通过声明对象来保存数据

1.语法
var 变量名;
var 变量名 = 初值;
说明:var是关键字:
变量名:标识符,不能随意使用_或者$开头;驼峰式命名规则(第一个单词首字母小写,后面每一个单词的首字母大写)

声明变量

var userName;

给变量赋值

userName = 'wang';
consolse.log(userName)

var score = 100
console.log(score)

同时声明多个值

 var name, age,sex;
 var name1='abc',age1=23,sex

一个变量可以存储任意类型的值,声明变量的时候,变量没有赋值,默认是undefined

var a = 'abc'
a =100
a = score

3.运算符

1.数学运算符: +,-,*,/,%,++,--
a.加减乘和取余 和数学中的一样

var a = 10+20
var b = 20-10
var c = 10*20
var e = 7 % 2

b./和数学中的一样

 var d = 5/2
 console.log(d)

c. ++ --
语法:变量++/变量-- ;++变量/--变量
++ 自加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)   //10 11

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

 console.log(10 > 20)  //false

==:判断内容是否相等

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

===:判断值和类型是否相等

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

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

  console.log(true&&false,true&&false)
  console.log(true||false,true||false)
  console.log(!true)

4.赋值运算符: =,+=,-=,/=,+=,%=
赋值运算符的左边必须是变量和python一样

  var a =100
  a += 10
  a -= 10
  a %= 10
  a /= 10
  console.log(a)

5.三目运算符 ?:
语法:
条件语句 ? 值1:值2
结果:判断条件语句的结果是否为true,如果是true,那么表达式的结果是值1,否则是值2

  var b = 10 > 20 ? 10:20 

求两个值的最大值

  var a1 = 80
  var a2 = 100
  console.log(a1 > a2 ? a1:a2)

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

4.分支结构

js中的分支结构有两种:if语句和switch语句
1.js中的if语句
a.if(条件语句){满足条件要执行的代码块}

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

b.if(条件语句){语句块1}else{语句块2}

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

c.if else if else(相当于else elif else)

var age = 18
if(age < 18){
    console.log('未成年')
}
else if(age < 40){
    console.log('青年')
}
else{
    console.log('老年')
    }

switvh语句
语法:

switvh(变量){
    case 值1:
        语句1:
        break;
    
    case 值2:
        语句2:
        break;
    
    ....
    default:
        语句3:
        break;
    
}

执行过程:使用变量的值依次和每一个case后面的值进行判断,看是否相等。
如果相等就执行那个case后面对应的语句,如果前面每一个case后面的值都和变量的值不相等,就执行default后面的语句

var score = 10
switch(score){
    case 1:
        console.log('F');
        break;   //如果没有break判断相等后的语句就会全部执行
    case 4:
        console.log('D');
        break;
    case 10:
        console.log('A');
        break;
    default:
    console.log('other');
    break;
}
console.log('====')

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('及格');
        break;
    case 8:
    case 9:
        console.log('良好');
        break;
    case 10:
        console.log('优秀');
        break;

0-6表示星期一到星期日

    var week = 0
    switch(week){
        case 0:
            console.log('week1');
            break;
        case 1:
            console.log('week2');
            break;
        case 2:
            console.log('week3');
            break;
        case 3:
            console.log('week4');
            break;
        case 4:
            console.log('week5');
            break;
        case 5:
            console.log('week6');
            break;
        case 6:
            console.log('week7');
            break;
        default:
            console.log('other');
            break;
    }

5.循环结构

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

for in (和python中的for循环一样)
for(变量 in 数组/对象){函数体}

var arr1 = [1,2,3,4,'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 = 'uwioe'
for(var x in str1){
    console.log(x,str1[1])
}

b. for(表达式1;表达式2;表达式3){循环体}
执行过程:先执行表达式1,然后再判断表达式2的结果是否为true,如果是true就执行循环体;执行完循环体,再执行表达式3;
执行完表达式3,在判断表达式2的结果是否是true,如果是true又执行循环体;执行完循环体,再执行表达式3,以此类推,直到
表达式2的判断结果为false,循环结束。

计算1+2+..+100

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

while循环
a.while(条件语句){循环体}
计算1-100的值

var sum1 = 0
var i = 1
while(i <= 100){
    sum1 += i;
    i++
}
console.log(sum1)

do-while循环:do{循环体}while(条件语句);
先执行循环体,然后判断条件语句是否成立.如果成立再执行循环体,以此类推,直到条件不成立,循环结束。
比while先执行一次

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

3.break和continue
和python一模一样.

6.函数

  1. 函数的声明
    function 函数名(参数列表){函数体}
    a.function 关键字
    b.函数名 驼峰式命名:见名知意
    c.参数:参数可以有默认值,有默认值的参数要写在后面。调用函数传参的时候,是按位置参数来传参。保证每一个参数都有值。
    d.函数体:实现函数的功能。只有在调用的时候才会执行
function sum1(num1,num2=1){
    console.log('两个数的和')
    return num1+num2
}

console.log(sum1(10,20))

函数没有返回值的时候,函数的返回值就是underfined

function fun1(){
    console.log('123')
}
console.log(fun1())

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

3.作用域
全局变量:声明在函数外面的变量(从函数声明到文件结束)
局部变量:声明在函数里面的变量(从函数声明到函数结束,函数的参数也是局部变量)

aaa 全局变量

var aaa = 10

function fun2(){
    //bbb 局部变量
    var bbb = 10 
    
    //函数中可以修改全局变量的值
    aaa = 200
    
    //函数中可以声明函数
    function fun222(){
        bbb = 20
        console.log(bbb)
    }
}
fun2()
console.log(aaa)

可以将函数作为变量

var a = fun2()
a

个数不定参数,js不支持

7.数据类型

数字,字符串,布尔,列表,对象
1.数字:包括整数和小数(支持科学计数法)

var num1 = 10
var num2 = new Number()

console.log(num2+10)

2.字符串
a.''和"" 括起来的字符集
b.转义字符(和python一样)
c.字符编码是Unicode编码

var str1 = 'abc'
var str2 = "abc"
var str3 = '\n'
var str4 = '\\n'

e.获取字符串长度 字符串.length

a = str1.length
console.log(a)

f.获取单个字符
下标 1.范围是0-长度-1 2.如果越界,不报错,结果是undefined
js中的字符串不能切片

console.log(str1[1])

g.+运算符
js中只支持+,不支持*
字符串1+字符串2 --拼接两个字符串
js字符串可以和其他任何数据进行加操作,其效果是字符串连接(把其他的转换成字符串)

console.log('123'+'abc'+'123'*2+100)

h.字符串方法(查)(这里有点问题,用的时候先查查资料)

 var re = 'abc23'.search(/\d+/)
 console.log(re)

3.对象 构造方法(类)

var obj1 = {name:'yuting',age:10}
console.log(obj1.name,obj1['name'])

声明构造方法

function person(name='',age=0,sex=''){
     this.name = name
     this.age = age
     this.sex = sex
 }
 var p11 = new person()
 p11.name = 'mmm'
 p11.age = 20
 p11.sex ='女'
 
 console.log(p11.name,p11.age,p11.sex)

你可能感兴趣的:(js基础)